原文链接
作者:张云龙
日期:2014年10月31日
原始的前端开发
![](https://img.haomeiwen.com/i1678087/d37a63990e58afbd.png)
![](https://img.haomeiwen.com/i1678087/424d0530bbe50d31.png)
304 协商缓存
![](https://img.haomeiwen.com/i1678087/cecfcf964fd5b338.png)
强制使用本地缓存(cache-control/expires)
![](https://img.haomeiwen.com/i1678087/3257ea5b386e75f8.png)
缓存如何更新?
更新资源路径
通过更新页面中引用的资源路径,让浏览器主动放弃缓存,加载新资源。
![](https://img.haomeiwen.com/i1678087/c14d920e49c30035.png)
如果所有链接都更新版本,会导致资源浪费。
![](https://img.haomeiwen.com/i1678087/70df46a7732a8d6b.png)
精确缓存控制
利用数据摘要算法对文件求摘要信息,精确到单个文件粒度的缓存控制。
![](https://img.haomeiwen.com/i1678087/cef4666f6f377835.png)
CDN
![](https://img.haomeiwen.com/i1678087/a66a70f0c3f2aedf.png)
非覆盖式发布
![](https://img.haomeiwen.com/i1678087/9120e1483c2cb94c.png)
静态资源优化方案
- 配置超长时间的本地缓存 --- 节省带宽,提高性能
- 采用内容摘要作为缓存更新依据 --- 精确的缓存控制
- 静态资源CDN部署 --- 优化网络请求
- 更新资源发布路径实现非覆盖式发布 --- 平滑升级
建议前端工程师多多关注前端工程领域。
图片使用 mockups 制作。
网友评论