Experience Sharing-delays JavaScript Execution and increases webpage loading speed

In our web development, we will involve a large number of external JSCodeAs we all know, loading these external JS Code is a very time-consuming task, because it affects the user experience. If loading is poor, it will affect our performance, therefore, delaying the execution of JavaScript is a way to effectively improve the loading speed of web pages and Improve the Quality of user reading experience.

By calling the js code to be executed like this, the page loading speed has indeed increased by more than 50%. You can use Google tool to test whether it is really fast.

Let's first imagine what happened during page loading. The homepage loads HTML and CSS. After rendering, the JavaScript code is executed correctly in the browser. Assume that some JS files are suddenly aborted. As long as the JS file has no syntax errors, the webpage will be loaded correctly. Therefore, delayed JS loading can be executed in two ways:

 

One case is that after all DOM elements on the page are loaded, the JavaScript code inside the page is executed.

The second case is to dynamically load JavaScript files. If there are dependencies between multiple JS files, make sure that the main JS files are written at the bottom for final loading. The specific implementation code is described below:

View the navigation at the top of my blog,

When a page is opened, the loading speed is very fast. I use the second method to dynamically load JavaScript files. The main code snippets

 

<SCRIPT type = "text/JavaScript">//<! [CDATA [_ Lazyloadscripts =NewArray (); _ lazyexecutedcallbacks=NewArray ();//]> </SCRIPT><SCRIPT type = "text/JavaScript" src = "/scripts/jquery-1.4.4.min.js"> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "/scripts/website-load.js"> </SCRIPT>
 

 

To explain the meaning of the above Code, "_ lazyloadscripts" and "_ lazyexecutedcallbacks" are two arrays used to store variables. The variables you want to load must be written here; you may not be able to understand it in this way. I will use my blog's example to explain it; I will look at the actual code:

 

<! -- Load element --> <SCRIPT type = "text/JavaScript"> // <! [CDATA [  _ Lazyloadscripts = New  Array (); // The js code to be executed outside must be defined in this array, _ lazyloadscripts. Push ( "Http://files.cnblogs.com/58top/jquery.lazyload.mini.js", "http://files.cnblogs.com/magetu/jquery.scripts-13501165562.js" ); _ Lazyexecutedcallbacks = New  Array (); // defines an array of variables, _ lazyexecutedcallbacks. Push (  Function  () // Then write the js code to be executed, that is, the inbound stack operation {$ ( "Head"). append ('<! -- [If IE 6]> <LINK rel = "stylesheet" type = "text/CSS" href = "http://files.cnblogs.com/58top/iehacks.css"/> <SCRIPT src = "http://files.cnblogs.com/58top/ie6pngfix.js"> <\/script> <SCRIPT src = "http://files.cnblogs.com/58top/zh_CN.js"> <\/SCRIPT> <! [Endif] -->' ); $ ( "# Header "). after ('<Div id = "mainnav-sticky-wrapper" class = "sticky-wrapper is-Sticky" style = "height: 48px; "> <Div id =" mainnav "style =" "> '+' <Div class =" rapidxwpr "> '+' <Div id =" topmenu "> '+' <ul class = "SF-menu SF-js-enabled SF-Shadow"> '+' <li> <a href = "http://www.cnblogs.com"> <span> blog </span> </a> </LI> '+' <li> <a href = "http://www.cnblogs.com/58top"> <span> Home </span> </a> </LI> '+ '<li class = ""> <a href = "HTTP: // Www.cnblogs.com/58top/admin/editposts.aspx "> <span> management </span> </a> </LI> '+' <li class =" "> <a href =" http://www.cnblogs.com/58top/category/399677.html "> <span> front-end development </span> </a> </LI> '+' <li class = ""> <a href = "http://www.cnblogs.com/58top/category/331530.html"> <span> CSS </ span> </a> </LI> '+' <li class = ""> <a href = "http://www.cnblogs.com/58top/category/330174.html"> <span> jquery </span> </a> </LI> '+' <li class = ""> <A href = "http://www.cnblogs.com/58top/category/330797.html"> <span> HTML5 </span> </a> </LI> '+' <li class = ""> <a href =" http://www.cnblogs.com/58top/category/330308.html "> <span> photography </span> </a> </LI> '+' <li class =" "> <a href =" http://www.cnblogs.com/58top/category/332697.html "> <span> creative Design </span> </a> </LI> '+' <li class = ""> <a href = "http://www.cnblogs.com/58top/category/402990.html"> <span> font design </span> </A> </LI> '+' <li class = ""> <a href = "http://www.cnblogs.com/58top/rss"> <span> subscription </span> </a> </Li> '+' </div> '+' <Div class = "navsocial"> '+' <ul> '+' <li class = "Twitter"> <a target = "_ blank" rel = "external nofollow" href = "http://list.qq.com/cgi-bin/qf_invite? Id = Twitter "> Twitter </a> </LI> '+' <li class =" Facebook "> <a target =" _ blank "rel =" external nofollow "href = "https://pinterest.com/58top/"> Facebook </a> </LI> '+' <li class = "RSS"> <a target = "_ blank" rel = "external nofollow" href = ""> RSS </a> </LI> '+' <li class = "Pinterest"> <a target = "_ blank" rel = "external nofollow"> pinterest </a> </LI> '+' </ul> '+' </div> >');});  //  ]> </SCRIPT> <SCRIPT type = 'text/JavaScript 'src = 'HTTP: // ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'> </SCRIPT> <SCRIPT type = "text/JavaScript" src = "http://files.cnblogs.com/58top/website-lazy-load1.js"> </SCRIPT> // the function to perform dynamic loading, eventually all the variables are executed in this function.

These JS Code pushed to _ lazyexecutedcallbacks and external JS files inserted into _ lazyloadscripts will all be executed in the website-lazy.js, the executed code snippets are as follows:

 1   2   //  Execute the associated external JS Code and read each JS file through the for loop.  3   Function Loadscriptsafterdocumentready ()  4   {  5       If (_ Lazyloadscripts & _ lazyloadscripts! = Null  )  6   {  7           For ( VaR I = 0; I <_ lazyloadscripts. length; I ++ )  8   { 9               VaR Scripttag = Document. createelement ('script' );  10 Scripttag. type = 'text/JavaScript' ;  11 Scripttag. src = _ Lazyloadscripts [I];  12               VaR Firstscripttag = Document. getelementsbytagname ('script') [0 ];  13   Firstscripttag. parentnode. insertbefore (scripttag, firstscripttag ); 14   }  15   }  16   }  17    18   //  The JS Code that executes the callback. The JS Code is also read through the for loop.  19   Function  Invokelazyexecutedcallbacks ()  20   {  21       If (_ Lazyexecutedcallbacks & _ lazyexecutedcallbacks. length> 0 )  22           For ( VaR I = 0; I <_ lazyexecutedcallbacks. length; I ++ )  23   _ Lazyexecutedcallbacks [I] ();  24   }  25    26   //  The final method is executed after the page is loaded.  27 Jquery (document). Ready (Function  ()  28   {  29   Loadscriptsafterdocumentready ();  30   Invokelazyexecutedcallbacks ();  31 });

 

 

If your website needs to load a wide range of external JS files, write them dynamically in the "website-load.js" to maximize user experience

By calling the js code to be executed like this, the page loading speed has indeed increased by more than 50%. Therefore, this method is very recommended. You can actually use this method, which is great, you are welcome to share your experiences with us.