【简介】在加载脚本的时候，会发生阻塞，解决这一问题我们可以通过将脚本放到尾部，先让页面渲染，再加载用于交互的脚本文件。同时，提高性能另外一条原则，引入一个<script>标签，做一次HTTP请求。
1. JavaScript阻塞特性
当浏览器在执行JavaScript代码时，不能同时做其他任何事情。
多数浏览器使用单一进程来处理用户界面(UI)刷新和JavaScript脚本执行。所以一个时刻，浏览器只能做一件事，要么加载JavaScript脚本，要么刷新渲染浏览器界面。所以，如果JavaScript执行过程耗时过久，我们在视觉上就会察觉到浏览器一直处于等待响应。
简单地说，<script>标签的每次出现，都会使浏览器或多或少的处于等待状态。
2. 脚本位置 - 将脚本放在底部
理论上来说，把与样式和行为有关的脚本放在一起，并先加载它们，这样有助于确保页面渲染和交互的正确性。
<html>
<head>
<title>脚本组织</title>
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript" src="script3.js"></script>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
code...
</body>
</html>但这样处理，连续加载三个脚本会阻塞页面渲染。只有等到脚本全部加载完了，页面的渲染才会继续，用户感觉到的就是页面等待。
图中每一个js文件都需要花费加载和执行两段时间，如果有若干个js文件，积累起来的时间是惊人的。
幸好现在的浏览器允许并行下载。下面图片上是chrome浏览器在加载多个js文件过程中的并行下载过程。从图中可以看出每个文件之间只有短暂的延迟。
虽然浏览器能很好地解决多个文件的并行下载问题，但仍然有一个脚本文件下载和执行的时间，这个时间仍然会导致阻塞。
因此，脚本加载的最佳实践应该是将脚本放到底部加载。
<html>
<head>
<title>脚本组织</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
code...
<script type="text/javascript" src="script1.js"></script>
<script type="text/javascript" src="script2.js"></script>
<script type="text/javascript" src="script3.js"></script>
</body>
</html>3. 组织脚本
每个
<script>标签初始下载都会阻塞页面渲染，所以减少页面包含的<script>标签数量，有助于提高性能。如果
<script>标签是在引入外部脚本文件，就会有HTTP请求带来额外的性能开销，下载一个100KB的文件会比加载4个25KB的文件更快，所以减少页面外链脚本文件的数量将会改善性能。
通常一个大型网站需要依赖数个JavaScript文件，可以把多个文件合并成一个，使用一个 <script> 标签引入，做一次HTTP请求。
也可以使用一些内容传输网络（CDN）来分发多个文件，达到使用一个 <script> 标签引入，做一次HTTP请求的目效果。比如我们来看淘宝的，<script src="//g.alicdn.com/??kissy/k/6.2.4/seed-min.js,kg/global-util/1.0.5/index-min.js,tb/tracker/4.0.1/p/index/index.js,kg/tb-nav/2.2.0/index-min.js,secdev/sufei_data/2.2.0/index.js">。通过一个网址，请求了多个js文件。
上面这张图是淘宝首页的源代码，通过自有的CDN实现了一个 <script> 标签引入一次HTTP请求的效果。这是在HTML页面中引入多个外链JavaScript文件的最佳实践。
附： 欢迎大家关注我的新浪微博 - 一点编程，了解最新动态 。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
