前言
一般script标签
会被放在头部或尾部。
头部 就是 <head>
里,尾部 一般指<body>
里
为什么建议script放在尾部
将script放在<head>
里,浏览器解析HTML,发现script标签时,会先下载完所有这些script,再往下解析其他的HTML,在这个过程中就会导致后面的代码等待JS下载解决。
JS并发一起下载的。不管JS是不是来自同一个host,浏览器最多只能同时下载两个JS
script
放在头部,会让网页内容呈现滞后,导致用户感觉到卡。
所以script
建议放在尾部(标准做法你是放在body里面的尾部,放在外面是不标准的至于为什么建议Google)。
备注:放body在有的时候也不是最优解
所谓编程无绝对,将script
放在尾部的也有缺点
这是因为放尾部浏览器只能先解析完整个HTML页面,再下载JS。而对于一些依赖于JS的网页,就会出错。
所以,将script
放在尾部也不是最优解,也可能在某些情况下是万万不能的,具体位置还是要具体分析。
一般的原则是页面使用script放最后,插件例如jQuery放<hear>
里。
实现下载JavaScript的同时进行HTML渲染
更modern的方式:使用async
和defer
这两个属性能让浏览器做到一边下载JS(还是只能同时下载两个JS),一边解析HTML。
普通 script
<script src="first.js"></script>
处理方式:
- 停止解析 document.
- 请求 a.js
- 执行 a.js 中的脚本
- 继续解析 document
defer
<script src="first.js" defer></script>
<script src="second.js" defer></script>
处理方式:
- 不阻止解析 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>
处理方式:
- 不阻止解析 document, 并行下载 b.js, c.js
- 当脚本下载完后立即执行。(两者执行顺序不确定,执行阶段不确定,可能在 DOMContentLoaded 事件前或者后 )
结论
- 两者都不会阻止 document 的解析
- defer 会在 DOMContentLoaded 前依次执行js文件下载
- async 则是下载完立即执行,不一定是在 DOMContentLoaded 前
- async 因为顺序无关,所以很适合像 Google Analytics 这样的无依赖脚本