好程序员分享优化CSS重排重绘与浏览器性能

1、浏览器的渲染机制浏览器渲染展示网页的过程，大致分为以下几个步骤：·解析HTML(HTML Parser)构建DOM树(DOM Tree)渲染树构建(Render Tree)绘制渲染树(Painting)

4、什么时候会导致reflow发生呢？改变窗口大小改变文字大小添加/删除样式表内容的改变，(用户在输入框中写入内容也会)激活伪类，如:hover操作class属性脚本操作DOM计算offsetWidth和offsetHeight设置style属性如图：

7、优化动画css3 动画是优化的重中之重。除了做到上面两点，减少 Reflow 和 Repaints 之外，还需要注意以下方面。·启用 GPU 硬件加速GPU（Graphics Processing Unit） 是图像处理器。GPU 硬件加速是指应用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来完成，因为 GPU 是专门为处理图形而设计，所以它在速度和能耗上更有效率。 GPU 加速可以不仅应用于3D，而且也可以应用于2D。这里， GPU 加速通常包括以下几个部分：Canvas2D，布局合成（Layout Compositing）, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。如图：