浏览器的重绘、重排

1. 如何提升页面渲染性能？
2. 那些行为会引起重绘/重排？
3. 如何减少页面的重绘/重排？

• 浏览器渲染进程，分为四个部分，解析html(dom,cssom合成render数)，layout进行布局确定大小和尺寸，paint节点绘制为确定的像素指令在各个层的位置，composite将所有层按照一定顺序绘制到一个层中，并绘制到屏幕上。
• 提升性能的方向为较少其中的layout和paint，即减少页面的重绘重排过程。
• 引起重绘重排的操作：
• 重绘： 外观变化时（color，opacity）
• 重排： 布局结果或者节点内容变化时，height position float display等，盒子的尺寸，定位，元素之间的关系，或者获取布局信息时发生重排：offsetTop getComputedStyle等时
• 优化方法：
• 对dom进行批量的样式操作，不逐一操作
• 可以先改变position为fixed等，脱离文档流后再操作dom
• 使用transform: translateZ(0) 或者 will-change 将渲染层提升为合成层，开启GPU加速，提升渲染速度
• 使用变量对布局信息进行缓存（clientTop），避免频繁读取布局触发重排重绘