回流是DOM几何尺寸改变导致浏览器重新计算布局，而重绘仅改变元素样式不涉及尺寸。两者都会消耗性能，特别是回流可能引发重绘。避免策略包括缓存属性值、合并样式设置、离线化DOM操作、脱离标准流和减少内联样式。浏览器通过flush队列策略合并回流与重绘任务，但特定属性值的即时获取不会延迟执行。
一、什么是回流和重绘
回流：对DOM元素的修改涉及到了DOM几何尺寸的改变，浏览器需要重新计算元素的几何属性
重绘：对DOM元素的修改仅仅改变了DOM的颜色等属性，没有涉及几何尺寸的改变，直接重新计算元素的样式
回流一定会引起重绘，但是重绘不一定引起回流。不可否认的是回流和重绘都非常消耗性能，所以我们要尽可能避免。但是在页面初次加载的时候一定会引起回流和重绘，这也是开销最大的一次回流与重绘。
二、如何避免
2.1 哪些会产生
避免回流与重绘，我们得先明白有哪些操作能引起它们，才能更好的避免
1、直接获取元素的width、length、border等几何属性值肯定会引起回流
2、在JS中对于一些特定属性值的获取是一定会引起回流的，如：
offsetTop、offsetLeft、 offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight
3、调用getComputedStyle()方法
2.2 如何去避免
1、针对一些特定属性值的多次获取，先利用JS缓存起来，避免多次获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta chars
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
