JavaScript无阻塞加载性能优化方案详解

JavaScript无阻塞加载性能优化方案：从基础到高级

JavaScript在浏览器环境中的执行效率，是前端开发者必须优先解决的核心可用性问题之一。

在Yahoo提出的Yslow23条性能优化规则中，有一条明确指出应将JavaScript代码放置在HTML文档的底部。其根本原因在于，大多数浏览器采用单线程模型来处理用户界面更新与JavaScript执行任务，这意味着在同一时刻只能执行单一任务。因此，JavaScript代码执行耗时越长，浏览器在空闲下来响应用户交互之前的等待时间也就越久。

JavaScript无阻塞加载性能优化方案：从基础到高级

从基本原理来看，<script>标签的出现会导致整个页面因脚本的解析和执行而陷入等待状态。无论JavaScript代码是内联嵌入还是引用自外部文件，页面的下载与解析过程都必须暂停，直到脚本处理完毕才能继续。这是页面生命周期中不可或缺的一环，因为脚本可能在运行过程中修改页面内容。典型的例子包括使用document.write()函数进行页面写入的操作。

代码示例如下：

<html>
<head>
<title>Script Example</title>
</head>
   
<body>
<p>
<script type="text/javascript">
document.write("The date is " + (new Date()).toDateString());
</script>
</p>
</body>
</html>

当浏览器解析到上述HTML页面中的<script>标签时，由于无法预知JavaScript代码是否会在<p>标签内添加内容，浏览器会暂停当前动作，执行JavaScript代码，随后再继续解析和渲染页面。这一过程在使用src属性加载外部JavaScript文件时同样适用。浏览器必须先下载外部文件代码，这需要耗费一定时间，接着解析并运行代码。在此过程中，页面解析和用户交互均处于完全阻塞状态。

鉴于脚本会阻塞其他页面资源的下载，推荐的优化策略是：将所有<script>标签放置在尽可能接近<body>标签底部的位置，以最大程度减少对整体页面下载速度的影响。例如，可以参考以下代码结构：

代码示例如下：

<html>
<head>
<title>Script Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
   
<body>
<p>Hello world!</p>
<!-- Example of recommended script positioning -->
<script type="text/javascript" src="file1.js"></script>
<script type="text/javascript" src="file2.js"></script>
<script type="text/javascript" src="file3.js"></script>
</body>
</html>

上述代码展示了推荐的<script>标签在HTML文件中的最佳位置。尽管脚本之间的下载存在相互阻塞的情况，但页面主体内容已经下载完成并展示给用户，从而提升了页面的进入速度，避免了明显的加载延迟。这正是前文提到的将JavaScript放置在页面底部的核心优势。

此外，Yahoo为其“Yahoo!用户接口(YUI)”库创建了一种“联合句柄”机制，通过其“内容投递网络(CDN)”实现。任何网站都可以使用一个“联合句柄”URL来指定包含YUI文件包中的哪些文件。例如，以下URL包含了两个文件：

代码示例如下：

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo/yahoo-min.js&2.7.0/build/event/event-min.js"></script>

该URL调用了2.7.0版本的yahoo-min.js和event-min.js文件。尽管这些文件在服务器上独立存在，但当服务器接收到此URL请求时，会将两个文件合并后一次性返回给客户端。通过这种方式，无需使用多个<script>标签（每个标签加载一个文件），仅需一个<script>标签即可完成加载。这是在HTML页面中包含多个外部JavaScript文件的最佳实践之一。

非阻塞脚本技术

非阻塞脚本(Noblocking Scripts)

上述策略是页面初始状态包含多个JavaScript脚本加载的最佳方法。JavaScript倾向于阻塞浏览器的某些处理过程，如HTTP请求和界面刷新，这是开发者面临的最显著性能问题。保持JavaScript文件短小并限制HTTP请求数量，仅是创建反应迅速网页应用的第一步。

然而，对于拥有大量JavaScript代码的大型网页而言，保持源码短小并不总是最佳选择。因此，非阻塞脚本技术应运而生。我们需要一种能够逐步向页面添加JavaScript的方法，在某种程度上避免阻塞浏览器的正常运行。

非阻塞脚本的关键在于，等待页面完成加载后再加载JavaScript源码，这意味着在window的load事件发出之后才开始下载代码。

延期脚本

延期脚本(Deferred Scripts)

HTML4为<script>标签定义了一个扩展属性：defer。

这个defer属性指明元素中所包含的脚本不打算修改DOM，因此代码可以稍后执行。defer属性只被Internet Explorer 4+和Firefox 3.5+支持，它不是一个理想的跨浏览器解决方案。在其他浏览器上，defer属性将被忽略。所以，<script>标签会按照正常默认方式处理，即会造成阻塞。如果得到各个主流浏览器的支持，这仍是一种有效的解决方式。

代码示例如下：

<script type="text/javascript" src="file1.js" defer></script>

一个带有defer属性的<script>标签可以放置在文档的任何位置，它会在被解析时启动下载，直到DOM加载完成（在onload事件句柄被调用之前）。当一个defer的JavaScript文件被下载时，它不会阻塞浏览器的其他处理过程，所以这些文件可以与其他资源一起并行下载。

可以使用下述代码测试浏览器是否支持defer属性：

代码示例如下：

<html>
<head>
<title>Script Defer Example</title>
</head>
 
<body>
<script defer> alert("defer");</script>
<script> alert("script"); </script>
<script> window.onload = function(){ alert("load");}; </script>
</body>
</html>

如果浏览器不支持defer，那么弹出的对话框的顺序是“defer”，“script”，“load”。

