陈建华的博客
专注web开发
批量修改DOM树的性能改进
2016-10-21 11:06:12   阅读669次

不管用js还是jquery,我们总是能遇到频繁修改dom树的情况。而每次修改dom树,都会触发浏览器的绘制操作。尽管浏览器绘制过程比较智能,也比较快速。但是如果太频繁的修改dom树,浏览器也有吃不消的时候。因此我们要汇总批量修改dom的时候,就需要使用技巧来保证浏览器不会卡壳。


通过这些步骤来减少重绘和重排的次数  

1、使元素脱离文档流  

2、对其应用多重改变  

3、把元素带回文档  

这个过程只有第一、三会触发重排,如果忽略这两个步骤,那么第二步所产生的任何修改都会触发一次重排。


有三种方法使Dom脱离文档  

1、隐藏元素,应用修改,重新显示  

2、使用文档片段在当前DOM之外构建一个子树,再把它拷贝回文档  

3、将原始原始拷贝到一个脱离文档的节点中,修改副本,完成后再替换原始元素 



-----------------------------------------------------
转载请注明来源此处
原地址:#

-----网友评论----
1楼:xiaozl 发表于 2016-12-06 02:22:02
我看了本书  这本书和你讲的一样  高性能的js  
-----发表评论----
微网聚博客乐园 ©2014 blog.mn886.net 鲁ICP备14012923号   网站导航