JS code optimization

1. Reduce jquery usage

jquery can be a great help when dealing with DOM traversal and complex scripting scenarios, but it is slow to handle simple, straightforward code scenarios. Avoid creating jquery objects as much as possible, especially in loops.

2. Optimized circulation

Using the cached array length

Pre-optimization for (var i = 0; i < arr.length; i++) {    //some code here} optimized for (var i = 0, len = arr.length; i < Len; i++) {    //Some code here}

3, If/else and Swith statements

• If it's just 1 or 2 statements, the If/else performance is better.
• If 3 or more than 3, that swith better, this can be tested to verify (test address)

4. Cache DOM elements, Jquey objects, object/array values

5, reduce reflow

Each change to the DOM will have a significant performance cost resulting in page reflow

• Avoid frequent DOM operations on document, if you really need to do it in a off-document way
• Remove the element from document first, and then put the element back in place when you have finished modifying it.
• Set the display of the element to "none" and modify the display to the original value after the modification is complete.
• If you need to create multiple DOM nodes, you can use DocumentFragment to create a one-time join

  Optimization of the former var List=document.getelementbyid ("list"); for (Var i=0;i<10;i++) {var item=document.createelement ("Li"); Item.innerhtml= "option" + (i+1); List.appendchild (item);} Optimized var List=document.getelementbyid ("list"); var fragment=document.createdocumentfragment (); for (Var i=0;i<10; i++) {var item=document.createelement ("Li"), item.innerhtml= "option" + (i+1); Fragment.appendchild (item);} List.appendchild (fragment);

• Centrally modifying styles

  Before optimization: function Selectanchor (Element) {var changediv = document.getElementById (element); changeDiv.style.color = ' #093; ChangeDiv.style.background = ' #fff '; changeDiv.style.height = ' 100px ';} After optimization: css:changediv {background: #fff; color: #093; height:100px;} Javascript:function Selectanchor (Element) {document.getElementById (element). ClassName = ' Changediv ';}

6, avoid the global search< Span class= "hl-reserved" > < Span class= "hl-comment" >

var $button =$ (". Button"), $buttons. Find ("A.mybutton"); Replace $ ("A.mybutton");

7, Priority Dom Search, and then filter

• < Span class= "Hl-code" > First use native getElementById, getElementsByTagName
• For example, find ("a"). Filter ("[href=* ' Url_fragment ']") Replace. Find ("a[href=* ' url_fragment ']"

8. Bind multiple events to an element

The pre-optimization var $elem = $ ("#element"), $elem. On ("MouseOver", function (event) {    //mouseover}), $elem. On ("Mouseout", funct Ion (Event) {    //mouseout});//Optimized after $ ("#elem"). On ("MouseOver mouseout", function (event) {    if (event.type = = =) MouseOver ") {        //mouseover    } else {        //Mouseout    }});

9. Property Depth

• Object.name<object.name.name
• The deeper the property is, the longer it takes.

Transferred from: http://www.cnblogs.com/hj4444/p/3985321.html

JS code optimization