1.DOM redraw and return Repaint & Reflow
1.1 redraw: element style changes (but the width and height, the size, position, etc. unchanged)
如outline、visibility、color、background-color等
1.2 Return: the size or position of an element is changed (when the page layout and geometry changes), triggering the re-layout, leading to re-render tree design layout and rendering.
Such as adding or deleting visible DOM element; a change in position of the element, the element size changes, content changes (such as text or change the size of the picture is replaced by another different picture); a start page rendering time (which is can not be avoided); reflux is calculated as the position and size of the element according to the size of the viewport, the browser window size variations also cause reflux.
Note reflux will trigger the redraw, redraw will not necessarily reflux.
2. The front-end performance optimization: DOM avoid reflux
2.1 abandoning the traditional operating DOM, affect the view mode based on the start data vue react /
Or the like can react vue frame virtual dom / dom diff, to avoid the direct manipulation of the DOM.
2.2 Separation read and write operations (modern browsers have mechanisms queue rendering)
style style
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
border: 1px solid yellow;
}
</style>body of code
<body>
<div id="box"></div>
<script>
//(1)
let box = document.getElementById('box');
box.style.width = '200px'; //大小发生变化，引发一次回流
box.style.height = '200px';
box.style.margin = '10px';
//因为浏览器存在渲染队列机制，如果引发回流的语句挨在一起写，只会引发一次回流
//(2)
box.style.height = '300px';
console.log(box.clientWidth); //不引发回流
box.style.margin = '20px';
//中间插入非引发回流语句，打断了任务队列，所以总共回流2次
//(3)
box.style.height = '300px';
box.style.margin = '30px';
console.log(box.clientWidth); //只引发一次DOM回流
/*分离读写:就是把能引发回流的"写语句"与不能引发回流的"读语句"分开写，以减少回流次数*/
</script>
</body>2.3 centralized style change
style style
<style>
#box {
width: 100px;
height: 100px;
background-color: red;
border: 1px solid yellow;
}
.a {
width: 200px;
}
</style>body of code
<body>
<div id="box"></div>
<script>
let box = document.getElementById('box');
/*批量处理：把元素的多个样式统一修改减少DOM的回流*/
//(1)直接添加多种样式
// box.style.cssText = 'width:200pxl;height:200px;';
//(2)通过添加类名添加多种样式
box.className = 'a';
</script>
</body>2.4 cached layout information
body of code
<body>
<script>
let box = document.getElementById('box');
//缓存处理(实质上属于分离读写)
//(1)
box.style.width = box.clientWidth + 10 + 'px';
box.style.height = box.clientHeight + 10 + 'px';
//由于box.clientWidth获取操作，终端了任务队列，上面语句触发两次DOM回流
//(2)
let a = box.clientWidth;
let b = box.clientHeight;
box.style.width = a + 10 + 'px';
box.style.height = b + 10 + 'px';
//先使用一个变量存储获取的数据，再进行写操作，就不会中断任务队列，只触发一次DOM回流。
</script>
</body>2.5 Bulk edit elements
body of code
<body>
<ul id="box">
</ul>
<script>
//批量处理：在ul中动态创建5个li
var box = document.querySelector('#box');
//(1)
for (let i = 0; i < 5; i++) {
let newLi = document.createElement('li');
newLi.innerHTML = i;
box.appendChild(newLi);
}
//这种写法循环几次便会引发几次回流不可取
//(2) 文档碎片
let frg = document.createDocumentFragment(); //创建一个文档碎片的临时容器
for (let i = 0; i < 5; i++) {
let newLi = document.createElement('li');
newLi.innerHTML = i;
//创建的li先储存在文档碎片中
frg.appendChild(newLi);
}
box.appendChild(frg);
frg = null; //对于不用的容器，要进行销毁释放
//相当于把文档碎片frg中的对象一次性添加到box中只引发一次文档回流。可取
//(3)模板字符串拼接 (最优)
let str = ``;
for (let i = 0; i < 5; i++) {
str += `<li>${i}</li>`;
}
box.innerHTML = str; //只引发一次回流
//运用ES6的模板字符串，添加标签十分方便，并且能够有效减少文档回流，为最优方法。
</script>
</body>2.6 animation should use the position property to absolute or fixed (from the document flow)
If you are using margin and other property to position elements, other elements of the position will affect and cause reflux. Positioning using the position property of the document flow element can be detached, the operation on a new plane, although reflux can cause, but does not affect other elements, and better performance.
2.7CSS3 hardware acceleration (GPU acceleration)
Compared to consider how to reduce reflux, redraw, we expect that, do not need to reflow and redraw; transform, opacity, filters ... these attributes will trigger hardware acceleration, will not lead to reflux and redrawn.
Typically use more of a transform (change of style can transform absolutely not normal style). With properties such as to translate movement of the element does not cause reflux.
Disadvantages: with multiple lead to memory intensive and serious performance overhead.
2.8 sacrificing smoothness for speed
Is simply the case where the total movement animation 100px, each second mobile 1px, high smoothness, but cause reflow 100; 10px move every second, relatively poor smoothness, but it would lead to reflux for 10 . Preferably the computer when the former is faster, slower computer should take the latter.
2.9 Avoid using table layout
As the table layout to layers of nesting, finished adding the underlying style, began to style out layer by layer, not only good writing style, and not conducive to optimizing the performance of the DOM.