performance

简介

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

实战

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

等到页面 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” 。

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

  1. <script type="text/javascript">// <![CDATA[    
  2.      _lazyExecutedCallbacks.push(function ()    
  3.      {    
  4.          // in the case you need to execute some scripts in a nested page or module.    
  5.          // don't execute them explicitly, but push them into the callback list.    
  6.      });    
  7.  // ]]></script>    
  8.  <script type="text/javascript">// <![CDATA[    
  9.      // 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” 里被执行，执行的代码片段如下：

  1. // dynamically load external JS files when document ready    
  2. // dynamically load external JS files when document ready    
  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.  // 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 文件这么做。

原文链接：http://my.oschina.net/u/563639/blog/59214

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/daishuguang/p/3520115.html