完整高频题库仓库地址：github.com/hzfe/awesom…
完整高频题库阅读地址：hzfe.github.io/awesome-int…
相关问题
- 如何提升页面渲染性能
- 如何减少页面重排重绘
- 哪些行为会引起重排/重绘
回答关键点
渲染性能 Layout Paint
浏览器渲染大致分为四个阶段，其中在解析 HTML 后，会依次进入 Layout 和 Paint 阶段。样式或节点的更改，以及对布局信息的访问等，都有可能导致重排和重绘。而重排和重绘的过程在主线程中进行，这意味着不合理的重排重绘会导致渲染卡顿，用户交互滞后等性能问题。
知识点深入
1. 什么是重排重绘
Layout（布局）
指浏览器计算各元素的几何信息，确定元素的大小以及在页面中的位置等信息的过程。
Paint（绘制/栅格化）
指将渲染树中的每个节点转换成屏幕上的实际像素的过程。
浏览器从获取文档、样式、脚本等内容，到最终渲染结果到屏幕上，需要经过如图所示的步骤。而 DOM 或 CSSOM 被修改，会导致浏览器重复执行图中的步骤。重排和重绘，本质上指的就是分别重新触发 Layout 和 Paint 的过程，且重排必定导致重绘。
引起重排/重绘的常见操作
-
外观有变化时，会导致重绘。相关的样式属性如
coloropacity等。 -
布局结构或节点内容变化时，会导致重排。相关的样式属性如
heightfloatposition等。
- 盒子尺寸和类型。
- 定位方案（正常流、浮动和绝对定位）。
- 文档树中元素之间的关系。
- 外部信息（如视口大小等）。
- 获取布局信息时，会导致重排。相关的方法属性如
offsetTopgetComputedStyle等。
2. 如何减少重排重绘
意义
大多数显示器的刷新率是 60FPS（frames per second）。理想情况下，浏览器需要在 1/60 秒内完成渲染阶段并交付一帧。这样用户就会看到一个交互流畅的页面。
在交互阶段，页面更新（一般是通过执行 JavaScript 来触发）通常会触发重排和重绘。为了提升浏览器渲染效率，应当尽可能减少重绘重排，降低浏览器渲染耗费的时间，尽快将内容渲染到屏幕上。
解决方案
- 对 DOM 进行批量写入和读取（通过虚拟 DOM 或者 DocumentFragment 实现）。
- 避免对样式频繁操作，了解常用样式属性触发 Layout / Paint / Composite 的机制，合理使用样式。
- 合理利用特殊样式属性（如 transform: translateZ(0) 或者 will-change），将渲染层提升为合成层，开启 GPU 加速，提高页面性能。
- 按需缓存布局信息，避免频繁读取。
另外，可以借助 DevTools Performance 面板来查看产生重排重绘任务占用主线程的情况和调用代码。
