手记

JavaScript优化篇7-Recommended Nonblocking Pattern

Recommended Nonblocking Pattern 推荐的非阻塞模式

推荐的向页面加载大量JavaScript 的方法分为两个步骤:第一步,包含动态加载JavaScript 所需的代码,然后加载页面初始化所需的除JavaScript 之外的部分。这部分代码尽量小,可能只包含loadScript()函数,它下载和运行非常迅速,不会对页面造成很大干扰。当初始代码准备好之后,用它来加载其余的JavaScript。

例如:

<script type=”text/javascript” src=”loader.js”></script>

<script type=”text/javascript”>

loadScript(“the-rest.js”, function(){

Application.init();

});

</script>

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

来得知页面是否已经准备好了。

另一个选择是直接将loadScript()函数嵌入在页面中,这可以避免另一次HTTP 请求。例如:

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_r(“head”)[0].appendChild(script);

}

loadScript(“the-rest.js”, function(){

Application.init();

});

</script>

如果你决定使用这种方法,建议你使用“YUI Compressor”或者类似的工具将初始化脚本缩小到最小字节尺寸。

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

The YUI 3 approach

YUI 3 的核心设计理念为:用一个很小的初始代码,下载其余的功能代码。要在页面上使用YUI 3,首先包含YUI 的种子文件:

<script type=”text/javascript”

src=http://yui.yahooapis.com/combo?3.0.0/build/yui/yui-min.js></script>

此种子文件大约10KB(gzipped 压缩后6KB)包含从Yahoo! CDN 下载YUI 组件所需的足够功能。举例来说,如果你想使用DOM 功能,你可以指出它的名字(”dom”),传递给YUI 的use()函数,再提供一个回调函数,当代码准备好时这个回调函数将被调用:

YUI().use(“dom”, function(Y){

Y.DOM.addClass(docment.body, “loaded”);

});

这个例子创建了一个新的YUI 实例,然后调用use()函数。种子文件拥有关于文件名和依赖关系的所有

信息,所以指定“dom”实际上建立了一个由正确的依赖文件所组成的“联合句柄”URL,并创建一个动态脚本元素下载并执行这些文件。当所有代码可用时,回调函数被调用,YUI 实例将作为参数传入,使你可以立即使用新下载的功能。

The LazyLoad library

作为一个更通用的工具,Yahoo! Search 的Ryan Grove 创建了LazyLoad 库(参见

http://github.com/rgrove/lazyload/)。LazyLoad 是一个更强大的loadScript()函数。LazyLoad 精缩之后只有大约1.5KB(精缩,而不是用gzip 压缩的)。用法举例如下:

<script type=”text/javascript” src=”lazyload-min.js”></script>

<script type=”text/javascript”>

LazyLoad.js(“the-rest.js”, function(){

Application.init();

});

</script>

LazyLoad 还可以下载多个JavaScript 文件,并保证它们在所有浏览器上都能够按照正确的顺序执行。要加载多个JavaScript 文件,只要调用LazyLoad.js()函数并传递一个URL 队列给它:

<script type=”text/javascript” src=”lazyload-min.js”></script>

<script type=”text/javascript”>

LazyLoad.js([“first-file.js”, “the-rest.js”], function(){

Application.init();

});

</script>

即使这些文件是在一个非阻塞的方式下使用动态脚本加载,它建议应尽可能减少文件数量。每次下载仍然是一个单独的HTTP 请求,回调函数直到所有文件下载并执行完之后才会运行。

The LABjs library

另一个非阻塞JavaScript 加载库是LABjs(http://labjs.com/),Kyle Simpson 写的一个开源库,由SteveSouders 赞助。此库对加载过程进行更精细的控制,并尝试并行下载尽可能多的代码。LABjs 也相当小,只有4.50KB(精缩,而不是用gzip 压缩的),所以具有最小的页面代码尺寸。用法举例:

<script type=”text/javascript” src=”lab.js”></script>

<script type=”text/javascript”>

$LAB.script(“the-rest.js”)

.wait(function(){

Application.init();

});

</script>

$LAB.script()函数用于下载一个JavaScript 文件,$LAB.wait()函数用于指出一个函数,该函数等待文件下载完成并运行之后才会被调用。LABjs 鼓励链操作,每个函数返回一个指向$LAB 对象的引用。要下载多个JavaScript 文件,那么就链入另一个$LAB.script()调用,如下:

<script type=”text/javascript” src=”lab.js”></script>

<script type=”text/javascript”>

$LAB.script(“first-file.js”)

.script(“the-rest.js”)

.wait(function(){

Application.init();

});

</script>

LABjs 的独特之处在于它能够管理依赖关系。一般来说<script>标签意味着每个文件下载(或按顺序,或并行,如前所述),然后按顺序执行。在某些情况下这非常必要,但有时未必。

LABjs 通过wait()函数允许你指定哪些文件应该等待其他文件。在前面的例子中,first-file.js 的代码不保证在the-rest.js 之前运行。为保证这一点,你必须在第一个script()函数之后添加一个wait()调用:

<script type=”text/javascript” src=”lab.js”></script>

<script type=”text/javascript”>

$LAB.script(“first-file.js”).wait()

.script(“the-rest.js”)

.wait(function(){

Application.init();

});

</script>
本文出自慕课网,转载请注明出处,侵权必究。
14人推荐
随时随地看视频
慕课网APP

热门评论

小苹果,你喜欢彭于晏呀?

查看全部评论