JavaScript 提高加载和执行效率的方法

前言

JavaScript 脚本阻塞机制

无论 JavaScript 代码是内嵌在 HTML 中还是通过外链文件引入，浏览器的下载和渲染进程都必须暂停，直到脚本执行完毕。脚本执行耗时越长，浏览器响应用户交互的延迟就越高。造成这一阻塞的根本原因在于，脚本可能修改页面 DOM 结构或 JavaScript 命名空间，从而对后续页面内容的解析产生影响。

一个典型的例子就是在页面中使用document.write() 。

JavaScript 代码内嵌示例

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

当浏览器解析到 <script> 标签时，由于无法预知 JavaScript 是否会向 <p> 标签添加内容、引入新元素或移除现有标签，浏览器会暂停页面处理，优先执行 JavaScript 代码，随后再继续解析和渲染页面。使用 src 属性加载外链脚本时同样如此，浏览器需先下载外链文件，再解析执行，此期间页面渲染和用户交互完全被阻塞。

脚本放置位置优化

脚本位置

HTML 4 规范允许 <script> 标签置于 <head> 或 <body> 中，且可出现多次。Web 开发人员通常习惯在 <head> 中加载外链 JavaScript，并配合 <link> 标签加载 CSS 或其他页面资源。

低效率脚本位置示例

<html> 
<head> 
 <title>Source Example</title> 
 <script type="text/javascript" src="script1.js"></script> 
 <script type="text/javascript" src="script2.js"></script> 
 <script type="text/javascript" src="script3.js"></script> 
 <link rel="stylesheet" type="text/css" href="styles.css"> 
</head> 
<body> 
 <p>Hello world!</p> 
</body> 
</html>

然而，这种常规做法存在严重的性能隐患。如清单 2 示例所示，当浏览器解析到第 4 行的 <script> 标签时，会停止解析后续内容，优先下载并执行脚本。这意味着 styles.css 样式文件和 <body> 标签均无法加载，导致页面无法渲染，在 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> 标签在 HTML 文档中的推荐位置。尽管脚本下载会阻塞其他脚本，但页面主体内容已下载并展示给用户，因此页面加载速度不会显得过慢。这是优化 JavaScript 的首要原则：将脚本置于页面底部。

脚本组织与合并

组织脚本

由于每个 <script> 标签在初始下载时都会阻塞页面渲染，减少页面中 <script> 标签的数量有助于改善这一状况。这不仅适用于外链脚本，内嵌脚本的数量也需限制。浏览器每遇到一个 <script> 标签，执行脚本都会带来一定延时，最小化这一延时将显著改善页面总体性能。

处理外链 JavaScript 文件时，需考虑 HTTP 请求带来的额外性能开销。下载单个 100Kb 的文件比下载 5 个 20Kb 的文件更快，即减少页面中外链脚本的数量有助于提升性能。

大型网站或应用通常依赖多个 JavaScript 文件。可将多个文件合并为一个，仅需引用一个 <script> 标签即可减少性能消耗。文件合并工作可通过离线打包工具或实时在线服务完成。

需特别注意，将内嵌脚本置于引用外链样式表的 <link> 标签之后，会导致页面阻塞以等待样式表下载，这是为了确保内嵌脚本执行时能获取精确的样式信息。因此，建议避免将内嵌脚本紧跟在 <link> 标签后。

无阻塞脚本加载技术

无阻塞的脚本

在功能丰富的 Web 应用或大型网站上，仅减少 JavaScript 文件大小和限制 HTTP 请求数往往不可行。Web 应用功能越丰富，所需 JavaScript 代码越多。尽管下载单个较大的 JavaScript 文件仅产生一次 HTTP 请求，却会占用浏览器大量时间。为避免此情况，需通过特定技术逐步加载 JavaScript 文件，从而在一定程度上避免阻塞浏览器。

无阻塞脚本的核心在于页面加载完成后再加载 JavaScript 代码，即在 window 对象的 onload 事件触发后再下载脚本。实现这一效果有多种方式。

defer 属性延迟加载

延迟加载脚本

HTML 4 为 <script> 标签定义了 defer 扩展属性。Defer 属性表明脚本不会修改 DOM，因此代码可安全延迟执行。该属性仅被 IE 4 和 Firefox 3.5 及以上版本支持，故非理想的跨浏览器解决方案。在不支持该属性的浏览器中，defer 属性会被忽略，<script> 标签按默认方式处理，即造成阻塞。但若目标浏览器支持，这仍是一个有用的解决方案。

defer 属性使用方法示例

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

带有 defer 属性的 <script> 标签可置于文档任意位置。对应的 JavaScript 文件在页面解析到该标签时开始下载，但不执行，直到 DOM 加载完成（即 onload 事件触发前）才执行。带有 defer 属性的 JavaScript 文件下载时不阻塞浏览器其他进程，因此可与其他资源并行下载。

任何带有 defer 属性的 <script> 元素在 DOM 完成加载前均不执行，无论内嵌或外链脚本皆然。清单 5 示例展示了 defer 属性如何影响脚本行为：

defer 属性对脚本行为的影响

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

该代码在页面处理过程中弹出三次对话框。不支持 defer 属性的浏览器弹出顺序为：“defer”、“script”、“load”。而在支持 defer 属性的浏览器上，弹出顺序为：“script”、“defer”、“load”。需注意，带有 defer 属性的 <script> 元素并非紧随第二个脚本后执行，而是在 onload 事件触发前被调用。

