经过延缓执行 JavaScript 提高网页加载速度

时间 2019-11-11

标签经过延缓执行 javascript 提高网页加载速度栏目 JavaScript 繁體版

原文原文链接

简介

延缓执行 JavaScript 是一个能有效提升网页加载速度以及提高用户阅读体验质量的途径。从实际经验来看，将咱们的网站从经济实惠的 VPS 迁移到 Softlayer（美国著名的一个数据中心）独立服务器平台上只能给网站加载速度带来20%的提高，可是经过延缓执行 JavaScript 却能帮助提速 50% ，不妨看看 Google Webmaster 工具 > Site Performance（网站性能）的统计结果：

javascript

实战

网页开发遵循一个假设，就算有 JS 文件忽然被中断了，只要没有 JS 执行错误，那网页就必定会被正确渲染。简单的说，延缓执行 JS 能够采起下面两种规则：java

等到页面 Document 准备好以后再来执行内联的 JS 代码，这些代码至少也得放在页面底部。
动态地加载外部 JavaScript 文件。若是多个 JS 文件之间存在依赖，确保主要的 JS 文件引用写在网页底部以便最后加载。

下面这个主页面的代码片断指出了咱们如何在开发中延缓 JavaScript 的执行。

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

在开发中常常会有些嵌套网页或者构件须要依赖一些外部 JS 文件或 JS 代码的执行。在这种状况下，能够像上面例子那样在主页面顶部定义两个变量 “_lazyLoadScripts” 和 “_lazyExecutedCallbacks” 。

在下面代码片断中，你能够看到这两个变量是如何被使用在嵌套网页或构件上的。jquery

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

这些被压入（push）到 “_lazyExecutedCallbacks” 里的 JS 代码和被插入到 “_lazyLoadScripts” 里的外部 JS 文件所有都会在 “website-lazy-load.js” 里被执行，执行的代码片断以下：

 
      01 
      // dynamically load external JS files when document ready  
     
      02 
      // dynamically load external JS files when document ready  
     
      03 
      function loadScriptsAfterDocumentReady()  
     
      04 
      {  
     
      05 
          if (_lazyLoadScripts && _lazyLoadScripts != null)  
     
      06 
          {  
     
      07 
              for (var i = 0; i < _lazyLoadScripts.length; i++)  
     
      08 
              {  
     
      09 
                  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 
      // Execute the callback when document ready.  
     
      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 
      // execute all deferring JS when document is ready by using jQuery.  
     
      27 
      jQuery(document).ready(function ()  
     
      28 
      {  
     
      29 
          loadScriptsAfterDocumentReady();  
     
      30 
          invokeLazyExecutedCallbacks();  
     
      31 
      });

小贴士

开发网页的合理步骤应该是首先编写 HTML 和 CSS 。等这些网页在浏览器里可以正确地（符合你的指望）被渲染出来以后，再开始编写 JS 代码来支持动画或者其余的效果。
不要在 HTML 页面上的任何一个元素上编写 onclick="..." 代码来绑定事件，可是能够在 HTML Document 都准备好的状况下进行绑定。这样能够避免在 JS 文件加载完成以前因用户触发了 onclick 事件而致使的 JS 错误。
若是你的网站须要普遍地加载外部 JS 文件，那么将它们写在 “website-lazy-load.js” 里动态的加载进来，例如 Google Analytics tracking 的JS 文件、 Google AdSense 的JS 文件等等。
这种方法一样地对 CSS 文件也有效。可是别对主CSS 文件这么作。