Html 资源预加载/预连接内容

Html 可以将即将要用到的资源或者即将要握手的地址提前告知浏览器让浏览器利用还在解析HTML计算样式的时间去提前准备好。

preload

使用link的 preload 属性预加载一个资源。

<link rel="preload" href="style.css" as="style">

as 属性可以指定预加载的类型，除了style还支持很多类型，常用的一般是style和script，css和js。

prefetch

prefetch和preload差不多，prefetch是一个低优先级的获取，通常用在这个资源可能会在用户接下来访问的页面中出现的时候。

当然对当前页面的要用preload，不要用prefetch，可以用到的一个场景是在用户鼠标移入a标签时进行一个prefetch。

preconnect

preconnect和dns-prefetch做的事情类似，提前进行TCP，SSL握手，省去这一部分时间，基于HTTP1.1(keep-alive)和HTTP2(多路复用)的特性，都会在同一个TCP链接内完成接下来的传输任务。

script 标记

当浏览器解析至script标签时，浏览器的主线程就会等待script，或者运行script，然后继续开始构建，在以前，如果你把script标签放到了文档的最上面，那么在等待下载和运行的这段时间内页面就会处于白屏和无法操作的状态，并且不是并行的下载，浏览器会逐个下载并运行，这是一个相当糟糕的体验。所以都会选择将script放在文档底部，尽可能推后脚本的执行时机，不过并不完全可控。

时至今日，我们可以给script标签增加标记，使其异步(延迟)运行，把可控权交给开发者。

async 标记

<script src="main.js" async>

async标记告诉浏览器在等待js下载期间可以去干其他事，当js下载完成后会立即(尽快)执行，多条js可以并行下载。

async的好处是让多条js不会互相等待，下载期间浏览器会去干其他事(继续解析HTML等)，异步下载，异步执行。

defer 标记

与async一样，defer标记告诉浏览器在等待js下载期间可以去干其他事，多条js可以并行下载，不过当js下载完成之后不会立即执行，而是会等待解析完整个HTML之后在开始执行，而且多条defer标记的js会按照顺序执行，

<script src="main.js" defer></script>
<script src="main2.js" defer></script>

即使main2.js先于main.js下载完成也会等待main.js执行完后再执行。

两个标记都是为了让script标签实现异步下载，主要的区别在于async无法保证顺序且下载完就会执行而defer则会等待整个HTML解析之后才会开始执行，并且按照插入的顺序执行。

如果两个script之间没有依赖关系并且可以尽快执行的更加适合使用async，反之如果两个script之间有依赖关系，或者希望优先解析HTML，则defer更加适合。