-1

我正在重新设计投资组合，我有一些 JS 可以生成大量（大约 300 个）div，设置样式并将它们附加到 body。这在 webkit 浏览器中可以快速完美地运行，但是对于 Firefox，它的运行速度非常慢。

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

如果您想现场查看问题，我的网站在这里

这是相关的代码位：

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

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

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

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

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

于 2011-07-23T04:15:12.577 回答
0

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

于 2011-07-23T04:25:22.803 回答