Serenader

Learning by sharing

<script> 标签应该放在 HTML 页面中的哪里?

首先说说浏览器在下载 JS 文件时情况是怎样的。在低版本浏览器中,当页面载入时,浏览器解析到 JavaScript 标签时,如果是外链 JS 文件的话,则会开始下载 JS 文件,并且会阻塞其他文件的下载,比如排在这个 JS 文件后面的 JS 文件或者图片等。
在 IE 8, Firefox 3.5, Safari 4, Chrome 2 等高版本浏览器中是允许并行下载 JS 文件的。但是还是会阻塞其他文件如图片的下载。
另外,当浏览器解析到 <script></script> 时都会暂停页面相应等待 JS 解析完毕和执行完毕。为什么呢?因为 JS 文件可能会对 DOM 进行操作,所以要获得完整的页面就得等待 JS 执行完毕,才能继续下载和渲染页面。
所以这就引出一个问题,究竟 JS 标签应该放在页面中的哪个地方,页面在载入的时候才会更快一点呢?
在实际编写 Web 应用中,往往习惯将所有的 <script></script> 标签放在 <body></body> 标签的最后面,也就是在 body 的结束标签前。这样的好处是浏览器可以优先下载图片和其他资源,然后加载好整个 DOM,然后再去执行脚本,最后生成最终的页面。这样一来可以在一定程度上加快页面的载入速度。因为如果脚本标签都放在 <head></head> 上面时,载入页面时页面会显示一片空白,等待脚本执行,然后等一会才能显示完整页面。而反过来放在 body 标签后面则在页面一开始就能看到页面内容了。
完。