在前端的开发中,一般主要有三个因素会导致DOM性能的不佳。第一就是使用脚本进行了大量的DOM操作。第二就是使用脚本触发了太多重排或重绘。第三就是脚本使用了低性能的方法来定位DOM树中的节点。
工具/原料
前端开发
方法/步骤
1
重绘和重排:有元素从不可见变为可见,就会触发重绘。重绘其实很耗性能,因为它需要搜索所有元素来决定什么是可见的,什么应该显示出来,重排带来更大的变化。如果对DOM树进行了操作,或者某个样式改变了布局,引擎必须对相关元素进行重排。
2
将重排数量降到最低:在很多的时候脚本会需要做一些引起重绘或重排的事情。比如说动画,动画就是基于重排的,所以在Web开发中,重排说我们不可避免,如果要保证脚本跑得飞快,那么我们就必须保证在相同整体效果的前提下将重排保持在最低限度。比如重排一个table需要3倍于等效块元素显示的时间。
3
最小重排:一般的重排会影响到整个文档。文档中需要重排的东西越多,重排花的时间就越长,absolute和fixed定位的元素不会影响到主文档的布局,所以对它们的重排不会引起其它部分的连锁反应。因此,动画不需要应用于整个文档,它最好只应用在一个固定位置的元素上,因此大多数动画都只需要考虑这个问题。
4
修改文档树:修改文件树会导致重排。在DOM中添加新的文本节点,或者修改各种属性,都足以引起重排。
5
修改不可见的元素:如果某个元素的display样式设置为none,就不会对其进行重绘,哪怕它的内容发生改变。这都是因为它不可见,这是一种优势。
注意事项
1
避免检索大量节点
2
通过XPath提升速度
上一篇:怎样自制麻辣烤鱼
下一篇:乐曲的身心调养(陡势横桥)