0

私は、検索結果のリストを実行する JavaScript ループ (を使用) を使用しており、検索ヒットを中心にsetIntervalスタイル設定された css を追加して検索語を強調表示しています。これを実行している間、ブラウザの制御を解放するためにこのように<span>使用しています。setInterval

Chrome と Firefox では、setInterval パラメータが 10 ～ 20ms の場合でも、これはうまく機能します。結果がすばやく強調表示されている間、ユーザーはブラウザーを完全に制御できます (つまり、スクロール、リンクのクリックなど)。

mylooper = setInterval(function() {
    // my functionality is here
},15); // 15ms

残念なことに、恐ろしい IE8 を使用すると、ブラウザーがロックアップし、検索結果に を追加してスタイルを設定するのに非常に長い時間がかかります。<span>また、最初にページをロードするだけでも長い時間がかかります。このスクリプトを削除すると、大幅に短縮されます。

これまでのところ、私は試しました：

  • 間隔の値を変更します (IE8 は 15 ミリ秒未満の間隔を検出しないと読みました)。
  • setTimeoutsetInterval の代わりに使用。
  • インターバルを削除して、これが実際にスローダウンの原因であることを確認します (実際にそうです!)。と

  • Internet Explorer についてよく悪口を言う;

    var highlightLoop;
var index = 0;

highlightLoop = setInterval(function () {

var regex = RegExp(regexPhrase, "gi"); // regexPhase created elsewhere
var searchResults = resultElements.eq(index).get(0); // run through resultElements which contain alll the nodes with search results in them.

  findAndReplaceDOMText( // a function that does the searching and inserting of styling
    regex,
    searchResults,
    function (fill, matchIndex) {
      called = true;
      var span = document.createElement("span");
      span.className = "result-highlight";
      span.innerHTML = fill;
      return span;
    }
  );
  if (index == resultElements.length || searchTermUpdated == true) { // stop interval loop when search term changes or we reach the end of results - variable set elsewhere.
    searchTermUpdated = false;
    clearInterval(highlightLoop); // stop the loop
  }
  index++
}
}, 50); // 50ms does not improve performance.

IE でのこの種の JavaScript の回避策に関するアドバイスは、非常に高く評価されます。皆さんありがとう。

4

2 に答える 2

0

代わりに、この再帰的なアプローチを試してください。

  • 作用するすべての要素のリストを配列Xに取得します（1回限りのコスト）
  • 配列Xに長さがありますが、次のアクションを繰り返し続けます
    • 最初の要素を配列からシフトします
    • 単一の要素を処理する
    • このプロセスを、新しい配列X（現在はX n -1の長さ）で再開します。setTimeout

コードは一般的に次のようになります

function processArray(array) {
  var element = array.shift();
  processElement(element);
  if (array)
    setTimeout(function(){processArray(array);},15ms);
}

この再帰では他に何かすることがあるかもしれませんが、すべてのブラウザーでかなりうまく機能し、最後のブラウザーが終了する時間があるときにのみリピートを開始するため、ブロックされることはありません。

于 2013-01-11T16:42:52.780 に答える
0

を微調整することでパフォーマンスを改善できると思いますfindAndReplaceDOMText。おそらくそのコールバックも同様です。findAndReplaceDOMTextすべての一致のループ内から、コールバックによって返された要素をDOMに追加すると思います。ループ内でそれを行っている場合は、ループの外に移動して、すべての変更を一度に DOM に適用してみてください。DOM の更新ごとにページを再描画するのはコストがかかるため、これによりパフォーマンスが向上するはずです。

于 2013-01-11T16:38:53.013 に答える