默认加载顺序图

image.png

script标签上的属性

defer

• 脚本下载与页面的解析是并行，下载的过程不会阻塞 DOM 的构建，defer 是在页面解析完成后 DomContentLoaded 之前执行，所以defer 会阻塞 DOMContentLoaded 事件
• 当同时有多个script元素使用了该属性，会按照它们出现的顺序执行。
• 使用该属性重点在于引入的资源文件之间有依赖关系。

async

• 脚本下载与页面的解析是并行，下载的过程不会阻塞 DOM 的构建，但是执行会阻塞，async 是加载完之后立刻执行，执行完后继续解析Dom。
• 当同时有多个script元素使用了该属性，不能保证会按照它们出现的顺序执行。
• 使用该属性重点在于引入的资源文件之间没有依赖关系。
• 同时使用defer和async时，行为由async决定

link标签上的属性

as=script

• 它规定了<link>元素加载的内容的类型。
• 该属性仅在<link>元素设置了 rel="preload" 或者 rel="prefetch" 时才能使用。

rel=preload

• 告诉浏览器下载资源，因为在当前导航期间稍后将需要该资源。提升资源加载优先级，进行预加载，不阻塞onload，用于当前页面的资源（当前页面要用到）。
• 必须与as属性使用一起才有效果

link不加任何属性.png link加上as与preload.png link加上属性后，加载优先级提升.png

prefetch

• 提示浏览器提前加载链接的资源，因为它可能会被用户请求。用于稍后将使用的资源（其他页面可能要用到）

使用prefetch.png 资源会被提前下载，但优先级最低.png

preconnect

• 向浏览器提供提示，建议浏览器提前打开与链接网站的连接，而不会泄露任何私人信息或下载任何内容，以便在跟随链接时可以更快地获取链接内容。

image.png

dns-prefetch

• 提示浏览器该资源需要在用户点击链接之前进行 DNS 查询和协议握手。
• 那就是对于最关键的连接使用 preconnect，而其他的则可以用 dns-prefetch