网络相关
1 DNS预解析
<link rel="dns-prefetch" href="//xxx.cn" />
2 缓存
强缓存
Expires // HTTP 1.0
Cache-Control // 出现于 HTTP / 1.1 优先级高于Expires
Expires: Wed, 22 Oct 2018 08:41:00 GMT
协商缓存
Last-Modified // 本地文件最后修改日期
If-Modified-Since
Last-Modified
表示本地文件最后修改日期,If-Modified-Since 会将 Last-Modified 的值发送给服务器,询问服务器在该日期后资源是否有更新,有更新的话就会将新的资源发送回来。
ETag
If-None-Match
ETag 类似于文件指纹,If-None-Match 会将当前 ETag 发送给服务器,询问该资源 ETag 是否变动,有变动的话就将新的资源发送回来
Tag 优先级比 Last-Modified 高
对于大部分的场景都可以使用强缓存配合协商缓存解决,但是在一些特殊的地方可能需要选择特殊的缓存策略
对于某些不需要缓存的资源,可以使用 Cache-control: no-store ,表示该资源不需要缓存
对于频繁变动的资源,可以使用 Cache-Control: no-cache 并配合 ETag 使用,表示该资源已被缓存,但是每次都会发送请求询问资源是否更新。
对于代码文件来说,通常使用 Cache-Control: max-age=31536000 并配合策略缓存使用,然后对文件进行指纹处理,一旦文件名变动就会立刻下载新的文件。
3使用 HTTP / 2.0
2.0比1.0多了请求并发
在 HTTP / 2.0 中引入了多路复用,能够让多个请求使用同一个 TCP 链接,极大的加快了网页的加载速度。并且还支持 Header 压缩,进一步的减少了请求的数据大小。
预加载
<link rel="preload" href="http://example.com" />