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代码修改，可以通过直接修改类名设置样式.

标签：box,repaint,浏览器,reflow,元素,修改,详解,回流,重绘
来源： https://www.cnblogs.com/twinkleG/p/15269158.html