前端资源优化方案理解

写这个的起源是知乎上的一个答案，有兴趣可以看一下https://www.zhihu.com/question/20790576

• 配置超长时间的本地缓存 —— 节省带宽，提高性能
• 采用内容摘要作为缓存更新依据 —— 精确的缓存控制
• 静态资源CDN部署 —— 优化网络请求
• 资源发布路径实现非覆盖式发布 —— 平滑升级
  
  

这个图挺好的我就盗图啦~~

1.利用304本地缓存

如果每次用户访问页面都要加载，很浪费呀，于是我们可以用304缓存呀

304这个状态码的含义是“服务器端没有更新”，也就是说客户端的文件版本是最新的。

• 用户首次请求该文件的时候，通过HTTP HEAD的Last-Modified字段将该文件的最后修改日期发送到客户端，让客户端知道该文件的版本，例如
  

• 浏览器再次请求该文件的时候，会自动将该时间作为请求的HTTP HEAD的If-Modified-Since字段内容

• 服务端根据If-Modified-Since字段的内容(如果存在该字段)来判断客户端的文件是否已经过期，如果已经过期，则重新返回新的文件，如果没有，则只需要返回304状态码，不需要返回文件内容。文件是否过期可以从Cache-Control设置max-age值，那么在此值内的时间里就不会重新访问服务器

2.采用内容摘要作为缓存更新依据

毕竟哪怕是缓存也要更新的对不对？？我们可以更新页面引用资源的路径，用版本号的方式去加载新资源~

但是如果我只改了某一个文件的一点，全部重新加载也不好，所以有了利用数据摘要算法对文件求摘要信息，什么是数据摘要算法？？？呵呵~我才不要告诉你其实就是hash而已……每个文件内容可以生成哈希值，哈希值与文件内容一一对应，就可以精确到单个文件缓存控制了。

 3.静态资源CDN部署

 把静态资源和动态网页分集群部署，静态资源会被部署到CDN节点上，网页中引用的资源也会变成对应的部署路径。

原理：不同地区的用户会访问到离自己最近的相同网络线路上的CDN节点，当请求达到CDN节点后，节点会判断自己的内容缓存是否有效，如果有效，则立即响应缓存内容给用户，从而加快响应速度。如果CDN节点的缓存失效，它会根据服务配置去我们的内容源服务器获取最新的资源响应给用户，并将内容缓存下来以便响应给后续访问的用户。因此，一个地区内只要有一个用户先加载资源，在CDN中建立了缓存，该地区的其他后续用户都能因此而受益。

不同地区的用户访问同一个域名却能得到不同CDN节点的IP地址，这要依赖于CDN服务商提供的智能域名解析服务，浏览器发起域名查询时，这种智能DNS服务会根据用户IP计算并返回离它最近的同网络CDN节点IP，引导浏览器与此节点建立连接以获取资源。

4.非覆盖式发布

用待发布资源覆盖已发布资源，无论是先上线页面，还是先上线静态资源都会在部署过程中发生页面错乱的问题。所以就需要非覆盖式发布，用文件的哈希值来对资源文件进行重命名，把哈希字符串放到资源文件发布路径中，这样，内容有修改的资源就变成了一个新的文件发布到线上，不会覆盖已有的资源文件。

 

 

CDN部署参考文章：http://div.io/topic/930