互联网企业静态资源的部署,如何充分利用浏览器缓存机制

浏览器获取静态资源方式:缓存、版本

从html文件中解析出静态资源的url,查看本地缓存是否存在、是否过期,是否需要重新获取。根据url全路径匹配查找是否存在,根据header的字段expire/cache-control等判断是否过期。

所谓版本信息,不过是静态资源url的一部分信息,通过修改服务器html里静态资源的版本信息,达到修改静态资源url路径的目的,从而实现客户端浏览器重新下载静态资源的目的。

版本示例:http://xx.x.x.x:8083/static/dll/vendor1.js?v=1534689158

关于版本信息内容的良好实践:根据静态资源的hash值生成版本号,这样静态资源变化,则版本号变化,从而引起客户端浏览器的重新下载

对于react项目使用webpack编译输出文件的过程中,可以生成带hash值的文件。文件变化,则hash值变化。

flask的静态资源文件插件:https://pythonhosted.org/Flask-Versioned/

或者使用flask的jinja2模板自带的模板过滤功能,自动给静态文件添加版本号。版本号为文件的修改时间。这样静态资源只要修改,则静态资源的版本号发生变化。其实最好还是使用静态资源的hash值比较好。毕竟文件的修改时间也是可以人为构造的。https://ana-balica.github.io/2014/02/01/autoversioning-static-assets-in-flask/

参考:

1、http://www.cnblogs.com/ihardcoder/p/5623411.html

2、https://zhuanlan.zhihu.com/p/24954527?refer=jscss

3、https://blog.csdn.net/u014590757/article/details/80140654

4、https://www.zhihu.com/question/20790576

5、https://blog.csdn.net/vencent7/article/details/77621212

6、https://ana-balica.github.io/2014/02/01/autoversioning-static-assets-in-flask/

原文地址:https://www.cnblogs.com/shengulong/p/9503292.html

时间: 2024-08-29 00:32:13

互联网企业静态资源的部署,如何充分利用浏览器缓存机制的相关文章

变态的静态资源缓存与更新

这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中. 在我的印象中,facebook是这个领域的鼻祖,有兴趣.有梯子的同学可以去看看facebook的页面源代码,体会一下什么叫工程化. 接下来,我想从原理展开讲述,多图,较长,希望能有耐心看完. 让我们返璞归真,从原始的前端开发讲起.上图是一个"可爱"的index.html页面和它的样式文件a.css,用文本编辑器写代码,无需编译,本地预览,确认OK,丢到服

大公司的静态资源优化方案

今天看到一篇关于浏览器缓存问题的文章,觉得很不错(大神就是牛叉呀). 大公司的静态资源优化方案,基本上要实现这么几个东西:. 配置超长时间的本地缓存 —— 节省带宽,提高性能 采用内容摘要作为缓存更新依据 —— 精确的缓存控制 静态资源CDN部署 —— 优化网络请求 更资源发布路径实现非覆盖式发布 —— 平滑升级 全文链接:http://www.zhihu.com/question/20790576:

静态资源放置于独立域名之下

今天看书时,某句话让我产生一个疑问,为什么静态资源要放在一个或者若干个独立的域名之下?我当时脑海中首先想到的就是为了动静分离,减轻web服务器压力,但是仔细一想不太对,如果仅是为了这个原因,大可不必启用那么多一级域名,用若干二级域名不是更好?于是带着这个疑问,拜访了搜索引擎.果然不出所料,原因不止这一个,现整理出来,作为备忘. 1.启用新的一级域名,每次请求浏览器不会携带cookie.这对于cookie内容比较大,并且流量大的网站会省去不少宽带费用.同时这也解惑了为什么不用二三级域名. 2.动静

Weex/Vue项目中静态资源缓存处理.md

目录 一.项目缓存问题 二.浏览器本地缓存 三.解决方案 今年公司技术考察,考察了EMAS平台,从而接触了weex,并且为了进行POC测试,大胆采用weex进行新web项目试点.weex内置了vue框架,整体框架与vue一致,好在刚接触了vue一段时间,因此用起来还算顺手,碰到问题weex官方文档没有的,基本都可以参考vue的文档. 一.项目缓存问题 第一次接触这类前后端完全分离的开发模式,一开始的确是一头雾水,一个多月时间,难点一点一点克服,目前进入项目测试阶段,经常碰到bug修复了,测试人员

nginx缓存静态资源,只需几个配置提升10倍页面加载速度

nginx缓存静态资源,只需几个配置提升10倍页面加载速度 首先我们看图说话 这是在没有缓存的情况下,这个页面发送了很多静态资源的请求: 1.png 可以看到,静态资源占用了整个页面加载用时的90%以上,而且这个静态资源还是已经在我使用了nginx配置压缩以后的大小,如果没有对这些静态资源压缩的话,那么静态资源加载应该会占用这个页面展示99%以上的时间.听起来是不是已经被吓到了,但是数据已经摆在这里了,这可不是危言耸听. 然后再看看使用了nginx缓存之后的效果图: 2.png 看到没有,朋友们

手把手教你构建 Android WebView 的缓存机制 & 资源预加载方案

前言 由于H5具备 开发周期短.灵活性好 的特点,所以现在 Android App大多嵌入了 Android Webview 组件进行 Hybrid 开发 但我知道你一定在烦恼 Android Webview 的性能问题,特别突出的是:加载速度慢 & 消耗流量 今天,我将针对 Android Webview 的性能问题,提出一些有效解决方案. 目录 1. Android WebView 存在什么性能问题? Android WebView 里 H5 页面加载速度慢 耗费流量 下面会详细介绍. 1.

用jetty部署iMatrix平台源码时,静态资源应该放到哪里

大家在网站中下载源码之后,在eclipse中部署源码,用jetty插件做服务器. 静态资源(imatrix-static)给刚到tomcat里面的webapps里面.放的事war包,在官网中就可以下载.如下图配置静态资源在tomcat服务器中的位置. Ps 一定要下载站对应版本的war包.每个配置文件中关于静态资源的配置都有修改. 用jetty部署iMatrix平台源码时,静态资源应该放到哪里,布布扣,bubuko.com

Hexo博客部署codingNet静态资源无法加载

用Hexo搭建的个人博客,部署到github的pages的话,好像百度搜索不到.所以在国内的codingNet的pages服务也一起部署一下,这样方便国内国外搜索引擎收录进来.具体部署教程我是参考这里但是今天部署到codingNet的pages服务的时候,发现静态资源都加载不到,后来网上搜索了半天,才发现原来你要打算用codingNet的pages服务部署你的博客的话,你创建项目的名字必须和用户名保持一致,不能自己随便自定义.我重新创建了一个和用户名一致的项目,部署到他的pages服务,访问正常

Gradle+Jetty实现静态资源的热部署

本文转自http://www.cnblogs.com/huang0925/p/3302487.html --------------------------------------- 通过Gradle我们可以很方便的使用内置jetty启动我们的web程序,在本地进行调试.但是在使用的过程中,我发现了几个问题,导致本地调试的效率大受影响. 如果使用gradle jettyRun启动jetty服务器后,项目里的静态资源(jsp,html,JavaScript文件)都被锁定了,导致无法实时修改这些静态