Home > Developer > JavaScript
1. JavaScript Blocking Features:
When the browser executes the JavaScript code, it cannot do anything else at the same time;
IE8, Firefox3.5, Safari4, and Chrome2 both allow JavaScript files to be downloaded in parallel so that the <script> tag does not block the loading of other <script> tags when loading external resources. But it will still block the loading of other resources;
It is recommended to place all <script> tags at the bottom of the <body> tag as much as possible to minimize the impact on the entire page load.
Reducing the number of out-of-chain scripts will improve performance, loading a single 100KB file faster than downloading 4 25KB of files;
Put the inline script in the House. Applying the <link> tag of the outer-chain style sheet will cause the page to block to wait for the stylesheet to be downloaded, in order to ensure that the inline script is executed with the most accurate style information, so it is recommended never to keep the inline script immediately behind the <link> tag;
If you need to rely on multiple JS files, you can merge multiple files into one, you need to refer to a <script> tag, reduce performance consumption, the work of merging files can be executed by the offline packaging tool;
Create responsive Web Apps: Reduce the size of JavaScript files, limit the number of HTTP requests ...
2. Non-blocking script:
(1) Deferred script:
HTML4 defines an extended property for the <script> tag: defer, which indicates that the script contained in this element does not modify the DOM, so the code can be safely deferred;
Currently the defer attribute has been supported by the mainstream browser, according to the HTML5 rules: Defer property only takes effect when the SRC attribute is declared;
<script type= "Text/javascript" src= "File1.js" defer></script>
The async attribute is introduced in HTML5 for asynchronous load scripts, and the same point in async and defer is parallel loading, which does not cause blocking during the download, except that async is executed automatically after loading, and defer needs to wait for the page to complete.
(2) Dynamic scripting elements:
Dynamic wear <script> label to page, loaded JS file, when added to the page to start the download, so that no matter when the download starts, the file download and execution process will not block the page other processes
Here's how to dynamically load JavaScript files that are compatible with IE:
functionLoadscript (url,callback) {varScript = document.createelement (' script '); if(script.redaystate) {//IEScript.onreadystatechange =function(){ if(Script.readystate = = "Load" | | script.readystate = = "complete") {Script.onreadystatechange=NULL; Callback (); } }; }Else{script.onload=function() {callback (); }} script.src=URL; Document.getelementbytagname ("Head") [0].appendchild (script);}
(3) XMLHttpRequest Script Injection
The method is to create a XHR object, then use it to download the JavaScript file, and finally inject the code into the page by creating the <script> element.
The advantage is that JavaScript code can be downloaded but not immediately executed, and mainstream browsers support
Limitations: JavaScript files must be in the same domain as the requested page, so a single-line web app typically does not use XHR script injection technology.
(4) The way of YUI3
(5) Lazyload Class Library: This is the lazy load tool
<script type= "Text/javascript" src= "lazyload-min.js" ></script> <script type= "Text/javascript" > lazyload.js ("the-rest.js",function() { application.init (); }); </script>Lazyload also supports multiple JavaScript files and can be maintained correctly in all browsers, loading multiple JavaScript files and simply passing a URL array to the Lazyload.js () method:
<script type= "Text/javascript" src= "lazyload-min.js" ></script> <script type= "Text/javascript" > lazyload.js (["The-rest.js", "The-rest1.js"],function() { application.init (); }); </script>(5) Labjs
<script type= "Text/javascript" src= "lab.js" ></script> <script type= "Text/javascript" > $LAB. Script ("First-file.js") . Script ("The-rest.js") . Wait (function () {//the function application.init () called after the file has been downloaded and executed ; } ) </script>
High-performance JavaScript (note I: Load and execute)
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
