代码之家  ›  专栏  ›  技术社区  ›  Mark Rogers

使用jquery创建或删除几十个div时,如何优化性能?

  •  3
  • Mark Rogers  · 技术社区  · 15 年前

    背景 以下内容: 在我正在进行的当前项目中,我创建了一个jquery插件,它创建了一个可拖动的“GoogleMaps”式地图,由许多块组成。类似于谷歌地图的工作原理,但此时没有缩放。

    这个地图插件创建并销毁10-20 <div> 使用jquery的每个鼠标拖动一个图块长度 $('..').append 而且性能不错。但我希望Peroformance更好,以便让资源较少的计算机用户更容易访问该应用程序。

    问题:

    如何使用jquery最大限度地提高性能创建和销毁大量div?

    更好的性能是重用生成的 <分区> 元素,通过修改要删除的现有元素,而不是从头开始创建它们?

    正在使用生成的 $('<div>') 比在已经存在的元素上选择和更改类和子元素慢还是快?

    3 回复  |  直到 15 年前
        1
  •  4
  •   cletus    15 年前

    创建DOM元素非常昂贵。尽量避免。也就是说,新发布的jquery 1.4明显提高了性能,但如果可以的话还是要避免。

    jQuery 1.4 Released :

    jQuery(“<div>”) jQuery(“<div/>”) jQuery(“<div></div>”) ( jQuery() Documentation , Commit )

    所有三个现在都使用相同的代码路径 (使用document.createElement) 提高性能 jQuery("<div></div>") . 注意如果 您指定属性,我们使用 浏览器的本机分析(使用 内螺纹)。

    是的,重用要好得多。

        2
  •  3
  •   ScottE    15 年前

    一个技巧——如果您要向DOM追加一组项目,那么可以将它们构建为一个字符串,然后一次追加所有项目。

    下面是关于这个主题的一个很好的链接:

    http://www.artzstudio.com/2009/04/jquery-performance-rules/#limit-dom-manipulation

        3
  •  1
  •   Peter Olsson    15 年前

    在最近的jquery项目中,我有500个 IMG -标签位置为 style -标签和绝对位置。结果发现,删除它们并用新坐标重新创建它们比修改 风格 -使用jquery css函数标记。(更换整个系统可能会更快 风格 -标签,但在这种情况下这是不可能的。)

    我还测量了用所有的 即时消息 -标记和添加到一个附加中比逐个添加(浏览器不需要重新绘制?)要快。

    在您的情况下,应该可以很容易地测量两种不同的方法:

    var start = new Date().getTime();
    
    // Do the update here
    
    var end = new Date().getTime();
    $('#redraw').html(end - start);
    

    在HTML中添加占位符:

    Redraw: <span id="redraw"></span>ms