dns-prefetch、preconnect、prefetch、prerender、preload和async、defer

1、页面解析的大致流程

浏览器自上而下读取html文档（此过程叫html parser），当发现css文件时，浏览器parser停下来去下载解析css，等css下载并解析完毕，浏览器继续parser。紧接着发现js， 于是parser又停了，浏览器下载并执行完js，继续parser。此时屏幕上还什么都没有。然后解析body内的标签。如果又发现js，浏览器又停下parser，下载并执行完js继续parser，直到页面渲染完毕。

我们假设js中只有一行代码console.log('header')， 但服务器响应很慢，要10秒才能把它返回给浏览器，浏览器执行这段代码需要1ms，那在这 10s+1ms 内，页面将一直空白。浏览器执行JS的时间取决于代码质量和硬件，并不是前端工程师随便可以优化的，所以优化的重点在JS的下载时间

2、预解析dns

加快页面加载时间，多用于预解析CDN的地址的DNS

<link rel="dns-prefetch" href="//example.com">

3、预先建立连接

启动早期连接（包括DNS查找、TCP握手和可选TLS协商）允许用户代理提前建立高延迟成本的连接。

<link rel="preconnect" href="//example.com">

4、预先获取文件

浏览器会在空闲的时候，下载js, 并缓存到内存或硬盘