Serenader

Learning by sharing

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

Mr. serenader Published at , updated at
on 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 标签后面则在页面一开始就能看到页面内容了。
完。