阻塞特性

浏览器处理javascript主要分两部分：下载和执行

下载在某些浏览器是并行的，在某些浏览器是串行的。比如IE8，Firefox3，Chrome2都是串行下载的

默认情况下，所有浏览器都阻止执行，并且在执行js时，不会执行html解析等其他操作

阻塞特征：

Javascript有一个阻塞特性。当浏览器执行javascript代码时，它不能同时做其他任何事情。无论当前的javascript代码是嵌入的还是在外部链文件中，页面的下载和呈现都必须停止，等待脚本执行。下载和执行脚本时浏览器被阻塞的原因是脚本可能会改变页面或javascript的命名空间，从而影响后面页面的内容。

一、脚本位置

当浏览器遇到引入外部javascript文件的脚本标签时，它将停止所有下载、解析和执行它的工作。在这个过程中，页面渲染和用户交互被完全阻断。示例：

Html标题标题无标题文档/标题链接rel='样式表' type=' text/CSS ' href=' style . CSS '/script type=' text/JavaScript ' src=' file 1 . js '/script script type=' text/JavaScript ' src=' file 2 . js '/script script type=' text/JavaScript ' src=' file 3 . js '/script/body/head dy页面内容。/p/body/html

由于脚本的阻塞特性，在三个javascript文件都下载并执行之前，页面不会继续呈现。将脚本放在页面顶部会造成明显的延迟，通常会显示空白页，用户无法浏览内容或与页面交互。

Ie8，firefox 3.5，safari4，chrome2都允许并行下载javascript文件，但是下载过程中图片等资源的下载还是会被屏蔽。

由于脚本会阻止页面上其他资源的下载，建议尽可能将javasrcipt放在body标签的底部，以减少对整个页面下载的影响。

二、组织脚本

由于脚本标签会在下载时阻止页面的呈现，因此减少脚本标签的数量将有助于改善这种情况。建议将多个javascript文件合并成一个，这样可以降低性能消耗。同时，请求的数量可以减少。

参考：服务器端合并压缩javascript和CSS文件

三、无阻塞脚本

1、延迟脚本

HTML4为脚本标记定义了一个延迟属性，这可能会延迟这段代码的执行。但是这个属性只有IE4支持，所以不是理想的跨浏览器解决方案。在加载DOM和触发window.onload事件之前，将解析并执行声明延迟属性的脚本。

html head title script delay example/title/body/head body script delay alert(' delay ')；/scriptscript警报('脚本')；/script script window . onload=function(){ alert(' load ')；}/script/body/html

该代码在支持delay属性的浏览器中的弹出顺序是：script、delay、load；不支持延迟属性的浏览器会按照延迟、编写脚本和加载的顺序弹出。

2、动态脚本元素

script type=' text/JavaScript ' function Loadscript(URL，回调){ var script=document . CreateElement(' script ')script . type=' text/JavaScript '；if(script . readystate){//for ie script . onreadystatechange=function(){ if(script . readystate==' loaded ' | | script . readystate==' complete '){ script . onreadystatechange=null；callback()；} };} else {//other browser script . onload=function(){ callback()；};} script.src=urldocument . GetElementsBytagName(' head ')[0]。appendChild(脚本)；}/脚本

loadscript函数的用法

脚本类型=' text/JavaScript '//single file load script(' file 1 . js '，function () {alert ('loaded！'));});//多个文件loadscript ('file1.js '，function(){ load script(' file 2 . js '，function(){ load script(' file 3 . js '，function () {alert('所有文件已加载！'));});});});/script

这种技术的关键点是，无论何时开始下载，文件的下载和执行过程都不会阻塞页面上的其他进程，甚至可以将代码放在页面的头部区域，而不影响页面的其他部分(下载文件的http链接除外)。

3、XMLHttpRequest 脚本注入

这项技术将首先创建一个XHR对象，然后使用它下载javascript文件，最后创建动态脚本元素将代码注入页面。

脚本类型=' text/JavaScript ' var xhr=new XMlhttprequest()；xhr.open('get '，' file1.js '，true)；xhr . onreadystatechange=function(){ 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(脚本)；}};xhr . send(null)；/script

这种方法的优点是javascript代码可以直接下载，但不能立即执行。由于代码是在脚本标记之外返回的，所以下载后不会自动执行，这使得脚本可以推迟到您准备好之后执行。这种方法的限制是javascript文件必须和请求的页面在同一个域，这意味着javascript文件不能从cdn下载，所以不适合大型网站或项目。

四、推荐的无阻塞加载方式

1、YUI3的方式

2、LazyLoad（1.5k）

雅虎！搜索工程师瑞安格罗夫创建的一个通用延迟加载工具是loadScript()函数的增强版本。

用法示例：

script type=' text/JavaScript ' src=' lazy load-min . js '/script script type=' text/JavaScript ' lazy load . js(' the-reset . js '，function(){ application . init()；});/script

LazyLoad还支持多个javascript文件，这些文件可以在所有浏览器中以正确的顺序执行。要加载多个javscript文件，只需将一个url数组传递给LazyLoad.js()y方法：

script type=' text/JavaScript ' src=' lazy load-min . js '/script script type=' text/JavaScript ' lazy load . js([' first . js '，-the-reset . js ']，function(){ application . init()；});/script

项目地址：https://github.com/rgrove/lazyload

3、LABjs（4.7k）

LABjs是一个非阻塞加载工具，由凯尔辛普森实现，灵感来自史蒂夫索德。用法示例：

script type=' text/JavaScript ' src=' LAB . js '/script script type=' text/JavaScript ' $ LAB . script(' the-reset . js ')。wait(function(){ application . init()；});/script

$LAB.script()方法用于定义要下载的javascript文件，而$LAB.wait()用于指定文件下载并执行后要调用的函数。

要下载多个javscript文件，只需链式调用另一个$LAB.script()方法：

script type=' text/JavaScript ' src=' LAB . js '/script script type=' text/JavaScript ' $ LAB . script(' first . js ')。脚本('-reset.js ')。wait(function(){ application . init()；});/script

LABjs与众不同的地方在于它管理依赖关系的能力。一般来说，连续脚本标签是指文件被逐个下载并按顺序执行。

LABjs允许您使用wait()方法来指定哪些文件需要等待其他文件。在上面的例子中，first.js不能保证在-reset.js的代码之前执行。为了确保这一点，必须在个script()方法之后调用wait():

script type=' text/JavaScript ' src=' LAB . js '/script script type=' text/JavaScript ' $ LAB . script(' first . js ')。等待()。脚本('-reset.js ')。wait(function(){ application . init()；});/script

项目地址：http://labjs.com/

4、SeaJS（7.5k）

SeaJS是淘宝宇博开发的一个模块加载框架，遵循CommonJS规范，可以轻松愉快地加载任何javascript模块。详情请参考http://seajs.com/docs/

5、do 框架（3.5k）

Do是柯俊开发的轻量级Javascript开发框架。目前do.min.js其核心功能是组织和加载模块。加载采用并行异步队列策略，可以控制执行时间。Do可以随意替换核心类库。默认为jQuery。

项目地址：https://github.com/kejun/Do

6、RequireJS（13.1k）

项目地址：http://requirejs.org/