DNS预解析

当用户在浏览器输入地址后按回车(或是点击链接后浏览器打开页面)时,先会将 域名 转为 IP,此时就会进行DNS解析,DNS缓存有以下几层:浏览器层缓存、操作系统层缓存、运营商层缓存、根服务器,只要命中则不会继续请求下一层,因此这也是 CDN 的主要实现原理以及引发DNS劫持的主要原理。

我们可以通过DNS预解析来节省一部分解析域名的时间

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


文件缓存

在建立连接后,浏览器会像服务器请问文件(首先请求HTML,由于后续的文件请求也可以缓存,所以此处放一起了),请求文件也可以进行缓存来优化,缓存可分为:强缓存、协商缓存

强缓存

实现强缓存可以通过两种响应头实现:Expires 和 Cache-Control ,强缓存表示在缓存期间不需要请求,state code 为 200

Expires 是 HTTP / 1.0 的产物,表示资源会在某个时间节点后过期,需要再次请求,注意: Expires 受限于本地时间,如果修改了本地时间,可能会造成缓存失效

Cache-Control 出现于 HTTP / 1.1,优先级高于 Expires ,表示资源会在 30 秒后过期,需要再次请求

协商缓存

如果缓存过期了,就会使用协商缓存来解决问题,协商缓存需要请求,如果缓存有效会返回 304

协商缓存需要客户端和服务端共同实现,和强缓存一样,也有两种实现方式


# Last-Modified 和 If-Modified-Since

Last-Modified 表示本地文件最后修改日期,If-Modified-Since 会将 Last-Modified 的值发送给服务器,询问服务器在该日期后资源是否有更新,有更新的话就会将新的资源发送回来

但是如果在本地打开缓存文件,就会造成 Last-Modified 被修改,所以在 HTTP / 1.1 出现了 ETag


# ETag 和 If-None-Match

ETag 类似于文件指纹,If-None-Match 会将当前 ETag 发送给服务器,询问该资源 ETag 是否变动,有变动的话就将新的资源发送回来,并且 ETag 优先级比 Last-Modified 高


扩展知识:

因为浏览器会有并发请求限制,在 HTTP / 1.1 时代,每个请求都需要建立和断开,消耗了好几个 RTT 时间,并且由于 TCP 慢启动的原因,加载体积大的文件会需要更多的时间,因此大多数网站的主域名与CDN域名都不一样

浏览器类型HTTP/2.0HTTP/1.1HTTP/1.0
Chrome 4+

66
Firefox
66
Safari

44
Opera 10.51+

8
IE10/11
66
IE9
1010
IE8
66
IE6/7
24


页面解析

在文件加载完成后,开始解析HTML文件,首先会解析 head 里的内容,