乐趣区

关于前端:什么是重排如何减少重排

什么是重排?

重排: 当渲染树的一部分必须更新并且节点的尺寸产生了变动,浏览器会使渲染树中受到影响的局部生效,并从新结构渲染树。

什么时候会产生

重排(又叫回流)
  这一阶段次要是计算节点的地位和几何信息,当页面布局和几何信息发生变化时,就须要重排。
  引起重排的几种状况:

页面初始化的时候
DOM 构造数的变动:增加或者删除可见的 DOM 元素
DOM 元素的几何属性发生变化:外边距、内边距、边框厚度、宽低等
内容发生变化:文本的减少或缩小、更换不同尺寸的图片
浏览器窗口尺寸扭转 (重排是依据视口的大小来计算元素的地位和大小的)
窗口属性的获取和尺寸扭转:offsetTop、offsetLeft、offsetWidth、offsetHeight、scrollTop、scrollLeft、scrollWidth、scrollHeight、clientTop、clientLeft、clientWidth、clientHeight、getComputedStyle()

一些罕用的缩小重排办法:

1. 应用类名批量批改款式:将要进行款式更改的元素增加 / 删除 CSS 类,而不是间接操作款式属性,能够将多个更改合并到一次重排和重绘中。

2. 应用文档片段:如果须要频繁地向页面中增加大量 DOM 节点,能够先将他们增加到文档片段中,最初再对立插入文档中,这样能够缩小回流的次数。

3. 防止频繁查问布局信息:在 JavaScript 中防止频繁查问布局信息,如‘offsetWidth’ 和’offsetHeight

4. 应用 CSS Grid 和 Flex 布局:应用 Grid 和 Flex 布局能够缩小对元素地位的频繁调整,从而缩小重排

5. 应用 CSS 动画和过渡:在须要实现动画成果时,应用 CSS 动画和过渡,而不是 JavaScript 来操作元素款式。

6. 应用 GPU 减速晋升网站的动画渲染性能:transform:translateZ(0); 或 transform:translate3d(0,0,0)

退出移动版