JavaScript无阻塞加载的多种实现方案与原理

JavaScript无阻塞加载概述

本文整理自《高性能JavaScript》的读书笔记，旨在探讨如何优化脚本加载策略。

基础加载原则

实现无阻塞加载主要遵循以下几个核心原则：

第一，将脚本标签放置在HTML文档的底部。

CSS样式表链接（<link>）仍应保留在<head>标签内，以确保在JavaScript加载之前，页面能够正常渲染显示。

而JavaScript脚本标签（<script>）则应放置在</body>闭合标签之前。

第二，对脚本进行成组管理。

由于每个<script>标签在下载过程中都会阻塞页面解析，因此限制页面中<script>标签的总数可以有效提升性能。这一策略同时适用于内联脚本和外部引用脚本。

非阻塞加载技术方案

第三，采用非阻塞方式加载脚本。

即等待页面完全加载完成后，再开始加载JavaScript代码。具体做法是在window.load事件触发后开始下载代码。

（1）使用defer属性：该特性支持IE4及以上版本以及Firefox 3.5及更高版本的浏览器。

代码示例：<script defer>...</script>

无论是内联脚本还是外部文件，均可使用此属性。

带有defer属性的<script>标签可以放置在文档的任何位置。对应的JavaScript文件会在该标签被解析时启动下载，但代码执行会被推迟，直到DOM加载完毕（即在onload事件句柄被调用之前）。这种方式实现了与其他页面资源的并行下载，从而提升加载效率。

动态脚本元素

（2）动态脚本元素技术。

文档对象模型（DOM）允许开发者使用JavaScript动态创建HTML文档中的几乎所有内容。

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

该技术的核心优势在于：无论在哪里启动下载，文件的下载和运行都不会阻塞其他页面处理过程。即使将代码放置在<head>标签内（除了用于下载文件的HTTP链接本身），也不会影响页面其他资源的加载。

YUI3加载方案

（3）YUI3库的加载方案。

其设计理念是通过一个极小的初始代码（种子文件）来下载其余的功能代码。首先引入该种子文件：

<script type="text/javascript src=//img.jbzj.com/file_images/article/201306/yuanma/combo.js></script>

这个种子文件的大小约为10KB。

使用方式如下：

YUI().use("dom",function(Y){
Y.Dom.addclass(...)
})

当所有依赖代码加载完毕时，回调函数将被调用，YUI实例作为参数传入，此时即可立即使用新下载的功能。

LazyLoad库方案

（4）LazyLoad库方案。

使用前需先引入lazyload-min.js文件。

具体用法示例：

LazyLoad.js("a.js",function(){
Appliction.init();
})

若需加载多个文件，可参考以下写法：

LazyLoad.js(["a.js","b.js"],function(){
Application.init();
})

LABjs库方案

（5）LABjs库方案。

使用前需先引入lab.js文件。

$LAB.script("a.js").wait(function(){
Application.init();
})

对于多个文件的加载，可采用链式写法。

其独特之处在于能够管理脚本之间的依赖关系。

可以通过wait()函数指定哪些文件应该等待其他文件加载完毕。

例如：确保b.js的代码不会在a.js之前运行。

$LAB.script("a.js").wait().script("b.js").wait(function(){
Application.init();
})

通过这种方式，虽然两个文件是并行下载的，但能保证a.js在b.js之前执行，从而正确处理依赖关系。