前端性能优化-缓存利用
缓存分类
1.CDN缓存
2.DNS缓存
3.客户端缓存
1.CDN缓存
CDN可以理解分布世界各地的节点，当用户浏览网站的时候，CDN会选择一个离用户最近的CDN边缘节点来响应用户的请求，这样在广州访问王者荣耀用户的请求就不会千里迢迢跑到北京的服务器（假设王者荣耀源站部署在北京）
CDN的优势很明显：（1）CDN解决了跨地域访问的问题，访问延时大大降低；（2）大部分请求在CDN边缘节点完成，CDN起了分流作用，减轻了源站的负载
//设置CDN边缘节点数据缓存时间
Cache-Control:max-age
当客户端向CDN节点请求数据时，CDN节点会判断缓存数据是否过期，若缓存数据并没有过期，则直接将缓存数据返回给客户端；否则，CDN节点会向源站发出请求，从源站获取最新数据，更新本地缓存，并将最新的数据返回给客户端。CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间，为用户提供更精细化的缓存管理
2.DNS缓存
DNS(Domain Name System):解析域名找到IP地址服务器
DNS查找流程：首先查看浏览器缓存是否存在，不存在则访问本机DNS缓存；再不存在则访问远程DNS服务器，通常浏览器查找域名对应的IP地址需要花费20-120ms，在DNS查找完成之前，浏览器不能从host下载任何东西
- DNS性能优化最佳实践
当客户端的DNS缓存为空时，DNS查找的数量与配置的主机数量相等，所以减少配置主机可以减少DNS查找的数量。
但是问题来了，有时候需要多设置主机数量，来增加DNS的负载均衡，因此减少DNS的查找和增加主机数量形成矛盾关系，建议配置2-4个主机是最佳的。更多负载均衡可以用nginx实现。
3.浏览器缓存
1.Cache-Control:max-age
假如站点引入一个脚本文件，希望20年不变，这时浏览器把这个脚本缓存起来，不用每一次都请求服务器。这样节省宽带并且提升性能；
//设置Response的HTTP头中Cache-Control
Cache-Control:max-age=31536000
因为标准规定最多只能设置一年。这里设置了一年的缓存，以秒为单位。
但是，有一天发现脚本的文件要改了怎么办？很简单，改变请求的文件名就好了。这时浏览器会向服务器请求这个文件。
2.Expires
指一个绝对过期日期，如果过期了，客户端向服务器获取最新资源；这个过期时间是参照客户端的时间，修改客户端的时间等同于更改缓存命中结果，推荐与Cache-Control一块使用
//设置Response的HTTP头中Expires
Response Headers
Expires:Sat,24 Jan 2018 20:30:47 GMT
...
3.Last-Modified 和 If-Modified-Since
1.客户端第一次向服务器发送请求获取JS文件
2.服务器接收请求后将JS文件返回给客户端，响应头里JS文件最后的修改时间Last-modified：Sat,24 Jan 2018 20:30:47 GMT
3.客户端第二次发起请求获取JS文件，在这里会把第2步返回的修改时间放在请求头里If-Modified-Since：Sat,24 Jan 2018 20:30:47 GMT发送给服务器
4.服务器进行校验，检查修改文件的时间；如果文件没有修改过，通知客户端是最新版本；反之，则返回最新的JS文件给客户端
//第一次发起请求，响应头返回的修改文件时间
Response Headers
Last-Modified:Sat,24 Jan 2018 20:30:47 GMT
//第二次发起请求，请求头发送给服务器的修改文件时间
Request Headers
If-Modified-Since:Sat,24 Jan 2018 20:30:47 GMT
4.ETag 和 If-None-Match
场景：客户端发起请求获取JS文件，JS文件的内容加一个空格然后删除空格进行保存操作；这时候服务器会校验JS文件最后的修改的时间，发现匹配不上，服务器会重新将文件返回给客户端。可是，这样合理么？JS文件内容并没有被修改？
ETag的出现了，完美处理上述情况
1.客户端第一次向服务器发送请求获取JS文件
2.服务器接收请求后将JS文件返回给客户端，响应头里ETag ：W/"262b9-Lo40+3qjAODueOOX6ceeIg"
3.客户端第二次发起请求获取JS文件，请求头里 If-None-Match：W/"262b9-Lo40+3qjAODueOOX6ceeIg"发送给服务器
4.服务器进行校验，检查文件内容是否变化了（ETag的值：是依据文件内容的哈希值生成）；如果文件内容没有改变过，通知客户端是最新版本；反之，则返回最新的JS文件给客户端
//第一次发起请求，响应头返回ETag
Response Headers
ETag:W/"262b9-Lo40+3qjAODueOOX6ceeIg"
//第二次发起请求，请求头发送ETag的值给服务器
Request Headers
If-None-Match:W/"262b9-Lo40+3qjAODueOOX6ceeIg"
