JavaScript的性能优化：加载和执行

jopen 11年前

js最大的问题是：无论当前JavaScript代码是内嵌还是在外链文件中，页面的下载和渲染都必须停下来等待脚本执行完成。JavaScript执行过程耗时越久，浏览器等待响应用户输入的时间就越长。浏览器在下载和执行脚本时出现阻塞.

解决办法:

一:脚本的位置:

由于脚本会阻塞页面其他资源的下载，因此推荐将所有<script>标签尽可能放到<body>标签的底部，以尽量减少对整个页面下载的影响。

例如: 

<html>    <head>        <title>Source Example</title>        <link rel="stylesheet" type="text/css" href="styles.css">    </head>    <body>        <p>Hello world!</p>        <!-- Example of efficient script positioning -->        <script type="text/javascript" src="script1.js"></script>        <script type="text/javascript" src="script2.js"></script>        <script type="text/javascript" src="script3.js"></script>    </body>    </html>
二: 组织脚本

由于每个<script>标签初始下载时都会阻塞页面渲染，所以减少页面包含的<script>标签数量有助于改善这一情况。这不仅针对外链脚本，内嵌脚本的数量同样也要限制。浏览器在解析 HTML 页面的过程中每遇到一个<script>标签，都会因执行脚本而导致一定的延时，因此最小化延迟时间将会明显改善页面的总体性能。

这个问题在处理外链 JavaScript 文件时略有不同。考虑到 HTTP 请求会带来额外的性能开销，因此下载单个 100Kb 的文件将比下载 5 个 20Kb 的文件更快。也就是说，减少页面中外链脚本的数量将会改善性能。

所以尽量合并和压缩js

三：延迟加载脚本

HTML 4 为<script>标签定义了一个扩展属性：defer。Defer 属性指明本元素所含的脚本不会修改 DOM，因此代码能安全地延迟执行

用法： 

<script type="text/javascript" src="script1.js" defer></script>
HTML 5 为<script> 标签定义了一个新的扩展属性：async 。它的作用和 defer  一样，能够异步地加载和执行脚本，不因为加载脚本而阻塞页面的加载。但是有一点需要注意，在有 async  的情况下，JavaScript 脚本一旦下载好了就会执行，所以很有可能不是按照原本的顺序来执行的。如果 JavaScript 脚本前后有依赖性，使用 async  就很有可能出现错误。

用法： 

<script type="text/javascript" src="script1.js" async></script>

四：动态脚本元素

文档对象模型（DOM）允许您使用 JavaScript 动态创建 HTML 的几乎全部文档内容。<script>元素与页面其他元素一样，可以非常容易地通过标准 DOM 函数创建：

清单 6 通过标准 DOM 函数创建<script>元素

Js代码 
  1. var script = document.createElement ("script");  
  2.    script.type = "text/javascript";  
  3.    script.src = "script1.js";  
  4.    document.getElementsByTagName("head")[0].appendChild(script);  

新的<script>元素加载 script1.js 源文件。此文件当元素添加到页面之后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。您甚至可以将这些代码放在<head>部分而不会对其余部分的页面代码造成影响（除了用于下载文件的 HTTP 连接）。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了 Firefox 和 Opera，他们将等待此前的所有动态脚本节点执行完毕）。当脚本是“自运行”类型时，这一机制运行正常，但是如果脚本只包含供页面其他脚本调用调用的接口，则会带来问题。这种情况下，您需要跟踪脚本下载完成并是否准备妥善。可以使用动态 <script> 节点发出事件得到相关信息。

Firefox、Opera, Chorme 和 Safari 3+会在<script>节点接收完成之后发出一个 onload 事件。您可以监听这一事件，以得到脚本准备好的通知：

清单 7 通过监听 onload 事件加载 JavaScript 脚本

Js代码 
  1. var script = document.createElement ("script")  
  2. script.type = "text/javascript";  
  3. //Firefox, Opera, Chrome, Safari 3+  
  4. script.onload = function(){  
  5.     alert("Script loaded!");  
  6. };  
  7. script.src = "script1.js";  
  8. document.getElementsByTagName("head")[0].appendChild(script);  

 Internet Explorer 支持另一种实现方式，它发出一个 readystatechange 事件。<script>元素有一个readyState 属性，它的值随着下载外部文件的过程而改变。readyState 有五种取值：

  • “uninitialized”：默认状态
  • “loading”：下载开始
  • “loaded”：下载完成
  • “interactive”：下载完成但尚不可用
  • “complete”：所有数据已经准备好

微软文档上说，在<script>元素的生命周期中，readyState 的这些取值不一定全部出现，但并没有指出哪些取值总会被用到。实践中，我们最感兴趣的是“loaded”和“complete”状态。Internet Explorer 对这两个 readyState 值所表示的最终状态并不一致，有时<script>元素会得到“loader”却从不出现“complete”，但另外一些情况下出现“complete”而用不到“loaded”。最安全的办法就是在readystatechange 事件中检查这两种状态，并且当其中一种状态出现时，删除readystatechange事件句柄（保证事件不会被处理两次）：

清单 8 通过检查readyState状态加载JavaScript脚本

