2020搜狗蜘蛛池！2020搜狗蜘蛛新發现

减少重排與重绘的实战策略

〖Two〗浏览器渲染流水線中，重排（Reflow）和重绘（Repaint）是影响交互流畅度的两大元凶。重排涉及元素几何属性（宽度、高度、位置等）的改变，會触發後续元素的重新计算與布局，而重绘则只改变颜色、背景等不影响布局的属性。最直接的优化手段是尽量使用触發合成（Compositing）而非重排或重绘的属性。例如，使用 `transform: translateX()` 代替 `left` 來移动元素，使用 `opacity` 代替 `visibility: hidden` 或 `display: none` 进行显隐——前者仅触發合成层更新，無需重新布局或绘制。针对动画处理，务必在 CSS 动画中使用 `transform` 和 `opacity`，并设置 `will-change` 属性告知浏览器提前创建独立图层（如 `will-change: transform`），但注意不要滥用此属性，否则會占用过多 GPU 内存。批量修改 DOM 時，应避免在循环中反复讀寫布局信息（如 `element.offsetHeight`），因為每次讀取都會强制浏览器同步计算最新的布局（称為强制回流）。正确的做法是：先讀取所有需要的值并缓存，再统一修改样式；或者使用 `documentFragment` 在内存中构建新节點，一次性附加到 DOM；或者将元素设置為 `display: none`，修改样式後再恢复显示——這样只触發一次重排。另外，避免使用表格布局，因為其内部元素的重排往往牵涉整张表；尽量使用 Flexbox 或 Grid 代替 float，因為 float 布局在某些场景下會引發额外的回流；利用 `contain` 属性（如 `contain: layout`）将元素从布局流中隔离，让浏览器知晓该元素内部的更改不會影响外部。对于需要频繁获取滚动位置或鼠标坐标的场景，可以使用 `requestAnimationFrame` 进行节流，避免在每一帧内多次强制布局。這些细粒度的控制，頁面在滚动和动画時的帧率能稳定维持在 60fps，用戶體驗自然得到质的提升。