jquery 另类优化（最新版）

最新推荐文章于 2025-05-01 08:38:22 发布

fengg5241

最新推荐文章于 2025-05-01 08:38:22 发布

阅读量458

点赞数

分类专栏： javascript 文章标签：优化 jquery function div javascript 测试

本文链接：https://blog.youkuaiyun.com/fengg5241/article/details/6575114

版权

javascript 专栏收录该内容

14 篇文章

订阅专栏

本文探讨了一种通过先将根父DOM节点移出DOM树来优化DOM元素样式修改的方法，实验证明此方法能显著提升性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前看到过好几篇关于jquery 优化的文章，都不错，但是多半大同小异，今天我也不赘述前人说的优化方法，我想说的是另类的也是提升性能最大的一种优化方法。

Doglas说过，“事实上Javascript并不慢，慢的是DOM的操作“，确实阿，除去函数调用等基本的消耗，至少有95%的时间是用在了DOM元素的样式被改变后的重新渲染之上。发现了这个事实之后，其实也就有了更正确的优化方向，也是前端性能中的基本原则之一：在修改大量子元素时，先将根父DOM节点移出DOM树。举例子如下：

测试环境

　　测试使用以下条件：

　　1.5000个div放在一个容器（<div id="container"></div>）中。

　　2.使用$(‘#container>div’)选择这5000个div。

　　3.每个div要求设置一个随机背景色(randomColor函数)，和800px以下的随机宽度(randomWidth函数)。

正常使用法：

$('#container>div') .css('background-color', randomColor) .css('width', randomWidth);

单次循环法：

$('#container>div').each(function() { $(this).css('background-color', randomColor).css('width', randomWidth); });

对象赋值法：

$('#container>div').css({ 'background-color': randomColor, 'width': randomWidth });

优化方法：

$('#container').detach().find('div') .css('background-color', randomColor) .css('width', randomWidth); $('#container').appendTo(document.body);

测试浏览器选择Chrome 8系列(用IE测就直接挂了)。

结果如下：

正常使用法	单次循环法	对象赋值法	优化方法
18435ms	18233ms	17748ms	900ms

优化还是很成功的，嘿嘿！

这里在补个小常识：关于优化方法中用到的detach() api,这里再说明下：

detach() 方法移除被选元素，包括所有文本和子节点。

这个方法会保留 jQuery 对象中的匹配的元素，因而可以在将来再使用这些匹配的元素。

detach() 会保留所有绑定的事件、附加的数据，这一点与 remove() 不同。

看个例子：删除并恢复一个元素

<html> <head> <mce:script type="text/javascript" src="/jquery/jquery.js" mce_src="jquery/jquery.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <p>这是一个段落。</p> <button id="btn1">删除 p 元素</button> <button id="btn2">恢复 p 元素</button> </body> </html>

举这个例子一方面是展示detach的用法，另外还想说的是prepend用法，因为我看有很多网友对用完detach删除元素后，不知道如何复原，这个例子就是最好的说明了。