Read "High performance JavaScript" notes (i)

Source: Internet
Author: User

Chapter I.
Load and execute:
1,js script blocks page rendering,<script> as far as possible at the bottom of the <body> tag
2, merging scripts, fewer <script> tags on the page, and the additional overhead associated with HTTP requests, reducing the number of page out-of-chain script files will improve performance
The 3,css file is a parallel download that does not block other processes on the page

No blocking script:
1, Delay script: Use the <script> defer property (only for ie4+ and Firefox3.5)
2, dynamically create <script> to download and execute code
3, for xhr object download JS code and inject page

Non-blocking scripting tool: Yui3,lazyload, LABJS

%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
Chapter Three: DOM programming
The browser implements the DOM and JavaScript independently, and two separate functions are consumed as long as they are connected to each other through the interface.
Performance optimization:

(1) Minimize DOM accesses, as much as possible on JavaScript side
e.g:

function Innerhtmlloop () {  for (var count=0;count<15000;count++) {      document.getElementById (' here '). InnerHTML + = ' a ';  }}


After optimization:

function Innerhtmlloop () {  var content = ';    for (var count=0;count<15000;count++) {     + = ' a ';  }   document.getElementById (' here '). InnerHTML = countent;}




(2), HMTL set optimization
The HTML collection contains the class array object referenced by the DOM node, in a "real-time state" real-time existence.
It also updates automatically when the underlying document object is updated
HTML collections are: Document.getelementsbyname (), document.images, document.links, etc.

An unexpected cycle of death
Alldivs.length each iteration is incremented, reflecting the current state of the underlying document

var alldivs = document.getelementsbytagname (' div ');  for (var i=0;i<alldivs.length;i++) {   document.body.appendChild (document.createelement (' div ') ));}


Optimization method: Operating speed is almost
1, cache the set length into a variable, and use it in the iteration

var alldivs = document.getelementsbytagname (' div '); var len = alldivs.lengthfor (var i=0;i<len;i++) {    /**/}


2, if you need to operate the collection frequently, it is recommended to copy the collection into an array

var alldivs = document.getelementsbytagname (' div '); var arr = ToArray (alldivs);   // ToArray Custom Collection-to-array functions  for (var i=0;i<arr.length;i++) {  /**/}


3, for any type of DOM access, it is best to cache this variable with a local variable when the same DOM property or method requires multiple accesses

function collentionnodeslocal () {   var coll = document.getelementsbytagname (' div ');        = coll.length;        = ";        NULL ;     for (var count=0;count<len;count++) {      = Coll[count];       = el.nodename;       = El.nodetype;       = el.tagname;   }    return name;}

(To be Continued ...) )

Read "High performance JavaScript" notes (i)

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.