在看今天的分享之前，希望大家先关注一下，因为你可以免费获取一枚前端路上的陪跑师。
什么是回流
回流：英文是reflow
当render tree中的一部分(或全部)，因为元素的规模尺寸、布局、隐藏等改变 而需要重新构建，这就是回流(reflow)
特点：
（1）每个页面至少回流一次，即页面首次加载
（2）回流时，浏览器会使渲染树中受到影响的部分失效，并重新构造这部分渲染树
（3）回流完成后，浏览器会重新绘制受影响的部分，是重绘过程
什么是重绘
重绘：英文是repaints
当render tree中的一些元素需要更新属性，而这些属性只是影响元素的外 观、风格，而不影响布局(例如：background-color)，则称为重绘(repaints)
特点：回流必将引起重绘，重绘不一定引起回流 回流比重绘的代价更高
何时会回流
当页面布局和几何属性改变时就需要回流
下述情况会发生浏览器回流：
（1）添加或者删除可见的DOM元素；
（2）元素位置改变；
（3）元素尺寸改变——边距、填充、边框、宽度和高度
（4）内容改变——比如文本改变或者图片大小改变而引起的计算值宽度和高度改变；
（5）页面渲染初始化；
（6）浏览器窗口尺寸改变——resize事件发生时；
使用浏览器演示一下
何时会重绘
元素的属性或者样式发生变化。
比如：文本的颜色，元素的背景变化
性能优化具体方案：
（1）使用DocumentFragment让要操作的元素“离线”，处理完后一起更新
html：
<body>
<ul id="list"></ul>
<ul id="list1"></ul>
</body>
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，这样此元素就脱离了文档流，它的变化不会影响到其他元素
349
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
