Javascript 文件(下面简称脚本文件)需要被HTML文件引用才能在浏览器中运行。在HTML文件中可以通过不同的方式来引用脚本文件,我们需要关注的是,这些方式的具体实现和这些方式可能会带来的性能问题。

首先,引用脚本必须用到<script>标签,我们需要了解<script>标签的特性,引述书中作者原话:

通过上述描述,可知:每当浏览器解析到<script>标签(无论内嵌还是外链)时,浏览器都会优先下载、解析并执行该标签中的Javascript代码,而阻塞了其后所有页面内容的下载和渲染。

  下面为四种引用脚本的方式:

  1. 惯例的做法:在head标签内插入<script>标签

然而这种常规的做法却隐藏着严重的性能问题。根据上述对<script>标签特性的描述,我们知道,在该示例中,当浏览器解析到<script>标签(第4行)时,浏览器会停止解析其后的内容,而优先下载脚本文件,并执行其中的代码,这意味着,其后的“样式文件”和“<body>标签”都无法被加载,由于<body>标签无法被加载,那么页面自然就无法渲染了。因此在该javascript代码完全执行完之前,页面都是一片空白。

  注意:

  (1)页面的渲染和javascript代码的执行是一起显示出来的。这说明页面最开始出现的空白正是由于javascript文件阻塞特性引起的(为了突出这一现象,可外链了几个较大的js库)。这是因为如果javascript文件没有阻塞页面渲染的话,页面的渲染一般会先于javascript文件的加载(一般来说页面所需要的的css样式文件和html文件的体积会远远小于javascript文件,如果没有被阻塞,它们会先于javascript文件下载好,然后立即被浏览器解析出来)。

  (2)图片的加载是在 javascript 执行之后才开始的,即javascript阻塞了图片的加载。

  2. 经典的做法

既然<script>标签会阻塞其后内容的加载,那么将<script>标签放到所有页面内容之后不就可以避免这种糟糕的状况了吗?

将所有的<script>标签尽可能地放到<body>标签底部(body后面),以尽量避免对页面其余部分下载的影响。

  此时页面渲染先于脚本文件的执行,说明脚本文件不再阻塞页面渲染了(包括css文件和img等文件的下载) 然而作者在后面又介绍了另一种方式——动态加载脚本。起初我不太明白,把脚本放到<body>底部就好了,为什么还需要动态脚本?多翻了几回书才发现原来自己忽略了作者的一段话:

即是说,虽然在IE8+浏览器上已经实现了脚本并行下载,但在某些浏览器中(即使脚本文件放到了<body>标签底部),页面中脚本仍是一个接着一个加载的。既是,浏览器先加载完file1,再去加载file2,最后才轮到file3。虽然此时脚本已经不影响其他页面内容了,但我们也同样希望脚本之间实现并行下载(即同时开始下载),于是下面给出动态加载脚本的方法来实现这一想法。

  3. 动态脚本

通过文档对象模型(DOM),我们可以几乎可以页面任意地方创建<script>标签:

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

上述代码动态创建了一个外链file1的<script>标签,并将其添加到<head>标签内。这种技术的重点在于:

然而这种方法也是有缺陷的。这种方法加载的脚本会在下载完成后立即执行,那么意味着多个脚本之间的运行顺序是无法保证的(除了Firefox和Opera)。当某个脚本对另一个脚本有依赖关系时,就很可能发生错误了。

比如,写一个jQuery代码,需要引入jQuery库,然而你写的jQuery代码文件很可能会先完成下载并立即执行,这时浏览器会报错——‘jQuery未定义’之类的,因为此时jQuery库还未下载完成。于是做出以下改进:

<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
{
//其他浏览器
script.onload=function(){
callback(); };
}
script.src=url;
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>

上述代码改进的地方就是增加了一个回调函数,该函数会在相应脚本文件加载完成后被调用。这样便可以实现顺序加载了,写法如下(假设file2依赖file1,file1和file3相互独立):

<script type="text/javascript">
loadScript('file1.js',function(){
  loadScript('file2.js',function(){});
});
loadScript('file3.js',function(){});
</script>

file2会在file1加载完后才开始加载,保证了在file2执行前file1已经准备妥当。而file1和file3是并行下载的,互不影响。 虽然loadScript函数已经足够好,但还是有些不尽人意的地方——通过分析这段代码,我们知道,loadScript函数中的顺序加载是以脚本的阻塞加载来实现的。而我们真正想实现的是——脚本同步下载并按相应顺序执行,即并行加载并顺序执行。这样不会造成页面堵塞,但会造成另外一个问题:这样加载的Javascript文件,不在原始的DOM结构之中,因此在DOM-ready(DOMContentLoaded)事件和window.onload事件中指定的回调函数对它无效。

  4. LABjs库

LABjs库能帮我们真正地实现“并行加载与顺序执行”:

举一个最简单的例子,来说明这两个函数库的基本用法。更高级的用法,请参阅它们的文档。

    <script src="script1.js"></script>
<script src="script2-a.js"></script>
<script src="script2-b.js"></script>
<script type="text/javascript">
initScript1();
initScript2();
</script>
<script src="script3.js"></script>
<script type="text/javascript">
initScript3();
</script>

  上面这段代码,将依次加载4个javascript文件:script1.js、script2-a.js、script2-b.js和script3.js。在加载完前三个文件后,运行两个函数initScript1()和initScript2();加载完第四个文件后,再运行函数initScript3()。

下面,用LABjs对其进行改写:

    <script src="LAB.js"></script>
<script type="text/javascript">
    $LAB
     .script("script1.js").wait()
     .script("script2-a.js")
     .script("script2-b.js")
     .wait(function(){
       initScript1();
       initScript2();
     })
     .script("script3.js")
     .wait(function(){
       initScript3();
     });
</script>

  首先,$LAB对象替代了<script>标签,然后.script()方法表示加载Javascript文件,不带参数的.wait()方法表示立即运行刚才加载的Javascript文件,带参数的.wait()方法也是立即运行刚才加载的Javascript文件,但是还运行参数中指定的函数。

这里需要注意的是,可以同时运行多条$LAB链,但是它们之间是完全独立的,不存在次序关系。如果你要确保一个Javascript文件在另一个文件之后运行,你只能把它们写在同一个链操作之中。只有当某些脚本是完全无关的时候,你才应该考虑把它们分成不同的$LAB链,表示它们之间不存在相关关系。

接下来是requireJS的改写:

    <script src="require.js"></script>
<script type="text/javascript">
    require(["script1.js", "script2-a.js", "script2-b.js","script3.js"],function(){initScript1(); initScript2();initScript3();});
</script>

  require()接受两个参数,第一个数组表示所要加载的Javascript文件,第二个是加载完成后所要运行的回调函数。原生的require()不支持按次序加载,所以四个Javascript文件到底先加载哪个,无法事前知道,require()只保证这四个文件全部加载完成之后,才会运行所指定的回调函数。

如果按次序加载对你很重要,你可以使用官方提供的order插件。

05-11 14:05