首先，引用脚本必须用到<script>标签，咱们须要了解<script>标签的特性，引述书中做者原话：css
当浏览器遇到（内嵌）<script>标签时，当前浏览器无从获知Javascript是否会修改页面内容。所以，这时浏览器会中止处理页面，先执行Javascript代码，而后再继续解析和渲染页面。一样的状况也发生在使用 src 属性加在Javascript的过程当中（即外链 Javascript ），浏览器必须先花时间下载外链文件中的代码，而后解析并执行它。在这个过程当中，页面渲染和用户交互彻底被阻塞了。html
经过上述描述，可知：每当浏览器解析到<script>标签（不管内嵌仍是外链）时，浏览器都会优先下载、解析并执行该标签中的Javascript代码，而阻塞了其后全部页面内容的下载和渲染。java
下面为四种引用脚本的方式：数组
1. 惯例的作法：在head标签内插入<script>标签
然而这种常规的作法却隐藏着严重的性能问题。根据上述对<script>标签特性的描述，咱们知道，在该示例中，当浏览器解析到<script>标签（第4行）时，浏览器会中止解析其后的内容，而优先下载脚本文件，并执行其中的代码，这意味着，其后的“样式文件”和“<body>标签”都没法被加载，因为<body>标签没法被加载，那么页面天然就没法渲染了。所以在该javascript代码彻底执行完以前，页面都是一片空白。浏览器
注意：app
（1）页面的渲染和javascript代码的执行是一块儿显示出来的。这说明页面最开始出现的空白正是因为javascript文件阻塞特性引发的（为了突出这一现象，可外链了几个较大的js库)。这是由于若是javascript文件没有阻塞页面渲染的话，页面的渲染通常会先于javascript文件的加载（通常来讲页面所须要的的css样式文件和html文件的体积会远远小于javascript文件，若是没有被阻塞，它们会先于javascript文件下载好，而后当即被浏览器解析出来）。函数
（2）图片的加载是在 javascript 执行以后才开始的，即javascript阻塞了图片的加载。性能
2. 经典的作法
既然<script>标签会阻塞其后内容的加载，那么将<script>标签放到全部页面内容以后不就能够避免这种糟糕的情况了吗？ui
将全部的<script>标签尽量地放到<body>标签底部（body后面），以尽可能避免对页面其他部分下载的影响。
此时页面渲染先于脚本文件的执行，说明脚本文件再也不阻塞页面渲染了（包括css文件和img等文件的下载） 然而做者在后面又介绍了另外一种方式——动态加载脚本。起初我不太明白，把脚本放到<body>底部就行了，为何还须要动态脚本？多翻了几次书才发现原来本身忽略了做者的一段话：
(将脚本放到<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插件。