Web性能优化之回流重绘 - CSS3硬件加速篇

主要观点总结

本文介绍了浏览器渲染页面的过程，包括回流和重绘的概念，以及如何通过CSS3硬件加速优化性能。文章还讨论了GPU加速的原理和实际应用。

关键观点总结

关键观点1: 浏览器渲染页面的流程

包括HTML解析、样式计算、布局、分层、生成绘制指令、分块、光栅化和绘制等阶段。

关键观点2: 回流和重绘的概念

回流是指由于布局或几何属性改变导致的布局树重新计算，而重绘是当render tree中的一些元素需要更新属性时发生的。

关键观点3: CSS3硬件加速（GPU加速）

利用GPU进行渲染，减少CPU操作的一种优化方案。常见的触发硬件加速的CSS属性包括transform、opacity、filter等。

关键观点4: 减少重绘和回流的方法

包括批量修改DOM、使用绝对定位、CSS3硬件加速等。

关键观点5: 硬件加速的注意事项

过多开启硬件加速可能耗费较多内存，GPU渲染可能影响字体的抗锯齿效果。