1. What is the rearrangement and redraw?
Rearrangements: If the render tree part of the update, and dimensional change , the rearrangement occurs.
Redraw: some of the nodes need to be updated, but does not change the set of other shapes . Such as changing vidibility, outline, background color of an element, etc., will redraw happen.
PS: Redraw not necessarily lead to rearrangements, but the rearrangement will result in redrawn. Rearrangement will produce a greater proportion of the cost of painting.
2. When rearrangement and redraw will happen?
Trigger rearrangement:
(1) The first page rendering: the first occurred when the page is rendered, the layout of all the components should be carried out for the first time, this is the most expensive of a rearrangement
(2) changes in the size of the browser window
(3) When the element position and size (width, height, inner and outer margins, borders, etc.) is changed
(4) add or delete DOM node
(5) changes the content (text or picture size number, etc.)
(6) elements font size change
(7) activation CSS pseudo-class :hover(example: )
(8) add or modify a style, the style attribute settings
(9) the query or call some certain properties, such as: call getComputedStylemethod, or IE, the currentStyletime will trigger rearrangement
(10) display: none (rearrangement and redraw)
Trigger redraw:
（1）vidibility
（2）outline
(3) the background color: color, background-color
（4）visibility:hidden（重排）
3. How to reduce rearrangement and redrawn to improve page performance?
(1) focus on style change: Do not modify the properties one by one, should be modified by a class.
错误写法：div.style.width="50px";div.style.top="60px";
正确写法：div.className+="modify";(2) DOM of Offline: Once we set to the element display:none, the element is not present in the render tree, which is equivalent to a page from the "removed" after the operation we will not trigger the rearrangement and redrawn, this is called DOM offline technology.
dom.display = 'none'
// 修改dom样式
dom.display = 'block'(3) bulk add DOM: by using DocumentFragment create a DOM fragment, batch operations on top of it DOM, after the operation is completed, adding it to the document, this will only trigger a rearrangement. InnerHTML is always faster than using DOM manipulation. (Special attention: innerHTML not execution of scripts embedded in the string, it does not produce XSS vulnerabilities).
(4) replicate site modification in the copy, and then replace the current node directly.
(5) reduce the affected nodes: the insertion node at the top of the page will affect all the subsequent nodes, and less change will affect the elements absolutely positioned elements, the positionproperty to absoluteorfixed。
(6) separating the read and write operations.
div.style.top = "10px";
div.style.bottom = "10px";
div.style.right = "10px";
div.style.left = "10px";
console.log(div.offsetWidth);
console.log(div.offseHeight);
console.log(div.offsetRight);
console.log(div.offsetLeft);The original action causes the rearrangement of four and four redrawn after the conversion order will trigger a rearrangement in the first consoletime, the browser render queue before the top four write operations gave emptied. Because the render queue always been empty, so the rest consoledid not trigger the rearrangement, just to get the value of it.
(7) cache layout information.
// bad 强制刷新 触发两次重排
div.style.left = div.offsetLeft + 1 + 'px';
div.style.top = div.offsetTop + 1 + 'px';
// good 缓存布局信息 相当于读写分离
var curLeft = div.offsetLeft;
var curTop = div.offsetTop;
div.style.left = curLeft + 1 + 'px';
div.style.top = curTop + 1 + 'px';(8) using css spirit, also called css wizard, it will put all the pictures on a picture, and then be implemented using a picture by positioning.
reference:
Redraw rearranged heavy rendering
END