重排和重绘

2024-03-01 00:00:00 javascript 重排

页面生成的过程：

1、将html标签构造解析成一棵DOM树

2、于此同时，将css代码解析成CSSOM款式规定

3、将DOM树和款式规定，合二为一，组成一棵渲染树

4、将渲染树生成一个布局：具体点，就是依据渲染树，计算每个标签的大小、地位、标签和标签之间的关系。。。

5、依据渲染树进行喷绘：相当于给标签上色

6、让喷绘好的图显示在浏览器的画布中

渲染：

在页面的生命周期中，网页生成的时候，至多会渲染一次。在用户拜访的过程中，还会一直触发重排(reflow)和重绘(repaint)，不论页面产生了重绘还是重排，都会影响性能，最可怕的是重排，会使咱们付出高额的性能代价，所以咱们应尽量避免。

重排比重绘大：

  • 重绘：某些元素的外观被扭转，例如：元素的填充色彩
  • 重排：从新生成布局，重新排列元素。

就如下面的概念一样，单单扭转元素的外观，必定不会引起网页从新生成布局，但当浏览器实现重排之后，将会从新绘制受到此次重排影响的局部。比方扭转元素高度，这个元素乃至周边dom都须要从新绘制。

也就是说： 重绘不肯定导致重排，但重排肯定会导致重绘。

重排(reflow)：

概念：

当DOM的变动影响了元素的几何信息(元素的的地位和尺寸大小)，浏览器须要从新计算元素的几何属性，将其安放在界面中的正确地位，这个过程叫做重排。

重排也叫回流，简略的说就是从新生成布局，重新排列元素。

上面状况会产生重排：

  • 页面初始渲染，这是开销最大的一次重排
  • 增加/删除可见的DOM元素
  • 扭转元素地位
  • 扭转元素尺寸，比方边距、填充、边框、宽度和高度等
  • 扭转元素内容，比方文字数量，图片大小等
  • 扭转元素字体大小
  • 扭转浏览器窗口尺寸，比方resize事件产生时
  • 激活CSS伪类（例如：:hover）
  • 设置 style 属性的值，因为通过设置style属性扭转结点款式的话，每一次设置都会触发一次reflow

  • 查问某些属性或调用某些计算方法：offsetWidth、offsetHeight等，除此之外，当咱们调用 getComputedStyle办法，或者IE里的 currentStyle 时，也会触发重排，原理是一样的，都为求一个“即时性”和“准确性”。

    重排影响的范畴：

    因为浏览器渲染界面是基于散失布局模型的，所以触发重排时会对四周DOM重新排列，影响的范畴有两种：

  • 全局范畴：从根节点html开始对整个渲染树进行从新布局。
  • 部分范畴：对渲染树的某局部或某一个渲染对象进行从新布局

全局范畴重排：


  

    
hello

    
Name:BDing

    
male

    
    
      
  1. coding
    2. 
      
  2. loving
    3.

当p节点上产生reflow时，hello和body也会从新渲染，甚至h5和ol都会收到影响。

部分范畴重排：

用部分布局来解释这种景象：把一个dom的宽高之类的几何信息定死，而后在dom外部触发重排，就只会从新渲染该dom外部的元素，而不会影响到外界。

重排优化倡议：

重排的代价是昂扬的，会毁坏用户体验，并且让UI展现十分缓慢。通过缩小重排的负面影响来进步用户体验的最简略形式就是尽可能的缩小重排次数，重排范畴。上面是一些卓有成效的倡议，大家能够用来参考。

缩小重排范畴:

咱们应该尽量以部分布局的模式组织html构造，尽可能小的影响重排的范畴。

  • 尽可能在低层级的DOM节点上，而不是像上述全局范畴的示例代码一样，如果你要扭转p的款式，class就不要加在div上，通过父元素去影响子元素不好。
  • 不要应用 table 布局，可能很小的一个小改变会造成整个 table 的从新布局。那么在不得已应用table的场合，能够设置table-layout:auto;或者是table-layout:fixed这样能够让table一行一行的渲染，这种做法也是为了限度reflow的影响范畴。

