1

これが初心者の質問である場合は申し訳ありませんが、Javascriptに関してはあまり知識がありません...

したがって、コードスニペットは次のとおりです。

function insertSquares() {
    for (i = 0; i < 113; i++) {
        $('#wrapper').append('<span><img src="images/square_2.png" style='display: none;'/></span>');
    }
}

ご覧のとおり、コードが繰り返されるたびにa<span>とan<img>を追加するループがあります。<div>通常、この追加は問題ではありませんが、ループ内で何度もこれを実行する必要があるため、時間がかかります。（また、この関数はによって何度も呼び出され、setInterval()Webページ全体の速度が低下します）

この関数をJSLitmusでベンチマークすると、5 ops /秒で実行されますが、これを高速化したいと思います。代わりに（ループを介して毎回追加するのではなく）ループを使用してデータを配列に追加し、ループの外側ですべてのデータを1回だけ追加することをすでに考えましたが、これは高速ではないようですかなりの量でプロセスをアップします。

それで、私が考えもしなかったこのコードをスピードアップすることができるいくつかの方法はありますか？この量の同じ画像を読み込んで表示するためのより効率的な方法は考えられません。

4

3 に答える 3

5

できる最善のことは、ループが終了するまで待ってDOMに変更を加えることです。あなたの現在の方法はDOMを提出に打ち込むでしょう、そしてあなたは確かにこれを望まないでしょう。代わりにドキュメントフラグメントを検討してください。

John Resigは、DOM Document Fragmentsについて少し前に書いていますが、それでもこの投稿は優れた入門書です。オンラインでhttp://ejohn.org/blog/dom-documentfragments/にあります。

于 2012-05-21T23:38:04.883 に答える
5

文字列を追加する必要があるまで、文字列を操作するだけで済みます。

function insertSquares() {
    var html = '';
    for (var i = 0; i < 113; i++) {
        html += '<span><img src="images/square_2.png" style="display: none;"/></span>';
    }
    $('#wrapper').html(html);
}
于 2012-05-21T23:41:47.110 に答える
0

スムーズなパフォーマンスのために、私は@jonathon-sampsonと@timrwoodに同意します。DOMへの1つの変更が多くの​​人よりも望ましいということです。

とはいえ、パフォーマンスを向上させるもう1つの方法は、DOMに挿入するHTMLの量を最小限に抑えることです。<span>あなたの場合、CSSクラスを使用して一般的なスタイル要素をカプセル化することで、可能であれば各要素を1つのブロックに切り詰めようとします。

から：

html += '<span><img src="images/square_2.png" style="display: none;"/></span>';

に：

html += '<span class='myclass'></span>';

上記のコメントのように、一般的にこれらすべてを回避し、DOMサーバー側の作成を処理できる場合、それは実際には「最良の」ソリューションになります。

于 2012-05-22T01:32:59.480 に答える