面试高频题：什么是回流和重绘？如何减少？

什么是回流和重绘如何减少回流Reflow也叫重排当页面布局发生变化例如 DOM 元素的尺寸、结构或某些属性发生改变导致浏览器需要重新计算元素在页面中的几何位置和大小这个过程就叫做回流。触发操作页面首次渲染不可避免添加、删除可见的 DOM 节点例如设置display: none元素尺寸/位置发生变化修改width, height, margin, padding, border, top, left, font-size等属性。隐式触发浏览器为了性能通常会把 DOM 修改放在一个队列里一次性执行而读取某些属性或调用某些方法时为了返回最新的值会立即清空队列并执行一次回流这叫做强制同步布局或布局抖动例如offsetTop/Left/Width/Height、scrollTop/Left/Width/Height、调用getComputedStyle。重绘Repaint当 DOM 元素的外观属性发生变化但是不影响在页面的布局和大小时浏览器只需要把样式部分重新绘制到屏幕上这就叫做重绘。触发操作修改外观属性color, background, background-color, visibility: hidden, box-shadow, border-radius, outline等。如何减少回流/重绘CSS 层面使用transform和opacity实现动画效果因为这两个属性的修改不会触发回流重绘而是直接交给 GPU 处理。将动画效果应用到position: absolute或fixed的元素上让脱离文档流的元素回流减少影响。用visibility: hidden替代display: none。合并样式修改使用className一次性修改而不是多次修改element.style.xxx。JavaScript 层面减少 DOM 修改的次数用DocumentFragment就像是一个游离在真实 DOM 树之外的内存虚拟空间在这里面增删改查节点不会触发回流和重绘最后再把这个容器插入真实 DOM 树中浏览器只会将它的子元素进行渲染而不会把容器节点本身加进去。用requestAnimationFrame在时间维度上利用分治法和时间切片配合DocumentFragment将庞大的渲染任务切割到浏览器的每个渲染帧间隙中。拼接字符串 innerHTML直接在 JS 里写let html li1/lili2/li...; container.innerHTML html;没有调用 JS DOM API而是调用 HTML 解析器生成对应的 DOM 树结构。善用防抖和节流使用防抖或节流函数绑定高频触发的事件。利用硬件加速GPU给元素添加will-change: transform告诉浏览器该元素即将进行动画浏览器会预先创建一个合成层。动画与渲染优化使用requestAnimationFrame (rAF)它能保证 JS 执行在浏览器下一次重绘之前防止掉帧比setTimeout实现动画更平滑。避免使用表格布局TableTable 布局中哪怕是很小的一个变化都会导致整个 Table 的重新布局回流开销极大。本文为个人笔记存档如有错误欢迎指出~O(∩_∩)O