JavaScript DOM Operation optimization

Source: Internet
Author: User

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
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.