开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第9天，点击查看活动详情

前言

前端开发的页面是与用户直接交互，页面越流畅用户越方便，从代码到最终页面的呈现有很多性能优化的地方，这些都是我们需要了解的，今天来看一下回流与重绘。

回流

回流：当页面元素尺寸、属性、结构等发生变化的时候，浏览器会重新渲染变化的元素。根据定义我们可以想到一些常见的回流操作：

• 浏览器窗口发生变化。
• 首次加载页面。
• 操作dom进行增删。
• 元素的内容、字体大小、位置等发生变化。 因为浏览器渲染页面是基于流式布局的，所以当触发回流时，不会只单单对改变的dom更新，周边的don元素也会受到影响重新排列，这个影响分为两种：
• 全局，导致整个渲染树重新渲染布局。
• 布局，渲染数某个部分进行重新渲染。

重绘

重绘：当页面元素不改变位置的样式发生变化时，浏览器会重新绘制元素。重绘操作就是修改元素的某些的样式：

• 颜色背景：color、background等。
• 轮廓: text-decoration、outline-color等。
• 边框、阴影：border-radius、box-shadow等。 从上面描述可以得出：
• 重绘一定回流，回流不一重绘。
• 这两者如果触发频繁，意味着浏览器渲染频繁。减少两者的触发，就会提升性能。

优化方法

减少回流与重绘是性能优化的一种形式，具体的举措有：

• 避免频繁操作dom，可以利用documentFragment，它不是包含在真实dom里面，相关变化不会触发dom的更新渲染。
• 操作dom时，尽量选择最低层级节点进行改变。
• 使用CSS表达式，class类名等，减少style的使用。
• 对需要改变的dom使用定位absolute、fixed属性，让其脱离文档流。
• 利用display属性，先设置为none，操作结束后再改变属性值将dom显示出来。

总结

以上就是针对回流与重绘的优化方法，性能优化无止境，日常开发中我们需要尽量避免频繁触发回流与重绘。