如果浏览器支持defer，那么弹出的对话框的顺序是“script”，“load”，“defer”。

动态脚本元素

动态脚本元素(Dynamic Script Elements)

DOM允许我们使用JavaScript动态创建HTML的几乎所有文档内容，一个新的<script>元素可以非常容易地通过标准DOM创建：

代码示例如下：

1 var script = document.createElement ("script");
2 script.type = "text/javascript";
3 script.src = "file1.js";
4 document.body.appendChild(script);

新的<script>元素加载file1.js源文件。此文件当元素添加到页面后立刻开始下载。此技术的重点在于：无论在何处启动下载，文件的下载和运行都不会阻塞其他页面处理过程。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（除了Firefox和Opera，它们将等待此前的所有动态脚本节点执行完毕）。

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

代码示例如下：

function loadScript(url, callback){
var script = document.createElement ("script") ;
script.type = "text/javascript";
      
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
           }
        };
      } 
} else { //Others
script.onload = function(){ callback();
      }; 
    }
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
  }
 
loadScript("file1.js", function(){ //调用
alert("File is loaded!");
 });

此函数接受两个参数：JavaScript文件的Url和一个当JavaScript接收完成时触发的回调函数。属性检查用于决定监视哪种事件。最后一步src属性，并将JavaScript文件添加到head。

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

XMLHttpRequest脚本注入

XMLHttpRequest脚本注入(XHR Script Injection)

另一个以非阻塞方式获得脚本的方法是使用XMLHttpRequest(XHR)对象将脚本注入到页面中。此技术首先创建一个XHR对象，然后下载JavaScript文件，接着用一个动态<script>元素将JavaScript代码注入页面。看demo：

代码示例如下：

var xhr = new XMLHttpRequest();
xhr.open("get", "file1.js", true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ // 检查http状态码
var script = document.createElement("script");
script.type = "text/javascript";
script.text = xhr.responseText;
document.body.appendChild(script);
       } 
    }
 }; 
xhr.send(null);

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

此方法的优点是兼容性佳，且你可以下载不立即执行的JavaScript代码。由于代码返回在<script>标签之外，它下载后不会自动执行，这使得你可以推迟执行。

此方法的缺点是受到浏览器同源限制，JavaScript文件必须与页面放置在同一个域内，不能从CDN(内容分发网络Content Delivery Network)下载。正因为这个原因，大型网页通常不采用XHR脚本注入技术。

推荐的非阻塞模式

推荐的非阻塞模式(Recommended Noblocking Pattern)

推荐的向页面加载大量JavaScript的方法分为两个步骤：

第一步，包含动态加载JavaScript所需的代码，然后加载页面初始化所需的除了JavaScript之外的部分。这部分代码尽量小，可能只包含loadScript()函数，它的下载和运行非常迅速，不会对页面造成很大干扰。

第二步，当初始代码准备好之后，用它来加载其余的JavaScript。

例如：

代码示例如下：

1 <script type="text/javascript" src="loader.js">
2 </script> <script type="text/javascript">
3 loadScript("the-rest.js", function(){
4 Application.init();
5 });
6
7 </script>

将此代码放置在body的关闭标签</body>之前。这样做的好处是，首先，这样确保JavaScript运行不会影响其他页面的其他部分显示。其次，当第二部分JavaScript文件完成下载，所有应用程序所必须的DOM已经创建完毕，并做好被访问的准备，避免使用额外的事件处理（如window.onload）来得知页面是否已经准备好了。

另一个选择是直接将loadScript()函数嵌入在页面中，这可以减少一个http请求的开销。例如：

代码示例如下：

1 <script type="text/javascript">
function loadScript(url, callback){
var script = document.createElement ("script");
script.type = "text/javascript";
    
if (script.readyState){ //IE script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
       } 
     };
} else { //Others
script.onload = function(){
callback();
    };
   }
script.src = url;
document.getElementsByTagName("head")[0].appendChild(script);
 }
 
loadScript("the-rest.js", function(){
Application.init();
 });
</script>

一旦页面初始化代码下载完成，还可以使用loadScript()函数加载页面所需的额外功能函数。

介绍一个通用的工具，Yahoo! Search的Ryan Grove创建了LazyLoad库（参见：http://github.com/rgrove/lazyload/ ）。LazyLoad是一个强大的loadScript()函数。LazyLoad精缩之后只有大约1.5KB。用法举例如下：

代码示例如下：

<script type="text/javascript" src="lazyload-min.js"></script>
<script type="text/javascript">
LazyLoad.js("the-rest.js", function(){
Application.init();
 　　}); 
</script>

总结(Summary)

1.将所有<script>标签放置在页面底部，紧靠关闭标签</body>的上方。此方法可以保证页面在脚本运行之前完成解析。

2.将脚本成组打包。页面的<script>标签越少，页面的加载速度就越快，响应也更迅速。不论外部脚本文件还是内联代码都是如此。

3.有几种方法可以使用非阻塞方式下载JavaScript：

1).为<script>标签添加defer属性 2）.动态创建<script>元素，用它下载并执行代码 3）.用XHR对象下载代码，并注入到页面

通过上述策略，可以极大提高那些使用JavaScript代码的网友应用的实际性能。

参考书籍《高性能JavaScript》。

JavaScript无阻塞加载性能优化方案：从基础到高级

JavaScript无阻塞加载性能优化方案：从基础到高级

非阻塞脚本技术

延期脚本

动态脚本元素

XMLHttpRequest脚本注入

推荐的非阻塞模式

实用工具推荐