- 如何提升页面渲染性能？
- 那些行为会引起重绘/重排？
- 如何减少页面的重绘/重排？
- 浏览器渲染进程，分为四个部分，解析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），避免频繁读取布局触发重排重绘
