Firefox Jquery appendTo 效率低下？

Question

我正在重新设计一个作品集，我有一些 JS 可以生成大量（大约 300 个）div，设置它们的样式，并将它们附加到正文。这在 webkit 浏览器中运行得很快而且完美，但在 Firefox 中却慢得要命。

我一直试图找出为什么 Firefox 无法处理这个问题，并且我尝试将所有 div 的 html 作为字符串连接起来，然后将整个内容附加到 body 中，但事实证明这同样慢或更慢。

如果您想实时查看问题，我的网站是此处

这是相关的代码：

get_bokeh 返回 a描述单个“散景”片段的 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();

Answer 1

您应该删除 for 循环中的 .appendTo 。您告诉浏览器在每次迭代时创建对 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);

Answer 2

查看此 jsperf 测试：http://jsperf.com/test-of-jquery-appendto。

将 HTML 构建为字符串，然后将其一次性添加到 DOM，在 Chrome 和 Firefox 中速度提高了 2-3 倍，在 IE8 中速度提高了近 5 倍。这并不是对您正在做的事情的完美模拟，但可能值得一看。

Answer 3

你的代码在 FF 中并不比在 Chrome 中慢多少。

查看并运行它的性能测试。

另外，您可能想要执行标准操作：关闭 Firefox，运行 Ccleaner，重新启动 FF dance。

Answer 4

为什么不使用 css 类而不是内联样式？我看到您为容器甚至循环中的 div 设置了一堆样式属性。如果您在类中设置这些样式并使用该类，那么它肯定会提高性能，因为 jquery 在创建元素时不必遍历所有属性。