Question

我正在进行投资组合重新设计，我有一些JS可以生成大量（大约300个）div，对它们进行样式化，然后将它们附加到正文中。这在webkit浏览器中可以快速而完美地运行，但是当涉及到Firefox时，它的速度很慢。

我一直在试图弄清楚为什么Firefox无法处理这个问题，我尝试将所有div的html连接成字符串，然后将整个事物附加到正文中，但事实证明这一点同样缓慢或慢。

如果您希望现场查看问题，我的网站为here

以下是相关的代码：

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();

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中慢得多。

See and run this performance test of it

另外，您可能想要执行标准：关闭Firefox，运行Ccleaner，重启FF舞。

Answer 4

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

Firefox Jquery appendTo效率低下？

4 个答案: