前端 - 关于浏览器缓存html文件
问题描述
最近在学习浏览器的缓存机制,看到有一种方案,使用强缓存,资源名用文件名+md5来命名,实现资源的更新,对于这个方案有几点疑问:
是否每次修改了资源,都要在html中修改link标签,把url指向最新的资源。这样不会很麻烦吗?尤其是同一个资源被无数html引用的时候(所以会有类似的工具/脚本?)
浏览器也会缓存这个html文件,那么html文件自身如何更新呢?比如我用node写个服务器,可能一句app.use(’/’, index);就好了,但是每次浏览器也会对html进行缓存,如果用到上述这种方案的话,是否应该在服务器这里做出改动,让所有返回的html文件,都不使用强缓存,这样每次就可以加载到最新修改的html了。(我也查看了几家大网站的F12,有的html就是200,比如百度和网易,新浪这种还是返回的304)
可以讲一讲详细的方案吗。。查看很多资料都是一句“资源名+md5命名,每次加载最新的资源”,初学者在实现上有些看不懂。。。
问题解答
回答1:-> 1, 每次资源更新, HTML 是需要更新的, 这通过代码来完成, 比如 HTML 页面是个模板引擎, md5 文件后缀通过 Webpack 生成, 渲染一下就好.
-> 2, 看具体策略吧. 如果是静态文件, 一般通过 HTTP 协议检查文件的更新时间或者 etag, 不更新返回 304, 更新返回 200. HTML 文件放在服务器, 跟静态资源放在 CDN 生成 200(from cache) 区分开. 如果页面是需要针对每个请求渲染生成, 那一般就是 200 了.
-> 3, 整个过程麻烦地很, 根据业务和工具链还会有变化, 太复杂, 一般人没心情讲. 推荐去把国外的博客看, 比如 https://medium.com/@okonetchn...
相关文章:
1. flexbox - css3[flex-shrink]属性在子项有 padding/box-sizing 属性时,是如何计算子项宽度的?2. 【python小白】 问关于property的顺序问题3. 9.png中在同一方向上设置多个拉伸位置,在android studio中怎么弄出来?4. angular.js - angular1如何使用跨域后的得到的数据5. angular.js - 如何在指令里使用ng-click6. android-studio - Android Studio 中有没有类似C#的#if DEBUG功能7. angular.js input输入正确数据框变红色8. JS怎么给每相隔一行的TD添加filter滤镜?9. angular.js - Angular 像这种重复判断的表达式 有什么好的解决办法吗?~10. android-studio - android studio自带模拟器中的本地“图库”所对应的路径是什么?