Home > Developer > JavaScript
The performance of JavaScript in the browser is especially important in the web2.0 era, and thousands of lines of JavaScript code will undoubtedly become a performance killer,
When the lower version of the browser executes the JavaScript code, because the browser only uses a single process to handle UI refresh and JavaScript script execution,
This means that you cannot do any other things at the same time when you load JavaScript files. While loading, it causes the user to block the interaction;
In theory, putting a style-and-behavior script together is the first to load, which helps ensure the correct user experience, such as the following code:
<! DOCTYPE html>This seemingly reasonable code actually has a serious performance problem: blocks the page from rendering before the JavaScript file is loaded and executed, and our web page appears blank
Cannot interact with it normally, which is called script blocking
Because the script blocks the loading of other resources on the page we can put all the script tags in </body> before loading the JavaScript file at the end of the page loading
<!DOCTYPE HTML><HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Javascript</title> <Linkrel= "stylesheet"type= "Text/css"href= "File.css"/> <Linkrel= "stylesheet"type= "Text/css"href= "File1.css"/> <Linkrel= "stylesheet"type= "Text/css"href= "File2.css"/></Head><Body> <!--recommended location for all JS files - <Scriptsrc= "File.js"type= "Text/javascript"CharSet= "Utf-8"></Script> <Scriptsrc= "File1.js"type= "Text/javascript"CharSet= "Utf-8"></Script></Body></HTML>
-----------The first task of optimizing JavaScript, place the JS file at the bottom of the page;So how do you create a non-blocking script?
The secret of a nonblocking script is that it does not start loading JavaScript code until the page is loaded. We want to download and execute the script after the Window object's load time is triggered.
It is known that there are many ways to achieve this effect, here is a simple example of twos:
1.HTML5 new Features
HTML5 provides two new properties for the script tag one is defer and the other is async. They take the form of parallel downloads, which do not cause the page to block during the download process.
The difference is that defer means waiting for the page to load before it executes, and async is automatically executed when it is loaded;
Defer is currently compatible with major mainstream browsers;
2. Create a dynamic scripting element; it is easy to make the page rendering complete before the script loading;
For example:
<!DOCTYPE HTML><HTML><Head> <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" /> <title>Javascript</title> </Head><Body> <Scripttype= "Text/javascript"> varScript=Document.createelement ("Script"); SCRIPT.SRC= "Ztf.js"; document.getElementsByTagName ("Head")[0].appendchild (script); </Script></Body></HTML>We use the standard Dom method document.createelement to dynamically create a SCRIPT element and specify its src; this line is a dynamic scripting pattern; inserting arbitrary JavaScript code at any time will be performed by the browser; (the script created should not be inserted into Body inside; This may cause IE to throw an ' operation terminated ' error message;)
Ff,opera,chrome and Safari3 versions of script tags will trigger the onload event when loading is complete.
And in the old version ie (IE6-10) it will trigger a ReadyStateChange event. The <script> element provides a readystate property whose value varies depending on the SCR loading process, and we typically use "loaded" and "complete".
With "Client Capability Detection" (http://www.jxbh.cn/newshow.asp?id=1434&tag=2) we can create a generic function for dynamically loading javascript:
functionLoadscript (url,callback) {varScript = document.createelement ("Script"); Script.type= "Text/javascript"; if(script.readystate) {//client Capability Detection if READYSTATE is supported, returns a string and returns undefinedScript.onreadystatechange = function () {//onreadystatechange Events if(script.readystate== "Loaden" | | script.readystate== "Complete") {Script.onreadystatechange=NULL; Callback (); } } }Else{script.onload=function() {callback (); }} script.src=URL; document.getElementsByTagName ("Head") [0].appendchild (script); }This function accepts two parameters, the URL of the JavaScript file, and the callback function after the load is completed. The use of the Loadscript () function is as follows
Loadscript ("ztf.js",function() { alert ("Loadend")});If necessary, you can load as many JavaScript files as possible on the page, but be sure to consider the loading order of the files, you can constantly use the callback callback function to load multiple JavaScript scripts;
There is another, Ajax dynamic request loading script here, I do not explain each, we consult the relevant documents;
Part of the content from high-performance JavaScript
JavaScript Performance Optimizations: Creating JavaScript non-blocking scripts
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
