JavaScript improves webpage loading speed

Introduction

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. From the actual experience, migrating our website from an affordable VPS to a Softlayer famous Data Center in the United States) the independent server platform can only increase the loading speed of the website by 20%, however, the delay in JavaScript execution can help increase the speed by 50%. Let's take a look at the statistics of the Google Webmaster tool> Site Performance website:

Practice

Web development follows the assumption that even if a JS file is suddenly interrupted, as long as there is no JS execution error, the web page will be correctly rendered. To put it simply, you can adopt the following two rules to delay the execution of javascript:

Wait until the page Document is ready and then execute the inline JS Code. These codes must be at least at the bottom of the page.

Dynamically load external JavaScript files. If multiple JS files are dependent on each other, make sure that the major JS file references are written at the bottom of the page for final loading.

The code snippet on the home page below shows how we can delay JavaScript execution during development.

 
 

  
  
<script type="text/javascript">// <![CDATA[     
  
  
         _lazyLoadScripts = new Array();    
  
  
         _lazyExecutedCallbacks = new Array();     
  
  
 // ]]></script>    
  
  
 <script type="text/javascript" src="/scripts/jquery-1.4.4.min.js"></script>    
  
  
 <script type="text/javascript" src="/scripts/website-lazy-load.js"></script>   
 
 

During development, some embedded web pages or components usually depend on some external JS files or JS code execution. In this case, you can define two variables "_ lazyLoadScripts" and "_ lazyExecutedCallbacks" at the top of the home page, as shown in the preceding example ".

In the following code snippet, you can see how these two variables are used on nested web pages or components.

 
 

  
  
<script type="text/javascript">// <![CDATA[    
  
  
     _lazyExecutedCallbacks.push(function ()    
  
  
     {    
  
  
         // in the case you need to execute some scripts in a nested page or module.    
  
  
         // don't execute them explicitly, but push them into the callback list.    
  
  
     });    
  
  
 // ]]></script>    
  
  
 <script type="text/javascript">// <![CDATA[    
  
  
     // push the external JS files into the list for deferring loading.    
  
  
     _lazyLoadScripts.push("/scripts/your-script.js");    
  
  
 // ]]></script>  
 
 

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

 
 

  
  
// dynamically load external JS files when document ready    
  
  
// dynamically load external JS files when document ready    
  
  
 function loadScriptsAfterDocumentReady()    
  
  
 {    
  
  
     if (_lazyLoadScripts && _lazyLoadScripts != null)    
  
  
     {    
  
  
         for (var i = 0; i < _lazyLoadScripts.length; i++)    
  
  
         {    
  
  
             var scriptTag = document.createElement('script');    
  
  
             scriptTag.type = 'text/javascript';    
  
  
             scriptTag.src = _lazyLoadScripts[i];    
  
  
             var firstScriptTag = document.getElementsByTagName('script')[0];    
  
  
             firstScriptTag.parentNode.insertBefore(scriptTag, firstScriptTag);    
  
  
         }    
  
  
     }    
  
  
 }    
  
  
     
  
  
 // Execute the callback when document ready.    
  
  
 function invokeLazyExecutedCallbacks()    
  
  
 {    
  
  
     if (_lazyExecutedCallbacks && _lazyExecutedCallbacks.length > 0)    
  
  
         for(var i=0; i<_lazyExecutedCallbacks.length; i++)    
  
  
             _lazyExecutedCallbacks[i]();    
  
  
 }    
  
  
    
  
  
 // execute all deferring JS when document is ready by using jQuery.    
  
  
 jQuery(document).ready(function ()    
  
  
 {    
  
  
     loadScriptsAfterDocumentReady();    
  
  
     invokeLazyExecutedCallbacks();    
  
  
 });  
 
 

Tips

A reasonable step for developing a webpage should be to first compile HTML and CSS. After the pages are rendered correctly in the browser, you can write JavaScript code to support animations or other effects.

Do not write onclick = "..." code on any element on the HTML page to bind events, but bind them When HTML documents are ready. This avoids JS errors caused by The onclick event triggered by the user before the JS file is loaded.

If your website needs to load a wide range of external JS files, load them dynamically in the website-lazy-load.js, such as Google Analytics tracking JS files, Google AdSense JS files and so on.

This method is also effective for CSS files. But do not do this for the main CSS file.