JavaScript 到底放在哪个位置，不同位置效果又是怎么样

前言

一般script标签会被放在头部或尾部。

头部 就是 里，尾部 一般指里

---

为什么建议script放在尾部

将script放在里，浏览器解析HTML，发现script标签时，会先下载完所有这些script，再往下解析其他的HTML，在这个过程中就会导致后面的代码等待JS下载解决。

JS并发一起下载的。不管JS是不是来自同一个host，浏览器最多只能同时下载两个JS

script放在头部，会让网页内容呈现滞后，导致用户感觉到卡。

所以script建议放在尾部（标准做法你是放在body里面的尾部，放在外面是不标准的至于为什么建议Google）。

---

备注：放body在有的时候也不是最优解

所谓编程无绝对，将script放在尾部的也有缺点

这是因为放尾部浏览器只能先解析完整个HTML页面，再下载JS。而对于一些依赖于JS的网页，就会出错。

所以，将script放在尾部也不是最优解，也可能在某些情况下是万万不能的，具体位置还是要具体分析。

一般的原则是页面使用script放最后，插件例如jQuery放里。

---

实现下载JavaScript的同时进行HTML渲染

更modern的方式：使用async和defer

这两个属性能让浏览器做到一边下载JS(还是只能同时下载两个JS)，一边解析HTML。

普通 script

<script src="first.js"></script>
1

处理方式：

• 停止解析 document.
• 请求 a.js
• 执行 a.js 中的脚本
• 继续解析 document

defer

<script src="first.js" defer></script>
<script src="second.js" defer></script>
1
2

处理方式：

• 不阻止解析 document， 并行下载 d.js, e.js
• 即使下载完 d.js, e.js 仍继续解析 document
• 按照页面中出现的顺序，在其他同步脚本执行后，DOMContentLoaded 事件前 依次执行 d.js, e.js。

async

<script src="first.js" async></script>
<script src="second.js" async></script>
1
2

处理方式：

• 不阻止解析 document, 并行下载 b.js, c.js
• 当脚本下载完后立即执行。（两者执行顺序不确定，执行阶段不确定，可能在 DOMContentLoaded 事件前或者后 ）

结论

• 两者都不会阻止 document 的解析
• defer 会在 DOMContentLoaded 前依次执行js文件下载
• async 则是下载完立即执行，不一定是在 DOMContentLoaded 前
• async 因为顺序无关，所以很适合像 Google Analytics 这样的无依赖脚本