Home > Developer > JavaScript
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)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
