这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战
写该系列文章的初衷是“让每位前端工程师掌握高频知识点，为工作助力”。这是前端百题斩的第35斩，希望朋友们关注公众号“执鸢者”，用知识武装自己的头脑。提前透露一下《前端百题斩（上）》pdf版近期就要出炉了( ^_^ )
强缓存的资源由于不会向服务器发起验证，所以存在一些问题，即发布时资源更新问题，更新了资源，但是用户每次请求时依然从缓存中获取原来的资源，除非用户清除或者强刷新，否则看不到最新的效果。
4.1 解决方案及缺点
- 利用304定向重定向，让浏览器本地缓存即协商缓存。
缺点：协商缓存还是需要和浏览器通信一次。
- 强制浏览器使用本地缓存，不和服务器通信。
缺点：无法更新缓存。
- 通过更新页面中引用的资源路径，让浏览器主动放弃缓存，加载新资源。例如在文件名称后面增加一个版本号，下次上线时更改版本号。
缺点：当有多个静态缓存文件，只有一个文件更改时，却需要更新所有文件。
上述方案都有一定缺陷，为了解决这个问题在方案三的基础上进行修改，利用数据摘要算法，即让url的修改与文件内容相关联即只有文件内容变化时，才会导致相应的url的变更，从而实现文件级别的精确缓存控制。
4.2 同时更新页面和资源的情景
为了进一步提升网站性能，会把静态资源和动态网页分集群部署，静态资源会被部署到CDN节点上，网页中引用的资源也会变成对应的部署路径。当我要更新静态资源的时候，同时也会更新html中的引用。若这次发布，同时改了页面结构和样式，也更新了静态资源对应的url地址，加入采用覆盖式发布，现在要发布代码上线，咱们是先上线页面，还是先上线静态资源？
- 先部署页面，再部署资源：在二者部署的时间间隔内，如果有用户访问页面，就会在新的页面结构中加载旧的资源，并且把这个旧版本的资源当做新版本缓存起来，其结果就是：用户访问到了一个样式错乱的页面，除非手动刷新，否则在资源缓存过期之前，页面会一直执行错误。
- 先部署资源，再部署页面：在部署时间间隔之内，有旧版本资源本地缓存的用户访问网站，由于请求的页面是旧版本的，资源引用没有改变，浏览器将直接使用本地缓存，这种情况下页面展现正常；但没有本地缓存或者缓存过期的用户访问网站，就会出现旧版本页面加载新版本资源的情况，导致页面执行错误，但当页面完成部署，这部分用户再次访问页面又会恢复正常了。
上述先部署谁都有问题，这是因为采用的是覆盖式发布，用 待发布资源 覆盖 已发布资源，就有这种问题。解决它也好办，就是实现 非覆盖式发布。
4.3 扩展
对于静态资源部署优化方案，可以按照如下进行：
-
配置超长时间的本地缓存 —— 节省带宽，提高性能
-
采用内容摘要作为缓存更新依据 —— 精确的缓存控制
-
静态资源CDN部署 —— 优化网络请求
-
更新资源发布路径实现非覆盖式发布 —— 平滑升级
1.如果觉得这篇文章还不错，来个分享、点赞吧，让更多的人也看到
2.关注公众号执鸢者，与号主一起斩杀前端百题