缩小重排次数

  1. 款式集中扭转
    不要频繁的操作款式，对于一个动态页面来说，理智且可保护的做法是更改类名而不是批改款式，对于动静扭转的款式来说，相较每次渺小批改都间接涉及元素，更好的方法是对立在 cssText 变量中编辑。尽管当初大部分古代浏览器都会有 Flush 队列进行渲染队列优化，然而有些老版本的浏览器比方IE6的效率仍然低下。

    // bad
var left = 10;
var top = 10;
el.style.left = left + "px";
el.style.top = top + "px";

// 当top和left的值是动静计算而成时...
// better 
el.style.cssText += "; left: " + left + "px; top: " + top + "px;";

// better
el.className += " className";

  2. 拆散读写操作
    DOM 的多个读操作（或多个写操作），应该放在一起。不要两个读操作之间，退出一个写操作。

    // bad 强制刷新 触发四次重排+重绘
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
div.style.right = div.offsetRight + 1 + 'px';
div.style.bottom = div.offsetBottom + 1 + 'px';


// good 缓存布局信息 相当于读写拆散 触发一次重排+重绘
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
var curRight = div.offsetRight;
var curBottom = div.offsetBottom;

div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';
div.style.right = curRight + 1 + 'px';
div.style.bottom = curBottom + 1 + 'px';

    原来的操作会导致四次重排，读写拆散之后实际上只触发了一次重排，这都得益于浏览器的渲染队列机制：

当咱们批改了元素的几何属性，导致浏览器触发重排或重绘时。它会把该操作放进渲染队列，等到队列中的操作到了肯定的数量或者到了肯定的工夫距离时，浏览器就会批量执行这些操作。
“离线”意味着不在以后的 DOM 树中做批改，咱们能够这样做：

  1. 将 DOM 离线
  • 应用 display:none 一旦咱们给元素设置 display:none 时（只有一次重排重绘），元素便不会再存在在渲染树中，相当于将其从页面上“拿掉”，咱们之后的操作将不会触发重排和重绘，增加足够多的变更后，通过 display属性显示（另一次重排重绘）。通过这种形式即便大量变更也只触发两次重排。另外，visibility : hidden 的元素只对重绘有影响，不影响重排。
  • 通过 documentFragment 创立一个 dom 碎片,在它下面批量操作 dom，操作实现之后，再增加到文档中，这样只会触发一次重排。
  • 复制节点，在正本上工作，而后替换它！
  1. 应用 absolute 或 fixed 脱离文档流
    应用相对定位会使的该元素独自成为渲染树中 body 的一个子元素，重排开销比拟小，不会对其它节点造成太多影响。当你在这些节点上搁置这个元素时，一些其它在这个区域内的节点可能须要重绘，然而不须要重排。
  2. 优化动画
  3. 能够把动画成果利用到 position属性为 absolute 或 fixed 的元素上，这样对其余元素影响较小。
    动画成果还应就义一些平滑，来换取速度，这两头的度本人掂量：
    比方实现一个动画，以1个像素为单位挪动这样最平滑，然而Layout就会过于频繁，大量耗费CPU资源，如果以3个像素为单位挪动则会好很多

  • 启用GPU减速
    GPU 硬件加速是指利用 GPU 的图形性能对浏览器中的一些图形操作交给 GPU 来实现，因为 GPU 是专门为解决图形而设计，所以它在速度和能耗上更有效率。
    GPU 减速通常包含以下几个局部：Canvas2D，布局合成, CSS3转换（transitions），CSS3 3D变换（transforms），WebGL和视频(video)。

    重绘(Repaints):

概念：

当一个元素的外观产生扭转，但没有扭转布局,从新把元素外观绘制进去的过程，叫做重绘。

相关文章