区分开发与部署环境

前端这一块，开发可以很简单的在本地建立几个文件，浏览器就能运行起来。但是实际部署的情况，需要进行页面资源优化。

缓存的使用

本地访问的时候，不管是file还是http的协议，一般不会察觉出加载慢得情况。但是线上的情况却很复杂，每个请求者的网络环境不同，那么导致加载的时间也不一致，为了性能以及带宽。我们会选择使用缓存去减少一些请求，比如不常更新的样式文件。

首先开启缓存机制，需要强制浏览器使用本地缓存。这一块应该是在处理请求的服务器上处理的, 在返回的http headers中标明。

启用了缓存机制，同样的请求默认请求一次，以后刷新请求的都是本地缓存资源。但是如果要更新资源，怎么办？原先我这里的想法是，也是最普遍的想法就是追加时间戳。使得请求路径发生变化，这样就会让浏览器主动放弃缓存，加载新的资源。更好的方法，我看了百度FIS的做法，他们的思路是让url与文件内容关联，使用的是数据摘要算法，对文件求摘要信息，可以精确到单个文件的缓存控制。

普通服务器与CDN的使用

为了进一步提高网站性能，会把静态资源和动态网页分别存放到CDN与普通服务器上。上面说到的那些缓存文件，其实都是存放在CDN上面的，那么问题来了：部署的时候如何替换，动态网页与静态资源不可能同时进行，如果错开更新，肯定会有某一时刻访问出错。

答案就是：灰度发布。用文件的摘要信息来对资源文件进行重命名，把摘要信息放到资源文件发布路径中，这样，内容有修改的资源就变成了一个新的文件发布到线上，不会覆盖已有的资源文件。上线过程中，先全量部署静态资源，再灰度部署页面，整个问题就比较完美的解决了。

Rails

rails通过把静态资源变成erb模板文件，然后加入<%= asset_path 'image.png' %>，上线前预编译完成处理。

参考资料

原文: https://leohxj.gitbooks.io/front-end-database/content/preference/develop-and-deploy.html