javascript脚本阻塞与模块化加载

javascript脚本执行过程中会中断页面加载,直到脚本执行完毕,此操作阻塞了页面加载,造成性能问题。

——《高性能javascript》

脚本位置和加载顺序:

如果将脚本放在head内,那么再脚本执行完毕之前,显示给用户的始终是一片空白,用户只能傻傻的看着屏幕等待脚本执行完毕。

而且,如果页面引入多个脚本,那么后面的脚本文件必须等待前面的脚本文件下载完毕并且执行完毕之后才能开始下载并运行。不过ie8,ff,safari,chrome已经允许脚本文件可以同时下载,不过尽管如此,javascript脚本仍然会阻塞其他脚本下载进程,页面仍旧要等待所有javascript脚本下载并执行完毕之后才可以开始加载渲染。

因此,尽可能的将脚本文件放置在body标签的底部,以减少脚本阻塞对页面性能的影响,这也是yahoo性能优化的第一条定律。

成组脚本加载:

我们知道较少http请求数可以有效提高页面加载速度,泽卡斯说:“下载一个100kb的js文件要比下载4个25kb的js文件速度快”。毕竟有请求和响应的时间。所以我们可以将多个js文件打包压缩成一个来提升性能。yui通过cdn网络将客户端请求的多个js文件在服务器端合并并压缩成一个返回给客户端,从而提高加载效率。例如:

通过这个请求就可以把min.js和event-min.js两个文件在服务器端合并压缩成一个返回。

非阻塞脚本和延迟脚本(deferred scripts):

虽然将多个javascript脚本合并并且将脚本放在body底部降低了http请求数并且部分解决了阻塞问题。但如果脚本文件很大, 而且在每个脚本中都有功能函数运行,那么在脚本文件加载时,会占用浏览器很长一段时间,这段时间用户也只能傻傻的看着屏幕玩弄着没有任何反应的浏览器。为了避开这种情况,就出现了模块化加载和按需加载。

html4为

2:

记得将此代码放在标记之前。这样不仅可以保证脚本不会影响页面其他内容,而且也不需要用额外的window.onload事件做判断。我们甚至可以将loader.js的内容直接放在页面中,这样可以减少一次http请求。

可以参考和使用的案例:

yui 3:

yui 3的核心设计理念为:用一段很小的初始代码,下载其他的功能模块代码。

例子:

1://引入yui 3

2:

3: //如果想使用dom功能,就可以给出此功能的名字,传递给use函数,并给出一个回调函数,当dom模块加载完毕后,就会执行回调函数中的内容,

回调函数中的参数y代表了yui实例,我们可以在回调函数中使用刚加载完成的dom模块中的功能。实际上,在加载dom模块之前,如果dom模块依赖其他为

加载的模块,当我们在use函数中指定过dom参数后,yui会自动创建一个加载dom模块所需要的所有依赖模块,并创建一个“联合句柄url”,(毛的联合

句柄url,实际上就是把所需的脚本模块的url写在一个url上,然后通过cdn合并压缩),然后按顺序下载和执行所需模块。

4:yui().use("dom", function(y){

5:y.dom.addclass(docment.body, "loaded");

6:});

lazyload:

yahoo!search的ryan grove 创建了lazyload库,精缩之后只有1.5k。

例子:

1:

2:

7:

8://若需要加载多个脚本文件,并保证执行顺序,可以这样:

9:

10:

虽然非阻塞动态加载,但尽量减少文件数量,因为每一次下载仍是一个单独的http请求,回调函数直到所有文件下载完毕之后才会执行。

seajs:(其实我觉得应该把这个放在最前面)

国内淘宝达人玉伯的seajs,据用过的人说比前面几种都要好用,但自己没有研究过,所以请童鞋们多多发表自己的见解,多多指教。。。

例子:

1:

2:

下面给出一些seajs的参考和使用资料:

seajs首页:http://seajs.com/

初识seajs:http://ghsky.com/2011/05/seajs-first-view.html

使用seajs实现模块化开发:http://cnodejs.org/blog/?p=1203

岁月如歌在javaeye上seajs1.0正式发布的博文:http://www.iteye.com/topic/1112630

labjs:

kyle simpson写的开源库labjs,精缩后4.5k,据说对并行下载和精确控制依赖关系更有针对性。

1:

2:

8:

9://lab支持链式操作,每个函数默认返回一个$lab对象的引用,要加载多个脚本,可以这样:

10:

11:

18:

19://如果想管理依赖关系,可以通过wait函数,这样:

20:

21:

此时,虽然文件是并行下载,但first-file.js一定会在the-rest.js之前执行。

requirejs:

jrburke 的 requirejs。

例子:

1:

2:require(["helper/util"], function() {

3://this function is called when scripts/helper/util.js is loaded.

4:});

5:

6://加载多个js:

7:require(["helper/util","helper/util1","helper/util2","helper/util3"], function() {

8://this function is called when scripts/helper/util.js is loaded.

9:});

转载请注明出处:http://www.cnblogs.com/mrsunny/archive/2011/10/22/2221343.html#

参考:

《高性能javascript》

阮一峰javascript文件加载: http://www.ruanyifeng.com/blog/2011/10/javascript_loading.html

岁月如歌在javaeye上seajs1.0正式发布的博文:http://www.iteye.com/topic/1112630

在webkit浏览器内核中并行加载外部脚本:http://www.iefans.net/webkit-jiazai-jiaoben/

其他网上杂文。

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/