css repaint and reflow

A redraw does not necessarily cause a reflow, and a reflow does cause a redraw.

redraw

When some properties of an element change without affecting its position in the document flow (that is, it will not cause layout changes), the browser will assign a new style to the element and redraw it. This process is called redrawing.

Common attributes that cause redrawing are:

color                 background                 outline
border-style          background-image           outline-color
border-radius         background-size            outline-style
visibility            background-repeat          outline-width
text-decoration       background-position        box-shadow

reflow

When some or all elements in the render tree require the browser to recalculate the position and size due to changes in size, layout, hiding, etc., this process is called reflow.

Common operations that cause reflux:

页面初次渲染
浏览器窗口大小发生改变
元素尺寸或位置发生改变
元素字体大小变化
元素内容发生变化(文字数量或图片大小改变等, 如: 用户在input中输入内容)
添加或者删除可见的DOM元素
操作class属性
设置style属性
激活伪类(如：:hover)
查询某些属性或调用某些方法

Common attributes that cause reflow:

width            position      overflow
height           float         overflow-y
min-height       left          font-weight
margin           right         font-family
padding          top           white-space
border           bottom        text-align
border-width     clear         vertival-align
display          line-height    

Common properties and methods in js that cause reflow:

clientWidth、clientHeight、clientTop、clientLeft
offsetWidth、offsetHeight、offsetTop、offsetLeft
scrollWidth、scrollHeight、scrollTop、scrollLeft
scrollIntoView()
scrollIntoViewIfNeeded()
getComputedStyle()
getBoundingClientRect()
scrollTo()

Ways to reduce page redraws and reflows:

css：

1. Try to use the abbreviation of css attributes: such as: use boder instead of boder-width, boder-style, boder-color;

2. Try to avoid using table layout, because a small change may cause the entire table to be re-layouted;

3. Avoid setting multiple layers of inline styles;

4. Change the class at the end of the DOM tree as much as possible to reduce the scope of reflow;

5. Apply the animation effect to the element whose position attribute is absolute or fixed, and make it out of the document flow, which is equivalent to creating a new document object. The new document object triggers the reflow, otherwise it will cause frequent reflow of the parent element and subsequent elements ;

6. Avoid using CSS expressions (for example: calc()), because each call will recalculate and load the page;

7. Create a new layer for the animation element and increase the z-index of the animation element;

8. Opacity is used with layers, neither triggering rearrangement nor redrawing;

js：

1. To avoid frequent manipulation of styles, it is best to rewrite the style attribute at one time. Or you can define the class of css first, and then modify the className of DOM;

2. To avoid frequently manipulating the DOM, you can use document fragments to put all the added content in the container, and then add it to the page, so that only one reflow and reconstruction will be triggered.

let fragment=document.createDocumentFragment();
fragment.appendChild(DOM对象);
document.body.appendChild(fragment);

3. You can set display: none for the element first, and then display it after the operation is completed. Because DOM operations on elements whose display attribute is none will not cause reflow and redrawing;

el.style.display = 'none';
...一些对el的操作
el.style.display = 'block';

4. You can let the element out of the document flow first, and then put it back after the operation;

el.style.position='absoulte';
...一些对el的操作
el.style.position='static'

5. If you want to use (el.style.) to set multiple attributes on an element, you can use (el.style.cssText='...') to merge into one;

6. Avoid frequently reading properties that will cause reflow/redrawing. If you really need to use it multiple times, you can use a variable to cache it;

7. The node to be operated can be cloned, and the cloned node can be replaced after the operation is completed;

const ul = document.getElementById('test');
const clone = ul.cloneNode(true);
...对clone的一些操作
ul.parentNode.replaceChild(clone, ul);