网络优化

DNS 预解析

link标签的rel属性设置dns-prefetch，提前获取域名对应的IP地址

使用缓存

减轻服务端压力，快速得到数据

使用 CDN（内容分发网络）

内容分发网络（CDN）是一组分散在不同地理位置的 web 服务器，用来给用户更高效地发送内容。典型地，选择用来发送内容的服务器是基于网络距离的衡量标准的

避免图片src为空

虽然 src 属性为空字符串，但浏览器仍然会向服务器发起一个 HTTP 请求：

IE 向页面所在的目录发送请求； Safari、Chrome、Firefox 向页面本身发送请求； Opera 不执行任何操作。

HTTP 响应头优化

1. 缓存相关头：Cache-Control、Expires、ETag、Last-Modified；

2. 传输压缩：Content-Encoding: gzip / br，服务器开启压缩；

3. 预加载相关：Link: prefetch / preload，提前加载后续页面资源；

4. 安全&性能：HTTP/2、HTTPS，多路复用，减少请求阻塞；

5. 跨域、资源有效期控制，减少重复请求。

两种缓存：强缓存 + 协商缓存

强缓存（不发请求，直接读取本地缓存，性能最优）

依靠响应头：Cache-Control / Expires

• Expires：旧标准，绝对时间，受本地系统时间影响，兼容性差；
• Cache-Control: max-age=3600：相对时间，缓存有效期1小时，优先级更高。

流程： 浏览器请求资源 → 判断本地缓存是否在有效期内 → 有效直接读取本地文件，不向服务器发请求，状态码200(from disk cache/memory cache)。

协商缓存（发请求校验，资源不变返回304，复用缓存）

强缓存过期后触发，依靠两组标识：

1. Last-Modified + If-Modified-Since

   1. 第一次请求：服务器返回文件最后修改时间 Last-Modified；
   2. 再次请求：浏览器带上 If-Modified-Since；
   3. 服务器对比文件修改时间，无修改返回304，浏览器用本地缓存；文件更新返回200+新资源。 缺点：仅判断修改时间，文件内容没变但时间变动会重新下载。

2. ETag + If-None-Match（更精准）

   1. ETag：文件唯一哈希值，文件内容变哈希就变；
   2. 请求带上 If-None-Match，服务器对比哈希；
   3. 一致返回304，不一致返回新资源。 优先级高于 Last-Modified。