repaint reflow详解

1. reflow: 回流,即对DOM文档中某些或全部元素的尺寸、结构或者字体大小等属性进行修改时,浏览器重新对这些元素或者全部元素渲染的过程.

触发回流的操作:

  【1】修改元素的尺寸、结构

  【2】修改元素的字体大小等属性

  【3】页面首次加载渲染

  【4】获取offset | client | scroll系列属性

  【5】浏览器窗口大小发生改变【触发resize事件】

  【6】使用JavaScript添加或删除DOM元素

  【7】使用css伪类 如:hover

2. repaint:重绘,即对不涉及尺寸、结构等变化的元素属性修改,浏览器会对其进行重绘.

触发重绘的操作:修改元素的color、background-color、visibility等

  visibility:hidden会保留元素的空间,仅为视觉上的完全透明(看不见、摸得着)【重绘】
  display:none不为被隐藏的对象保留其物理空间(看不见摸不着)【回流】

 

分析:(1) 回流一定会触发重绘,重绘不一定触发回流

(2)回流性能消耗要比重绘更高

(3)如何减少重绘和回流,以提升浏览器渲染性能?

  【1】避免循环获取offset | client | scroll 系列元素,可以考虑使用一个变量缓存其值,之后使用这个变量来进行相应操作.

  <div class="box"></div>
  <style>
    .box {
      width: 200px;
      height: 200px;
      background-color: skyblue;
      margin: 100px auto;
    }
  </style>

JS循环获取效率对比:

  let box = document.querySelector('.box');
  console.time();
  let box_width = box.offsetWidth;
  for(let i=0;i<10000;i++) {
    let a = box.offsetWidth; // 14.59912109375 ms 基本维持在12ms ~ 16ms
    // let a = box_width; // 0.6728515625 ms 基本维持在 0.5ms ~ 1.0ms
  }
  console.timeEnd();

  【2】使用css3硬件加速的操作,比如transform、opacity、filters,尤其是transfrom比较常用

  【3】对于复杂的animation,使用position: absolute | fixed 使其脱离文档流,避免回流重绘.

  【4】多次操作一个元素的属性时,先使用display: none(会导致一次回流),但之后的所有对此元素操作不会导致回流重绘,最后再设置会原来的display模式.

  【5】修改css样式时,避免js代码修改,可以通过直接修改类名设置样式.

上一篇:浅谈重绘和重排(回流)以及如何减少或避免回流


下一篇:回流(reflow)与重绘(repaint)