前端工程师手册

区分开发与部署环境

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

缓存的使用

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

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

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

普通服务器与CDN的使用

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

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

Rails

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

参考资料