2

次の問題を経験したことがありますか: JavaScript はパフォーマンスを集中的に使用する関数呼び出しを何百回も実行する必要があり、スキップできず、ブラウザーが数秒間クラッシュしたように感じます (スクロールやクリックができないなど)? 例: 要素の高さを取得するために 500 回の呼び出しがあり、クラスの設定など、数百回の DOM 変更を行っていると想像してください。残念ながら、パフォーマンスが集中するタスクを回避する方法はありません。Web ワーカーはアプローチの 1 つかもしれませんが、あまりサポートされていません (IE...)。私は、タイムアウトまたはコールバック ベースのステップ バイ ステップ レンダリングを考えており、その間に何かを行う時間をブラウザに与えています。これについて共有できる経験はありますか？

よろしくお願いします

4

3 に答える 3

2

このトピックを見てください。これはあなたの質問に関連するものです。

ページ内のJavaスクリプトのパフォーマンスを向上させる方法は？

于 2012-05-28T09:56:55.837 に答える
1

それほど多くの DOM 操作を行っている場合は、おそらく問題の要素または DOM 自体を複製し、キャッシュされたバージョンで変更を行ってから、1 つの要素ではなく、一度にまたはより大きなセクションで ting 全体を置き換える必要があります。時間。

時間がかかるのは、計算や関数などではなく、DOM 操作自体であり、それをセクションで 1 回または数回実行するだけで、実行速度が大幅に向上します。

私が知る限り、Web ワーカーは実際には DOM 操作用ではありません。それらを使用するメリットはあまりないと思います。おそらく問題は、大量の要素を 1 つずつ変更しているという事実であるためです。 DOM 内のすべてを 1 つのバッチで置き換える代わりに。

于 2012-05-28T10:20:10.873 に答える
0

この場合、私が推奨できることは次のとおりです。

  1. コードを再度確認します。提案されているように、いくつかの標準的な最適化を適用してみてください。たとえば、ルックアップを減らしたり、DOMの変更をオフラインにしたりします（たとえば、document.createDocumentFragment（）...を使用）。DOMフラグメントの操作は、限られた方法でのみ機能します。要素の高さを取得して複雑なフォーマットを行うだけでは十分ではありません。
  2. 1.で問題が解決しない場合は、スクロールイベントによってトリガーされるなど、オンデマンドで実行されるレンダリングソリューションを作成します。または：ボタンをクリックしたりスクロールしたりするなど、ブラウザがその間に何かを実行する時間を与えるために、タイムアウトを使用して段階的にレンダリングします。

2.でのステップバイステップレンダリングの短い例：

var elt = $(...);
function timeConsumingRendering() {

    // some rendering here related to the element "elt"

    elt = elt.next();
    window.setTimeout((function(elt){
        return timeConsumingRendering;
    })(elt));
}
// start
timeConsumingRendering();
于 2012-05-29T10:03:27.953 に答える