本文来自:Thinking in LAMP - 老王的技术手册,网址是在baidu上面的,文章URL是:http://hi.baidu.com/thinkinginlamp/blog/item/1ebc2e730600891b8601b049.html
原文内容如下:(为了方便,我将图片COPY过来了,而并非是引用,不好意思老王)
所谓“Javascript堵塞问题”,指的是浏览器在下载javascript文件的时候,会堵塞其他下载进程,并且多个javascript文件之 间,只能一个一个下载,不能并行下载。浏览器之所以要这么干,一来是因为javascript里可能会有一些涉及页面渲染的操作,比如 document.write,所以要先把他们加载完,以免影响用户体验,二来是如果并发下载javascript文件,代码执行的先后顺序会错乱,从而 引起逻辑错误。为了规避上述弊端,YSlow建议如果有多个javascript文件,并且这些文件里没有类似document.write等页面渲染的 操作,那么应该尽可能把他们合并成一个文件,并放到页面的尾部。不过很多时候,合并javascript文件是个浩大的工程,不仅破坏了模块化结构,而且 还可能会给代码维护带来不必要的麻烦,今天说说另一个方法,以期避免对现有代码的大规模修改。
先做两个javascript文件,他们是a.php,b.php,之所以用php文件是因为我只会这个,内容如下:
- <?php sleep(1); ?>
可以看到a.php和b.php的内容是一样的,其中之所以sleep一秒钟,是为了让演示的效果更明显。
现在让我们来做一个页面(x.htm),看看javascript堵塞问题是如何产生的:
- <html>
- <head>
- <title>DEMO</title>
- <script type="text/javascript" src="a.php"></script>
- <script type="text/javascript" src="b.php"></script>
- </head>
- <body>
- <img src="http://www.google.com/intl/en_ALL/images/logo.gif">
- </body>
- </html>
浏览这个页面的时候,通过Pagetest软件,我们可以看到类似下面的结果:
下面让我们再来做一个页面(y.htm),看看是怎么解决这个问题的:
- <html>
- <head>
- <title>DEMO</title>
- <script>
- var load = function(file) {
- var scriptElement = document.createElement("script");
- scriptElement.src = file;
- document.getElementsByTagName("head")[0].appendChild(scriptElement);
- }
- load('a.php');
- load('b.php');
- </script>
- </head>
- <body>
- <img src="http://www.google.com/intl/en_ALL/images/logo.gif">
- </body>
- </html>
参考资料:http://stevesouders.com/docs/web20expo-20080425.ppt
膘叔:虽然从我个人而言,我会考虑将js换到其他的域名下面,以防止堵塞(所谓的YAHOO设计网页14条军规中的),然后通过一个程序minify来进行引用。关于minify我会单独介绍。(其实也是COPY别人的文章而来,最近是很懒了。一是要考试,二是单位太忙,只能做到天天更新,但无法原创了)