1.js
放在head
中会立即执行,阻塞后续的资源下载与执行。因为js
有可能会修改dom
,如果不阻塞后续的资源下载,dom
的操作顺序不可控。
正常的网页加载流程是这样的。
- 浏览器一边下载HTML网页,一边开始解析
- 解析过程中,发现
<script>
标签 - 暂停解析,网页渲染的控制权转交给
JavaScript
引擎 - 如果
<script>
标签引用了外部脚本,就下载该脚本,否则就直接执行 - 执行完毕,控制权交还渲染引擎,恢复往下解析HTML网页
如果外部脚本加载时间很长(比如一直无法完成下载),就会造成网页长时间失去响应,浏览器就会呈现“假死”状态,这被称为“阻塞效应”。html
需要等head
中所有的js
和css
加载完成后才会开始绘制,但是html
不需要等待放在body
最后的js
下载执行就会开始绘制,因此将js
放在body
的最后面,可以避免资源阻塞,同时使静态的html
页面迅速显示。将脚本文件都放在网页尾部加载,还有一个好处。在DOM
结构生成之前就调用DOM
,JavaScript
会报错,如果脚本都在网页尾部加载,就不存在这个问题,因为这时DOM
肯定已经生成了。
2.js
的执行依赖前面的样式。即只有前面的样式全部下载完成后才会执行js
,但是此时外链css
和外链js
是并行下载的。
css
需要分块,首页的css
独立,其余的css
需要动态加载,因为html
的绘制会被css
阻塞,这样可以减少首次进入时的白屏时间。
3.外链的js
如果含有defer="true"
属性,将会并行加载js
,到页面全部加载完成后才会执行,会按顺序执行。
defer
属性的作用是,告诉浏览器,等到DOM
加载完成后,再执行指定脚本。
- 浏览器开始解析HTML网页
- 解析过程中,发现带有
defer
属性的script
标签 - 浏览器继续往下解析HTML网页,同时并行下载
script
标签中的外部脚本 - 浏览器完成解析HTML网页,此时再执行下载的脚本
对于内置而不是连接外部脚本的script
标签,以及动态生成的script
标签,defer
属性不起作用。
4.外链的js
如果含有async="true"
属性,将不会依赖于任何js
和css
的执行,此js
下载完成后立刻执行,不保证按照书写的顺序执行。因为async="true"
属性会告诉浏览器,js
不会修改dom
和样式,故不必依赖其它的js
和css
。
async
属性的作用是,使用另一个进程下载脚本,下载时不会阻塞渲染。
- 浏览器开始解析HTML网页
- 解析过程中,发现带有async属性的script标签
- 浏览器继续往下解析HTML网页,同时并行下载
script
标签中的外部脚本 - 脚本下载完成,浏览器暂停解析HTML网页,开始执行下载的脚本
- 脚本执行完毕,浏览器恢复解析HTML网页
async
属性可以保证脚本下载的同时,浏览器继续渲染。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。另外,使用async属性的脚本文件中,不应该使用document.write
方法。
一般来说,如果脚本之间没有依赖关系,就使用async
属性,如果脚本之间有依赖关系,就使用defer
属性。如果同时使用async
和defer
属性,后者不起作用,浏览器行为由async
属性决定。