Repaint and Reflow

1. repaintrepainting occurs when the appearance of an element is changed but the layout is not changed, such as changing visibility, outline, and foreground. When repaint occurs, the browser verifies the visibility attribute of all other nodes on the DOM tree. 2. If a Reflow change involves an element layout (such as width), the browser discards the original attribute, recalculates the result, and passes the result to the render to re-depict the page element. This process is called reflow. Reflow is one of the key factors that cause inefficient DOM script execution. Any node on the page triggers reflow, which will cause its child nodes and ancestor nodes to be re-rendered. The following operations will cause reflow: change the size of the window, change the text size, and add/Delete the style table content. For example, you can press a word in the input box to activate a pseudo class, for example: hover operation class attribute script operation DOM calculation offsetWidth and offsetHeight setting style attribute Reflow is inevitable. You can only minimize the impact of reflow on performance. The following are some suggestions: limit the impact scope of reflow as much as possible. Sometimes an element on the reflow page will reflow its parent element (: Here is the plural) and all child elements. If you change the node style by setting the style attribute at www.2cto.com, each setting will result in a reflow. So it is best to set the class. To implement an element animation, its position attribute should be set to fixed or absolute, which will not affect the layout of other elements. Balance the speed. For example, when an animation is implemented, it moves in 1 pixel as smooth as possible, but the reflow will be too frequent and the CPU will soon be fully occupied. Moving in 3 pixels will be much better. Another reason not to use tables layout is that once a reflow is triggered by an element in tables, all other elements in the table will be reflow. When using a table, you can set table-layout to auto or fixed to render a row in a table. This is also to limit the impact scope of reflow. In many cases, reflow is triggered. If expression exists in css, it is re-calculated every time. Avoid frequent DOM operations on the document. If necessary, you can use the off-document method to delete the elements from the document first, after the modification, place the element back to the original position and set the display of the element to "none". After the modification, change the display to the original value. If you need to create multiple DOM nodes, you can use DocumentFragment to add it once after creation.