Home > Developer > Web Develop
The front-end optimization process is often referred to the mode of loading JS, the following several commonly used loading methods:
Insert <script> label inside 1:head tags
<script type= "Text/javascript" src= "Test.js" ></script>
This is the most common approach, but the biggest problem with this approach is that when the browser resolves to the <script> tag, the browser stops parsing the content, and the first download of the script file, and the execution of the code, is a blocking process, which means that After the test.css style files and <body> tags can not be loaded, because the <body> tags and styles and other resources can not be loaded, then the page naturally can not render, so often the page open will appear blank page content or loss of style, This is in the head introduced too many JS file blocking loading caused by, although the high version of the browser can be loaded in parallel to the script, but also some browser script is still one after the loading, so the optimization can put JS at the bottom of the body tag, so that the page can be displayed quickly first, Improved experience friendliness.
2: Create a dynamic script
var script=document.createelement (' script '); Script.type= ' text/javascript '; script.src = ' Test.js ';d ocument.getelementsbytagname (' head ') [0].appendchild (script);The code above dynamically creates a <script> tag and adds it to the
3:labjs
can help us to complete the parallel loading of scripts and sequential execution, which is our company's current main way, want to see the detailed usage to the official website to see.
Common usage:
1,
$LAB. Script ("Script1.js") . Script ("Script2.js"). Script ("Script3.js") . Wait (function() {// wait for all script to load and then execute this code block script1func (); Script2func (); Script3func (); });2,
$LAB. Script ("Script1.js") . Wait () // empty Wait () just make sure that SCRIPT1 is executed before other code . Script ("Script2.js") // script2 and script3 depend on Script1 . Script ("Script3.js") . Wait () // but Script2 and SCRIPT3 do not depend on each other and can be downloaded in parallel . Script ("Script4.js") SCRIPT4 relies on script1, script2 and Script3 . Wait (function() {Script4func ();});3,
$LAB. Script ("Script1.js") // . Script ("Script2.js") /// so it can be executed in any order . Script ("Script3.js") . Wait (function() { /// if required, This can of course execute the JavaScript function alert ("Scripts 1-3 is loaded!" ); }) . Script ("Script4.js") // . Wait (function() {Script4func ();});In the above example, the previous three scripts are loaded in parallel, executed in any order, and if there is a dependency and a lot of scripts, there is not a script function followed by a wait on the idle code is very cumbersome, so the LABJS library provides a parameter to ensure that after the download sequence execution
$LAB. SetOptions ({alwayspreserveorder:true})// set wait between each script . Script ("Script1.js") // script1, Script2, SCRIPT3, script4 depend on each other . Script ("Script2.js")// and execute sequentially after downloading in parallel . Script (" script3.js") . Script (" Script4.js ") . Wait (function() { script4func (); });This code is a lot of refining, recommended
4,
$LAB. Script (function() { // ' _is_ie ' value IE is true, non ie is false if (_is_ie) { return"Ie.js"; // if it is IE then this JS will be loaded } Else { returnnull; // if it is not IE this code will be skipped } }) . Script ("Script1.js"). Wait ();JS sequential loading and parallel loading
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
