本文来自：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别人的文章而来，最近是很懒了。一是要考试，二是单位太忙，只能做到天天更新，但无法原创了）