浏览器缓存
强缓存 通过 Expires（不可靠，返回服务器的时间，但是根据客户端的时间判断） 和 Cache-Control（优先级高）请求头设置
浏览器缓存里, Cache-Control 是金字塔顶尖的规则, 它藐视一切其他设置, 只要其他设置与其抵触, 一律覆盖之.不仅如此, 它还是一个复合规则, 包含多种值, 横跨 存储策略, 过期策略 两种, 同时在请求头和响应头都可设置.
语法为: “Cache-Control : cache-directive”.
会让浏览器执行强缓存的respone header有以下两种：
- Cache-Control：max-age=3600;
- Expires: Thu, 25 May 2020 12:30:00 GMT;
上文的 max-age=3600 即代表该资源会在浏览器缓存 3600 秒，即 1 个小时。在获取到该资源后的 1 小时内，若浏览器再一次请求该资源，将不会发出网络请求，直接读浏览器的缓存中读取。
Cache-Control 可设置的字段
● public：设置了该字段值的资源表示可以被任何对象（包括：发送请求的客户端、代理服务器等等）缓存。这个字段值不常用，一般还是使用 max-age=来精确控制；
● private：设置了该字段值的资源只能被用户浏览器缓存，不允许任何代理服务器缓存。在实际开发当中，对于一些含有用户信息的 HTML，通常都要设置这个字段值，避免代理服务器(CDN)缓存；
● no-cache：设置了该字段需要先和服务端确认返回的资源是否发生了变化，如果资源未发生变化，则直接使用缓存好的资源；
● no-store：设置了该字段表示禁止任何缓存，每次都会向服务端发起新的请求，拉取最新的资源；
● max-age=：设置缓存的最大有效期，单位为秒；
● s-maxage=：优先级高于 max-age=，仅适用于共享缓存(CDN)，优先级高于 max-age 或者 Expires 头；
● max-stale[=]：设置了该字段表明客户端愿意接收已经过期的资源，但是不能超过给定的时间限制协商缓存 Etag（优先级高） 和 Last-Modified 设置
定义：协商缓存就是浏览器向服务器发送一个请求，服务器会检查该资源是否有更新，如果有更新，就返回最新的资源，状态码 200，如果没有更新，状态码 304，不返回资源，浏览器从缓存中读取资源。
协商缓存字段之 ETag
服务器可以通过某种自定的算法对资源生成一个唯一的标识(比如 md5 标识)，然后在浏览器第一次请求某一个 URL 时把这个标识放到响应头传到浏览器，浏览器会把这个 ETag 的值存起来，服务器端的返回状态会是 200。
以后如果浏览器要再发送该请求，会在 request header 中加上 If-None-Match（If-None-Match: W/"12334-132）, 而该请求头的值就是上一次存的 ETag 的值，用以发送给服务端来验证资源有没有修改。
Get 请求中，当且仅当服务器上没有任何资源的 ETag 属性值与这个首部中列出的相匹配的时候，服务器端会才返回所请求的资源，响应码为 200。
如果有资源的 ETag 值相匹配，那么返回 304 状态码。浏览器就会从缓存中获取该请求资源，从而达到节省开销加快用户访问速度的目的
协商缓存字段之 Last-Modified
当 Response Header 中没有 ETag，Cache-Control，Expires，Pragma 这类缓存相关字段，只有 Last-Modified，浏览器也会缓存，理论上，应该会在下一次请求中带上 If-Modified-Since 的请求头，去服务端验证资源是否过期，过期就响应码就为 200 并返回相应的资源，没过期响应码就是 304，浏览器会从缓存中获取资源。 但实际上，各个浏览器对这部分的实现不太相同。 Chrome 浏览器对此的缓存机制是，浏览器会有一套算法去判断当前资源是否过期。 如果没有过期的话，直接从缓存中取资源，不会发送请求。 用 fiddler 可以看到第一次请求了很多 JS 和 css 文件，但第二次请求 却没有再请求相关资源了，说明直接从缓存读取。
当 Last-Modified 和 Etag 属性同时出现的时候，Etag 的优先级更高。使用协商缓存的时候，服务器需要考虑负载平衡的问题，因此多个服务器上资源的 Last-Modified 应该保持一致，因为每个服务器上 Etag 的值都不一样，因此在考虑负载平衡时，最好不要设置 Etag 属性。强缓存和协商缓存总结
在实际应用中，浏览器首先检查强缓存信息(Expires和Cache-Control)，如果缓存仍然有效，则直接使用缓存。如果缓存已过期，浏览器发送带有协商缓存信息(Last-Modified和ETag)的请求到服务器进行验证。如果服务器返回304 Not Modified响应，则浏览器使用缓存;否则，服务器返回新的资源内容。
使用浏览器缓存，有以下优点
● 减少了服务器的负担，提高了网站的性能 ● 加快了客户端网页的加载速度 ● 减少了多余网络数据传输
浏览器白屏时间
head 标签前面 new Date().getTime() - performance.timing.navigationStart
浏览器首屏时间
body 标签前面 Date.now() - performance.timing.navigationStart
优化首屏加载
// dns 预解析
使用 link 标签