前端程序员都经常碰到性能优化的问题，随着低版本浏览器被逐步淘汰，因为浏览器内核的算法越来越先进，前端程序员在这方面的担子也越来越轻，相应地程序员工作中探索这方面问题本质的机会也变少，所以这篇文章就把这个基础问题再拿出来讨论一下。
这里有两个关键字：重排（reflow）/重绘（repaint），我们先来认真讨论一下这两个词的定义。
首先，浏览器加载网页后有两个大动作：解析DOM树和渲染渲染树。那什么是DOM树和渲染树呢？
参考下图（来源：https://blog.csdn.net/sinat_37328421/article/details/54575638）：
DOM树和渲染树.png
简言之，DOM树就是html的标签结构，渲染树则是DOM树结合css样式。所以，重绘仅指页面重新渲染，重排指DOM树结构发生变化或者DOM树内部元素占位大小/排列发生变化。
这里我们结合上面的图要给出一个重要结论，重排必定引发重绘，但是重绘可以单独发生不一定伴随重排。这个原理我们要记住，因为涉及到优化的思路一定要减少重排，重排的开销一定大于单独重绘。
在谈具体优化方案前，我们再看一下什么情况会触发重排：
- 浏览器窗口大小改变
- 元素占位改变（高/宽改变）
- DOM树中元素发生变化
- 页面首次加载
- DOM元素内嵌内容改变（例如引用图片发生改变）
理解上述内容就可以思考如何减少浏览器重排重绘的开销：
- 改变样式时把style组合在一起同一赋值，不要一个一个修改
- 直接改变class或者id
- 让需改变的元素脱离文档流，这样文档流中的内容不会受影响（常见例子，动画场景的父元素最好脱离文档流）
最后，随着浏览器内核越来越先进，前端程序员可以省心很多，很多场景不必再刻意优化，但是注重浏览器性能是一个好的前端程序员必备素质。
网友评论