High-performance JavaScript _ programming-note 1 (loading and execution loading and running)

1. Javascript Loading

Sequence: Try to load JS files at the bottom of the page

Quantity: Try to add several JavascriptCodePackage the block into a JS file (Packaging tool [Yahoo! Combo hander])

JS attribute defer: If a JS Code is added with the defer attribute, it will not be executed before the DOM element is loaded (no matter where the JS Code block is put, Note: Some browsers do not support this attribute)

Example:

 
        
       untitled document         

the pop-up sequence is script, defer, and load. If the defer attribute is not available or not supported by the browser, the order is defer, script, load

Dynamic script element: Dynamic script elements

When a node is dynamically loaded for download, The Returned Code will be executed immediately (except ff and opera, they will wait for the previous script to be executed ), in this way, the script runs normally when it is a "self-running" type (that is, it is not associated with other JS scripts and is highly independent, however, if the interface contains an interface that can be called by other scripts on the page, it may cause problems. In this case, you must wait until the file is fully loaded. FF, opera, chrome, safari3 + issues a load event after the <SCRIPT> node receives the event completely. we can monitor this event to determine whether the JS script has been loaded. The Code is as follows:

IE supports another implementation method. It sends an onreadystatechange event. <SCRIPT> There Is A readystate attribute, and its value changes along with the status of the downloaded file.

A> the following functions can be used to load page JavaScript files and provide entry functions:

<SCRIPT type = "text/JavaScript"> function loadscript (URL, callback) {var script = document. createelement ("script"); script. type = "text/JavaScript"; if (script. readystate) {// iescript. onreadystatechange = function () {If (script. readystate = "loaded" | script. readystate = "complete") {script. onreadystatechange = NULL; callback () ;}} else {// othersscript. onload = function () {callback () ;}} script. src = URL; document. getelementsbytagname ("head") [0]. appendchild (SCRIPT);} loadscript ("test. JS ", function () {console. log ("Callback () Success")}) </SCRIPT>
 

 
Test. js file: console. Log ("the test. js load success ");
 

B> lazyload is a more powerful function similar to loadscript, which is reduced to kb.

 
Lazyload. js ("test. js", function () {console. Log ("test. js loaded success ");})