Js代码 
  1. var script = document.createElement("script")  
  2. script.type = "text/javascript";  
  3. //Internet Explorer  
  4. script.onreadystatechange = function(){  
  5.      if (script.readyState == "loaded" || script.readyState == "complete"){  
  6.            script.onreadystatechange = null;  
  7.            alert("Script loaded.");  
  8.      }  
  9. };  
  10. script.src = "script1.js";  
  11. document.getElementsByTagName("head")[0].appendChild(script);  

大多数情况下，您希望调用一个函数就可以实现JavaScript文件的动态加载。下面的函数封装了标准实现和 IE 实现所需的功能：

清单 9 通过函数进行封装

Js代码 
  1. function loadScript(url, callback){  
  2.     var script = document.createElement ("script")  
  3.     script.type = "text/javascript";  
  4.     if (script.readyState){ //IE  
  5.         script.onreadystatechange = function(){  
  6.             if (script.readyState == "loaded" || script.readyState == "complete"){  
  7.                 script.onreadystatechange = null;  
  8.                 callback();  
  9.             }  
  10.         };  
  11.     } else { //Others  
  12.         script.onload = function(){  
  13.             callback();  
  14.         };  
  15.     }  
  16.     script.src = url;  
  17.     document.getElementsByTagName("head")[0].appendChild(script);  
  18. }  

此函数接收两个参数：JavaScript 文件的 URL，和一个当 JavaScript 接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步，设置 src 属性，并将<script>元素添加至页面。此loadScript() 函数使用方法如下：

清单 10 loadScript()函数使用方法

Js代码 
  1. loadScript("script1.js", function(){  
  2.     alert("File is loaded!");  
  3. });  

您可以在页面中动态加载很多 JavaScript 文件，但要注意，浏览器不保证文件加载的顺序。所有主流浏览器之中，只有 Firefox 和 Opera 保证脚本按照您指定的顺序执行。其他浏览器将按照服务器返回它们的次序下载并运行不同的代码文件。您可以将下载操作串联在一起以保证他们的次序，如下：

清单 11 通过 loadScript()函数加载多个JavaScript脚本

Js代码 
  1. loadScript("script1.js", function(){  
  2.     loadScript("script2.js", function(){  
  3.         loadScript("script3.js", function(){  
  4.             alert("All files are loaded!");  
  5.         });  
  6.     });  
  7. });  

此代码等待 script1.js 可用之后才开始加载 script2.js，等 script2.js 可用之后才开始加载 script3.js。虽然此方法可行，但如果要下载和执行的文件很多，还是有些麻烦。如果多个文件的次序十分重要，更好的办法是将这些文件按照正确的次序连接成一个文件。独立文件可以一次性下载所有代码（由于这是异步进行的，使用一个大文件并没有什么损失）。

动态脚本加载是非阻塞 JavaScript 下载中最常用的模式，因为它可以跨浏览器，而且简单易用。

使用XMLHttpRequest(XHR)对象

此技术首先创建一个 XHR 对象，然后下载 JavaScript 文件，接着用一个动态 <script> 元素将 JavaScript 代码注入页面。清单 12 是一个简单的例子：

清单 12 通过 XHR 对象加载 JavaScript 脚本

Js代码 
  1. var xhr = new XMLHttpRequest();  
  2. xhr.open("get", "script1.js", true);  
  3. xhr.onreadystatechange = function(){  
  4.     if (xhr.readyState == 4){  
  5.         if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){  
  6.             var script = document.createElement ("script");  
  7.             script.type = "text/javascript";  
  8.             script.text = xhr.responseText;  
  9.             document.body.appendChild(script);  
  10.         }  
  11.     }  
  12. };  
  13. xhr.send(null);  

此代码向服务器发送一个获取 script1.js 文件的 GET 请求。onreadystatechange 事件处理函数检查readyState 是不是 4，然后检查 HTTP 状态码是不是有效（2XX 表示有效的回应，304 表示一个缓存响应）。如果收到了一个有效的响应，那么就创建一个新的<script>元素，将它的文本属性设置为从服务器接收到的 responseText 字符串。这样做实际上会创建一个带有内联代码的<script>元素。一旦新<script>元素被添加到文档，代码将被执行，并准备使用。 

这种方法的主要优点是，您可以下载不立即执行的 JavaScript 代码。由于代码返回在<script>标签之外（换句话说不受<script>标签约束），它下载后不会自动执行，这使得您可以推迟执行，直到一切都准备好了。另一个优点是，同样的代码在所有现代浏览器中都不会引发异常。 

此方法最主要的限制是：JavaScript 文件必须与页面放置在同一个域内，不能从 CDN 下载（CDN 指”内容投递网络（Content Delivery Network）”，所以大型网页通常不采用 XHR 脚本注入技术。 

总结

减少 JavaScript 对性能的影响有以下几种方法：

  • 将所有的<script>标签放到页面底部，也就是</body>闭合标签之前，这能确保在脚本执行前页面已经完成了渲染。
  • 尽可能地合并脚本。页面中的<script>标签越少，加载也就越快，响应也越迅速。无论是外链脚本还是内嵌脚本都是如此。
  • 采用无阻塞下载 JavaScript 脚本的方法：
  • 使用<script>标签的 defer 属性（仅适用于 IE 和 Firefox 3.5 以上版本）；
  • 使用动态创建的<script>元素来下载并执行代码；
  • 使用 XHR 对象下载 JavaScript 代码并注入页面中。

通过以上策略，可以在很大程度上提高那些需要使用大量 JavaScript 的 Web 网站和应用的实际性能。