大公司怎么开发和部署前端代码

原文出处: fouber

个人总结

图中 a.css 是页面 index.html 的样式, 对于高访问量的页面而言, 每次访问 index.html 都需要请求 a.css, 会很影响性能.

因此我们希望这样安排

利用304, 让浏览器使用本地缓存: 304叫协商缓存, 仍然需要和服务器通信一次

进一步优化, 强制浏览器使用本地缓存( cache-control/expires ), 不需要和服务器痛心了

新的问题: 浏览器不发送资源请求, 如何更新缓存?

通过更新页面中引用的资源路径, 让浏览器主动放弃缓存, 加载新资源

下次上线把链接地址改成新版本的, 就更新了资源

如果有很多样式引用, 但是仅仅改了其中一个呢?

解决方法: 让url 的修改与文件内容关联, 即只有文件内容发生变化, 才会更新 url

利用数据摘要算法对文件请求摘要信息, 摘要信息和文件内容一一对应, 就有了一种可以精确到单个文件粒度的缓存控制依据.

把 URL 改成带摘要信息的格式:

以后如有文件修改, 就只更新对应的 URL 了

进一步提高网站性能

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

静态资源优化方案

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

Update your browser to view this website correctly. Update my browser now

×