Home > Developer > Web Develop

JS Performance DOM Optimization

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

What is DOM?

    • applications for manipulating XML and HTML documents
    1. DOM Node 2. Dom Tree 3.Dom API

Dom optimization

    • The browser will be JS and Dom independent implementation, JS each operation of the DOM, will add a time-consuming, in order to improve the performance of the DOM, it is necessary to minimize the operation of JS Dom,

Here are two Tests

1<script>2Window.onload=function(){3             varDiv=document.getelementbyid (' div ');4             varStr= ";5Console.time (' test1 ');6              for(vari=0;i<5000;i++){7div.innerhtml+= ' a ';8             }9Console.timeend (' test1 ');//Firefox under test time 152msTen  OneConsole.time (' Test2 '); A              for(i=0;i<5000;i++){ -str+= ' a '; -             } theDiv.innerhtml=str; -Console.timeend (' test2 ');//Firefox under test time 1.36ms -         }; -</script> + -<body> +<div id= "Div" ></div> A</body>

As you can see, TEST2 only operates one DOM at a time, which improves performance.

    • Ways to reduce DOM operations:
    1. Use node clone Node.clonenode () instead of creating a new repeating node
    2. Use local variables instead of access node collections, such as
      var doc=document;    var div=doc.getelementbyid (' div ');    var input=doc.getelementbyid (' input ');
    3. Try to get only the element nodes, for example using children instead of childnodes firstelementchild instead of FirstChild
    4. Selector API: Use Queryselectorall (except for browsers with IE8 below are well supported)

Dom and browser

    • Reflow: The process of changing the content of a page
    • Redraw: The process by which the browser displays content after the rearrangement is finished

The process of reflow and redraw can be reduced in the following ways to improve browser performance

  1. Try to work in front of AppendChild ()
    1  for(vari=0;i<50000;i++){2     varLi=document.createelement (' Li ');3     //Not recommended4 Ul.appendchild (LI);5Li.innerhtml= ' Li ';6  }           7  for(i=0;i<5000;i++){8      varLi=document.createelement (' Li ');9      //RecommendedTenLi.innerhtml= ' Li '; One Ul.appendchild (LI); A}
  3. Using Csstext to merge DOM operations
  4. Caches layout information. For example:
    1Window.onload =function(){2     varOdiv = document.getElementById (' Div1 '));3     varL =Odiv.offsetleft;4     varT =Odiv.offsettop;5SetInterval (function(){6l++;7t++;8ODiv.style.left = L + ' px ';9ODiv.style.top = T + ' px ';Ten},30); One};
  5. Take advantage of document fragmentation
    1Window.onload =function(){2     varOul = document.getElementById (' ul1 '));3     varOfrag =document.createdocumentfragment ();4      for(vari=0;i<5000;i++){5         varOLi = document.createelement (' li ');6 Ofrag.appendchild (oLi);7     }8 Oul.appendchild (Ofrag);9};

Dom and Events

  • improve browser performance with event proxies (event delegates)
    1 console.time (' test1 '); 2 for(i=0;i<oli.length;i++){ 3 oli[i].onclick=function(){ 4 Alert (1); 5                }; 6         } 7 console.timeend (' test1 ');//Test 18ms under Firefox8//The following is an event proxy binding event9 console.time (' Test2 ');Ten oul.onclick=function(e) {e=e | |event;12varT=e.target | |e.srcelement;13if(t.nodename.tolowercase () = = ' Li '){t.onclick=function(){Alert (1);16                 };17             }18         };Console.timeend (' test2 ');//Test 1.54ms under Firefox

Dom and front-end templates

    • Better separation of logic and views, the basis of the MVC framework

JS Performance DOM Optimization

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
drupal performance optimization verizon cloud performance optimization initializing website speed and performance optimization java performance tuning and optimization java performance tuning and optimization sails js performance node js performance monitoring

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More