导读 #

采用cdn加速静态资源，减轻静态资源的请求压力，同时在访问网站的时候提升静态资源加载速度。

前言 #

在早期搭建自己的博客站的时候，喜欢从网上找一些图片资源，放到文章里，但是随着博客里文章数量的增多，导致加载缓慢，或者刚进网页的时候，有短暂的白屏，对于访问的体验很不好，于是在那时去接触了cdn，并搭建了自己的图床，利用cdn静态资源加速来解决了问题。

其实不光如此，很多朋友在访问网站的时候，都喜欢刷新网页，每次刷新都伴随着js、css、img等静态文件的重新请求加载（无论文件是否发生变化）。

所以当网站达到一定规模的时候，可能用户的一次无心操作，就会带来一次不好的浏览体验。

缓存策略 #

缓存策略又称浏览器缓存，指浏览器采用最优方式访问资源，以降低访问成本与提升访问速度。缓存策略是接入成本最低的性能优化策略。其显著减少网络传输所带来的损耗，提升网页访问速度，是一种很值得使用的性能优化策略。

在介绍缓存策略前，先了解一下缓存机制。

如下图所示：

• 考虑拒绝一切缓存策略：Cache-Control:no-store
• 考虑资源是否每次向服务器请求：Cache-Control:no-cache
• 考虑资源是否被代理服务器缓存：Cache-Control:public/private
• 考虑资源过期时间：Expires:t/Cache-Control:max-age=t,s-maxage=t
• 考虑协商缓存：Last-Modified/Etag

再来介绍缓存策略。

缓存策略通过设置HTTP报文实现，在形式上分为强缓存(强制缓存)与协商缓存(对比缓存)。

下面分别介绍一下它们：

强缓存：

• 条件：由浏览器确定缓存资源是否可用，在缓存期间无需请求
• 字段
  • Expires - 过期时间 - 修改本地时间可能会造成缓存失败
  • Cache-Control - 缓存指示
    • max-age：设置普通服务器的缓存时长
    • s-maxage：设置代理服务器的缓存时长
    • no-cache：绕开强缓存使用协商缓存
    • no-store：无视所有缓存策略
• Expires/Cache-Control区别
  • Cache-Control优先级别高于Expires
  • Cache-Control的s-maxage优先级别高于Cache-Control的max-age
  • Expires使用时间戳表示，Cache-Control使用时间长度表示
  • Expires是HTTP1.0产物，Cache-Control是HTTP1.1产物

协商缓存：

• 条件：由服务器确定缓存资源是否可用，存在条件判断
• 字段
  • Last-Modified - 最后更新时间 - 以秒计算，服务器可能无法正确感知文件变化
  • ETag - 实体标记 - 由服务器生成的唯一标识，资源有变化会重新生成
• Last-Modified/ETag区别
  • ETag精度优于Last-Modified
  • ETag性能逊于Last-Modified
  • ETag优先级别高于Last-Modified
  • Last-Modified使用时间戳表示，ETag使用内容编码字符串表示

整个缓存策略机制很明了，先走强缓存，若命中失败才走协商缓存。若命中强缓存，直接使用强缓存；若未命中强缓存，发送请求到服务器检查是否命中协商缓存；若命中协商缓存，服务器返回304通知浏览器使用本地缓存，否则返回最新资源。

以下应用场景值得使用缓存策略一试，应付日常网站静态资源的访问绰绰有余。

• 频繁变动的静态资源：设置Cache-Control:no-cache并走协商缓存，每次访问都发送请求到服务器，配合Last-Modified/ETag验证资源的有效性
• 不常变化的静态资源：设置Cache-Control:max-age=31536000走强缓存，哈希处理文件名称(代码改动后生成带有hash的文件名称)，当html文件引用文件名称发生改变就会下载最新文件

CDN #

CDN，又叫内容分发网络，指一组分布在各地存储数据副本并可根据就近原则满足数据请求的服务器。其核心是缓存与回源，缓存是把资源复制到CDN服务器中，回源是资源过期/不存在就向上层服务器请求并复制到CDN服务器中。

CDN通过不断地缓存与回源形成一个个网络拓扑图，降低网络拥塞，提升用户访问的响应速度与命中率，其意义在于构建在现有网络基础上的智能虚拟网络，依靠部署在各地服务器，通过中心平台的调度、负载均衡、内容分发等功能模块，使用户就近获取所需资源。

这里举个十分形象的例子，京东快递是不是很快，有次日达什么的，他就是在全国建了仓库，根据用户购买时填的地址，从最近的仓库进行发货，从而缩短了运输的时效，使得用户从下单到收货的时间变成最短。

同理，CDN的工作原理是将源站的资源缓存到各个CDN节点中，当请求命中某个节点的资源缓存时，立即将资源返回到客户端，避免每个请求都通过源站获取。

cdn访问的过程：

• 1：用户请求静态资源URL，经过本地DNS解析，若LDNS命中则直接返回静态资源
• 2：若LDNS未命中则转发授权DNS查询
• 3：返回域名CNAME对应IP地址
• 4：解析域名并发送请求到DNS调度系统，系统为请求分配最佳节点对应IP地址
• 5：返回解析完毕的IP地址
• 6：用户发送请求到缓存服务器
• 7：缓存服务器响应用户请求并将用户所需内容发送到客户端

利用cdn加速静态资源 #

这里建议直接选购各大厂商现成的就可以，有付费的，也有免费的，大家自己找一下就可以，这里放几个比较常见的提供cdn服务的厂商。

• 又拍云
• 七牛云
• 阿里云
• 腾讯云

可能还会需要一个域名，这里也是去各大厂商那里购买就可以，不算贵