若目标浏览器仅限 Internet Explorer 和 Firefox 3.5，defer 脚本确实有用。若需支持跨领域的多种浏览器，则需更一致的实现方式。

async 属性异步加载

HTML 5 为 <script> 标签定义了新的扩展属性：async。其作用与 defer 类似，能异步加载和执行脚本，不阻塞页面加载。但需注意，有 async 属性时，JavaScript 脚本一旦下载完成即执行，因此可能不按原定顺序执行。若 JavaScript 脚本存在前后依赖，使用 async 可能导致错误。

动态脚本元素加载

动态脚本元素

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

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

var script = document.createElement ("script"); 
 script.type = "text/javascript"; 
 script.src = "script1.js"; 
 document.getElementsByTagName("head")[0].appendChild(script);

新的 <script> 元素加载 script1.js 源文件。该文件在元素添加到页面后即刻开始下载。此技术的重点在于：无论何处启动下载，文件的下载和运行均不阻塞其他页面处理过程。即使将这些代码置于 <head> 部分，也不会影响其余页面代码（仅占用用于下载文件的 HTTP 连接）。

当文件使用动态脚本节点下载时，返回的代码通常立即执行（Firefox 和 Opera 除外，它们会等待此前所有动态脚本节点执行完毕）。对于“自运行”类型的脚本，这一机制运行正常；但若脚本仅包含供其他脚本调用的接口，则会带来问题。此时，需跟踪脚本下载完成并确认其是否准备就绪。可使用动态 <script> 节点发出事件以获取相关信息。

Firefox、Opera、Chrome 和 Safari 3+ 会在 <script> 节点接收完成后发出 onload 事件。可监听该事件以获取脚本准备好的通知：

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

var script = document.createElement ("script") 
script.type = "text/javascript"; 
 
//Firefox, Opera, Chrome, Safari 3+ 
script.onload = function(){ 
 alert("Script loaded!"); 
}; 
 
script.src = "script1.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

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

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

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

var script = document.createElement("script") 
script.type = "text/javascript"; 
 
//Internet Explorer 
script.onreadystatechange = function(){ 
 if (script.readyState == "loaded" || script.readyState == "complete"){ 
 script.onreadystatechange = null; 
 alert("Script loaded."); 
 } 
}; 
 
script.src = "script1.js"; 
document.getElementsByTagName("head")[0].appendChild(script);

大多数情况下，您希望调用一个函数即可实现 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); 
}

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

loadScript()函数使用方法

loadScript("script1.js", function(){ 
 alert("File is loaded!"); 
});

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

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

loadScript("script1.js", function(){ 
 loadScript("script2.js", function(){ 
 loadScript("script3.js", function(){ 
 alert("All files are loaded!"); 
 }); 
 }); 
});

该代码等待 script1.js 可用后开始加载 script2.js，待 script2.js 可用后开始加载 script3.js。虽然此方法可行，但若需下载和执行的文件很多，则较为繁琐。若多个文件次序至关重要，更好的办法是将这些文件按正确次序连接成一个文件。独立文件可一次性下载所有代码（由于这是异步进行的，使用一个大文件并无损失）。

动态脚本加载是无阻塞 JavaScript 下载中最常用的模式，因其跨浏览器且简单易用。

XHR 对象注入脚本

使用 XMLHttpRequest(XHR)对象

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

通过 XHR 对象加载 JavaScript 脚本

var xhr = new XMLHttpRequest(); 
xhr.open("get", "script1.js", true); 
xhr.onreadystatechange = function(){ 
 if (xhr.readyState == 4){ 
 if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304){ 
 var script = document.createElement ("script"); 
 script.type = "text/javascript"; 
 script.text = xhr.responseText; 
 document.body.appendChild(script); 
 } 
 } 
}; 
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 对性能的影响有以下几种方法：

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

补充js加载函数：

function loadJs(url, callback, charset) { 
 var head = document.getElementsByTagName("head")[0]; 
 var script = document.createElement("script"); 
 if ( !!charset) script.charset = "utf-8"; 
 script.src = url; 
 script.onload = script.onreadystatechange = function() { 
 var f = script.readyState; 
 if (f && f != "loaded" && f != "complete") return; 
 script.onload = script.onreadystatechange = null; 
 head.removeChild(script) if (callback) { 
 callback() || callback 
 }; 
 }; 
 head.appendChild(script); 
}

// js同步加载 
function getScripts(i, linkArray, fn) { 
 env || getEnv(); 
 var script = document.createElement('script'); 
 script.type = 'text/javascript'; 
 script.src = linkArray[i]; 
 var head = document.head || document.getElementsByTagName('head')[0]; 
 head.appendChild(script); 
 
 if (env.ie && 'onreadystatechange' in script && !('draggable' in script)){ //ie浏览器使用以下方式加载 
 script.onreadystatechange = function () { 
 if (/loaded|complete/.test(script.readyState)) { 
 script.onreadystatechange = null; 
 if(i === linkArray.length-1) { 
 if (fn) { 
  fn(); 
 } 
 } else { 
 getScripts(++i, linkArray, fn); 
 } 
 } 
 }; 
 }else{ 
 script.onload = function() { 
 if(i === linkArray.length-1) { 
 if (fn) { 
  fn(); 
 } 
 } else { 
 getScripts(++i, linkArray, fn); 
 } 
 }; 
 } 
}

// js存在依赖关系 依次加载 
getScripts(0, [ 
 'http://caibaojian.com/demo/base.js', 
 'http://caibaojian.com/demo/reset.js'], function() { 
 alert('callback'); 
});

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。