-1

私はポートフォリオの再設計に取り組んでおり、多数 (約 300) の div を生成し、スタイルを設定し、body に追加する JS を少し持っています。これは、Webkit ブラウザーでは迅速かつ完全に機能しますが、Firefox に関しては非常に遅いです。

Firefox がこれを処理できない理由を突き止めようとしていて、すべての div の html を文字列として連結してから、全体を body に追加しようとしましたが、これは同じか遅いことがわかりました。

問題をライブで見たい場合は、私のサイトはこちら

関連するコードは次のとおりです。

get_bokeh は、単一の「ボケ」部分を記述する CSS スタイルの文字列を返します。

function generate(){ 

            $("#bokeh_container").remove();
            if (q==0){
                min = 30,
                max = 30,
                bokeh_count = 1;
            }
            else if (q==1){
                min = 7,
                max = 10,
                bokeh_count = 300;
            }
            else if (q==2){
                min = 7,
                max = 15,
                bokeh_count = 300;  
            }
            else if (q==3){
                min = 8,
                max = 11,
                bokeh_count = 500;  
            }

            sum = min+max;

            window_width = $(document).width(); 

            window_height = $(window).height();

            colorful = $("#colorful").attr("checked");

            var container = $("<div />",{"id":"bokeh_container","style":"width:100%; height:100%; position:absolute; left:50%; margin-left:-600px; top:0px; z-index:1; display:none; "});

            for( var i=0;i<bokeh_count;i++){

                $("<div />",{"class":"bokeh","style":get_bokeh()}).appendTo(container);

            }

            container.appendTo("body").show();
4

4 に答える 4

1

.appendTofor ループの を削除する必要があります。高価な反復ごとにDOMへの追加を作成するようブラウザに指示しています。代わりに、オブジェクトを配列に追加するか、それらを文字列に連結して (はるかに安価です)、後で単一の追加を行います。

var html = '';
for( var i=0;i<bokeh_count;i++){
    html += '<div class="bokeh" style="'+ get_bokeh()+ '"></div>';
}
var container = $("<div />",{"id":"bokeh_container","style":"width:100%; height:100%; position:absolute; left:50%; margin-left:-600px; top:0px; z-index:1; display:none; "}).html(html);
$('body').append(container);
于 2011-07-23T04:41:33.320 に答える
0

この jsperf テストを確認してください: http://jsperf.com/test-of-jquery-appendto。

HTML を文字列に構築して DOM に一度に追加すると、Chrome と Firefox では 2 ～ 3 倍、IE8 ではほぼ 5 倍高速になります。これはあなたがやっていることの完全なシミュレーションではありませんが、おそらく見る価値があります。

于 2011-07-23T03:49:46.483 に答える
0

あなたのコードは、Chrome よりも FF の方がそれほど遅くはありません。

このパフォーマンス テストを参照して実行してください。

また、標準的なことをしたいかもしれません: Firefox をシャットダウンし、Ccleanerを実行し、FF ダンスを再起動します。

于 2011-07-23T04:15:12.577 に答える
0

インライン スタイルの代わりに css クラスを使用しないのはなぜですか? コンテナやループ内の div に対しても、一連のスタイル属性が設定されていることがわかります。これらのスタイルをクラスで設定し、代わりにクラスを使用すると、jquery が要素の作成中にすべてのプロパティを反復処理する必要がないため、パフォーマンスが確実に向上します。

于 2011-07-23T04:25:22.803 に答える