DOM Operations Optimization
First clarifies two concepts--repaint and Reflow:repaint also called redraw, which refers to a redrawing action that does not affect the structure and layout of the current DOM. The following action produces a Repaint action:
not visible (visibility style properties);
Color or picture changes (background, border-color, color style properties);
Do not change the page element size, shape, and position, but change its appearance
Reflow is a much more significant change than Repaint. It mainly occurs when the DOM tree is manipulated, and any change in the structure and layout of the DOM will result in reflow. However, when an element's reflow operation occurs, all its parent elements and child elements will be released Reflow, and finally reflow will inevitably lead to Repaint generation. For example, the following action produces a reflow action:
browser window changes;
Add Delete operations for DOM nodes
Some of the actions that change the size, shape, and position of the page element are triggered by the introduction of Reflow and Repaint, each reflow more resource consumption than its Repaint, so we should minimize Reflo W, or turn it into code that triggers only the Repaint operation.
The code is as follows |
Copy Code |
var tipbox = document.createelement (' div '); Document.body.appendChild (' Tipbox ');//reflow var tip1 = document.createelement (' div '); var tip2 = document.createelement (' div '); Tipbox.appendchild (TIP1);//reflow Tipbox.appendchild (TIP2);//reflow
|
such as the code above, will produce three times reflow, the optimized code is as follows:
The code is as follows |
Copy Code |
var tipbox = document.createelement (' div '); Tip1 = document.createelement (' div '); TIP2 = document.createelement (' div '); Tipbox.appendchild (TIP1); Tipbox.appendchild (TIP2); Document.body.appendChild (' Tipbox ');//reflow
|
You can also use display to reduce the number of reflow.
The code is as follows |
Copy Code |
var tipbox = document.getElementById (' Tipbox '); TipBox.style.display = ' None ';//reflow Tipbox.appendchild (TIP1); Tipbox.appendchild (TIP2); Tipbox.appendchild (TIP3); Tipbox.appendchild (TIP4); Tipbox.appendchild (TIP5); TipBox.style.width = 120; TipBox.style.height = 60; TipBox.style.display = ' block ';//reflow
|
DOM element measurement properties and methods also trigger Reflow, as follows:
The code is as follows |
Copy Code |
var tipwidth = Tipbox.offsetwidth;//reflow Tipscrollleft = Tipbox.scrollleft;//reflow display = window.getComputedStyle (Div, '). GetPropertyValue (' Display ');//reflow
|
The properties and methods that trigger reflow probably have these:
The code is as follows |
Copy Code |
Offsetleft offsettop Offsetheight Offsetwidth Scrolltop/left/width/height Clienttop/left/width/height getComputedStyle () Currentstyle (in IE))
|
We can cache the value of "offsetwidth" with a temporary variable so that we don't have to access the "offsetwidth" property every time. This approach works well in loops and can greatly improve performance.
If there are batch style properties need to be modified, it is recommended to replace the classname to reduce the number of reflow, there was a scene: There are three intput, corresponding to the following three pictures and three content area, the second input selected, the second picture shows that the other pictures hidden , the second piece shows that the other content is hidden, and the code that directly operates the DOM node is as follows
The code is as follows |
Copy Code |
var input = []; pics = []; contents = []; ...... Inputframe.onclick =function (e) { var _e,_target; _e = e? Window.event:null; if (!_e) { Return }else{ _target = _e.srcelement | | _e.target; _index = GetIndex (_target);//reflow two times Show (_target,_index);//reflow two times } } Function Show (TARGET,J) { for (var i = 0,i<3;i++) { Target[i].style.display = ' None ';//reflow } Target[j].style.display = ' block ';//reflow } function GetIndex (Targer) { if (target) { ...//Get the current element index return index; } } |
If it is through CSS to define the hidden and display of elements, by manipulating the classname of the parent, the number of reflow will be reduced to 1 times
code is as follows |
copy code |