[11]重绘与回流

在看今天的分享之前，希望大家先关注一下，因为你可以免费获取一枚前端路上的陪跑师。

什么是回流

回流：英文是reflow

当render tree中的一部分(或全部)，因为元素的规模尺寸、布局、隐藏等改变 而需要重新构建，这就是回流(reflow)

特点：

（1）每个页面至少回流一次，即页面首次加载

（2）回流时，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树

（3）回流完成后，浏览器会重新绘制受影响的部分，是重绘过程

什么是重绘

重绘：英文是repaints

当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外 观、风格，而不影响布局(例如：background-color)，则称为重绘(repaints)

特点：回流必将引起重绘，重绘不一定引起回流 回流比重绘的代价更高

何时会回流

当页面布局和几何属性改变时就需要回流

下述情况会发生浏览器回流：

（1）添加或者删除可见的DOM元素；

（2）元素位置改变；

（3）元素尺寸改变——边距、填充、边框、宽度和高度

（4）内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；

（5）页面渲染初始化；

（6）浏览器窗口尺寸改变——resize事件发生时；

使用浏览器演示一下

 

何时会重绘

元素的属性或者样式发生变化。

比如：文本的颜色，元素的背景变化

性能优化具体方案：

（1）使用DocumentFragment让要操作的元素“离线”，处理完后一起更新

html：

   

   

   

   

js: //使用documentFragment添加节点

console.time("time")

let list = document.querySelector("#list"),    

fragment = document.createDocumentFragment(),    

n = 50000;

while(n--){  

    fragment.appendChild(document.createElement("li"));

};

list.appendChild(fragment);

console.timeEnd("time")

//直接操作DOM添加节点

console.time("time1")

let list1 = document.querySelector("#list1"),    

i = 50000; while(i--){   list1.appendChild(document.createElement("li")) };

console.timeEnd("time1")

（2）直接改变className，如果动态改变样式，则使用cssText

//多次更新

elem.style.left = x + "px";

elem.style.top = y + "px";

//一次更新

elem.style.cssText += ";left: " + x + "px;top: " + y + "px;";

（3）对于触发浏览器强制回流的属性，要缓存

（1）offsetTop, offsetLeft, offsetWidth, offsetHeight

（2） scrollTop/Left/Width/Height

（3）clientTop/Left/Width/Height

（4）width,height

（5）请求了getComputedStyle(）

当你请求上面的一些属性的时候，浏览器为了给你最精确的值，会进行回流和重绘

//获取box1元素节点对象

var box1=document.getElementById("box1");

//这里调用getComputedStyle来获取left的值

var left=getComputedStyle(box1,null)["left"];

 

（4）将需要多次重排的元素，position属性设为absolute或fixed，这样此元素就脱离了文档流，它的变化不会影响到其他元素