在看今天的分享之前,希望大家先关注一下,因为你可以免费获取一枚前端路上的陪跑师。
什么是回流
回流:英文是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,这样此元素就脱离了文档流,它的变化不会影响到其他元素