tips 前端阻止浏览器缓存静态资源

手机浏览器 uc上一直表现良好 qq浏览器还有微信上网址直接打开的(一样采用qq浏览器的内核) 大量缓存了静态资源 css js 图片等这些当出现改动了刷新网页根本没有效果电脑端浏览器没有问题因为部分手机端浏览器总会出于省流量性能等因素缓存静态资源本来没有什么问题不过这会给开发带来困扰不适合调试如果只是这样还好可是还是会对生产环境造成一定影响比如当服务器端的css文件内内容有了改动手机端浏览器却一直没有释放缓存就会造成一些页面上出现明显的问题所以给css js jpg swf…

前端遇上Go: 静态资源增量更新的新实践

前端遇上Go: 静态资源增量更新的新实践https://mp.weixin.qq.com/s/hCqQW1F8FngPPGZAisAWUg 前端遇上Go: 静态资源增量更新的新实践原创: 洋河美团技术团队前天总第259篇 2018年第51篇为什么要做增量更新美团金融的业务在过去的一段时间里发展非常快速.在业务增长的同时,我们也注意到,很多用户的支付环境,其实是在弱网环境中的. 大家知道,前端能够服务用户的前提是 JavaScript 和 CSS 等静态资源能够正确加载.如果网络环境…

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

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

tomcat缓存静态资源深入

之前看过apach及nginx对于静态资源(含js,图片,css等)部分的缓存,用于加速并减轻后台实际web服务器的压力. 静态资源缓存是WEB服务器优化的一种手段,基本原理如下: 1.客户端浏览器请求服务器一个服务(该服务含有图片,js等静态资源),通常会对于每一个网页中的独立图片或js文件发送一个http请求 2.WEB服务器对于每个资源HTTP请求进行解析,并生成一个资源修改时间的唯一值(可以是etag或last_modified参数),放入服务器端map,key为资源url,value为…

ASP.NET Core缓存静态资源

背景缓存样式表,JavaScript或图像文件等静态资源可以提高您网站的性能.在客户端,总是从缓存中加载一个静态文件,这样可以减少对服务器的请求数量,从而减少获取页面及其资源的时间.在服务器端,由于它们的请求较少,服务器可以处理更多的客户端而无需升级硬件. 虽然缓存是一件好事,但您必须确保客户端始终运行最新版本的应用程序.当您部署下一个版本的网站时,您不希望客户端使用过时的缓存版本的文件. 方案: 为确保用户始终使用最新版本的文件,我们必须为每个文件版本提供一个唯一的URL.有很多策略: 使用…

apache下用expires_module让浏览器缓存静态文件

让浏览器缓存CSS.JS.图片.静态文件等是很重要的事情,这样可以减轻服务器的压力,省的浏览器经常要去服务端下载这些静态文件.下面看看配置方法吧. 1.开启apache扩展模块mod_expires.so,在apache的配置文件中加入下面一行代码. LoadModule expires_module modules/mod_expires.so 2.配置缓存,在apache配置文件中加入下面一段代码 <IfModule expires_module> #打开缓存 Expires…

解决前端向后端请求静态资源的问题（基于express框架）

请求js,css,image资源: 前端 <script src='后端url/assets/js/xxx.js'>,<link href='后端url/assets/css/xxx.css' >,<img src='后端url/assets/image/xxx.jpg' > 后端 app.use('/assets',express.static('assets')) 当require.url以/assets开头则在assets文件夹中寻找对应的文件…

SpringBoot cache-control 配置静态资源缓存（以及其中的思考经历）

昨天在部署项目时遇到一个问题,因为服务要部署到外网使用,中间经过了较多的网络传输限制,而且要加载arcgis等较大的文件,所以在部署后,发现页面loading需要很长时间,而且刷新也要重新从服务器下载文件.这当然是不能忍受的,即使在不考虑文件大小的情况下,我们也希望我们的静态文件如js, css, json, img等,可以在刷新的时候尽量不重新加载,这样我们的页面会变得更有效率即使在网络不好的状况下. 那么问题来了: 我们如何在刷新浏览器时,使自己的项目中的任何可控静态文件,被浏览器缓存? 就…

Nginx的静态资源缓存以及压缩

Nginx是一款轻量级的网页服务器.反向代理器以及电子邮件代理服务器.Nginx采用的是异步非阻塞的通信机制(epoll模型),支持更大的并发连接.所谓的epoll模型:当事件没有准备好时,就放入epoll(队列)里面.如果有事件准备好了,那么就去处理:如果事件返回的是EAGAIN,那么继续将其放入epoll里面.从而,只要有事件准备好了,我们就去处理它,只有当所有事件都没有准备好时,才在 epoll里面等着.这样,我们就可以并发处理大量的并发了,当然,这里的并发请求,是指未处理完的请求,线程…

nginx静态资源缓存与压缩

一.静态资源缓存参考文章 (1)apache设置max-age或expires 这里需要修改.htaccess文件. <IfModule mod_headers.c> <FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$"> Header set Cache-Control "max-age=604800, public" </FilesMatch> <File…

关于document.write()加载JS等静态资源和异步async加载JS

现流行浏览器对于静态资源的预加载传统的浏览器,对于静态资源加载,会阻塞 HTML 解析器的线程进行,无论内联还是外链. 例如: <script src="test1.js"></script> <script src="test2.js"></script> <script src="test3.js"></script> <img src="img.png…

静态资源（JS/CSS）存储在localStorage

一.简单了解SEO SEO由英文Search Engine Optimization缩写而来, 中文意译为“搜索引擎优化”.SEO是指从自然搜索结果获得网站流量的技术和过程. 搜索引擎不优化的网站分为以下特征: 1.网页中大量采用图片或者Flash等富媒体(Rich Media)形式,没有可以检索的文本信息,而SEO最基本的就是文章SEO和图片SEO: 2.网页没有标题,或者标题中没有包含有效的关键词: 3.网页正文中有效关键词比较少(最好自然而重点分布,不需要特别的堆砌关键词): 4.网站导航…

浏览器缓存（Web Cache/ Http Cache）

浏览器缓存(Web Cache/ Http Cache)是前端性能优化中很重要的组成部分. 缓存策略浏览器的缓存策略是: 1.如果本地没有缓存,则发送非条件性请求. 2.如果本地有缓存,则判断本地缓存是否在时间有效期内:如果有效,则直接读取. 3.如果本地缓存不在时间有效期内,则发送条件性请求.浏览器来判定本地资源是否未变动或是重新发送资源. 整体策略如图所示缓存过程一.本地无缓存首次加载,浏览器没有资源的备份,服务器返回200. 二.缓存根据返回报文的返回头,浏览器会采取不同的缓存方…

js操作serviceWorker缓存静态文件

js操作serviceWorker缓存静态文件 serviceWorker的作用就是用来做离线应用的,在手机端程序中用的较多先看下效果 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,…

nginx配置1：借助Nginx搭建反向代理服务器与缓存静态文件

修改配置文件nginx.conf (1)进程数与每个进程的最大连接数: •nginx进程数,建议设置为等于CPU总核心数 •单个进程最大连接数,那么该服务器的最大连接数=连接数*进程数 (2)Nginx的基本配置: •监听端口一般都为http端口:80; •域名可以有多个,用空格隔开:例如 server_name www.ha97.com ha97.com; (3)负载均衡列表基本配置: •location / {}:对aspx后缀的进行负载均衡请求,假如我们要对所有的aspx后缀的文件进行负载…

SpringMVC 静态资源处理

<mvc:default-servlet-handler/><mvc:resources location="/css/" mapping="/css/**"/><mvc:resources location="/images/" mapping="/images/**"/><mvc:r…

springBoot怎样访问静态资源?+静态资源简介

1.静态资源怎样通过浏览器访问静态资源? 注意:不需要加static目录.因为只是告诉springboot目录,而不是静态资源路劲. 这时访问路径就需要加上/static…

前端工程精粹（一）：静态资源版本更新与缓存（附精简js的工具）

转自:http://www.infoq.com/cn/articles/front-end-engineering-and-performance-optimization-part1/ 每个参与过开发企业级web应用的前端工程师或许都曾思考过前端性能优化方面的问题.我们有雅虎14条性能优化原则,还有两本很经典的性能优化指导书:<高性能网站建设指南>.<高性能网站建设进阶指南>.经验丰富的工程师对于前端性能优化方法耳濡目染,基本都能一一列举出来.这些性能优化原则大概是在7年前提出的…

Nginx针对前端静态资源的缓存处理

当用户上报一个线上的bug后,开发者修改前端代码的bug上新后,用户反映问题依旧存在的问题...这种情况是不是曾经遇到过,这个问题跟浏览器的缓存机制有很大关系(强制缓存和协商缓存,这里我就不介绍具体的缓存机制了,网上资料一搜一大把,并且讲的很详细),这里我来说下我们是如何解决这个问题的... 最简单粗暴的办法就是禁止强制缓存,我们本地开发的时候经常打开chrome这个功能,启用方法如下,这样我们每次刷新页面都是最新的代码,浏览器不会缓存任何静态资源(不知道这么说是不是真的合理...) 当然这种方…

Thymeleaf模板引擎绕过浏览器缓存加载静态资源js,css文件

浏览器会缓存相同文件名的css样式表或者javascript文件.这给我们调试带来了障碍,好多时候修改的代码不能在浏览器正确显示. 静态常见的加载代码如下: <link rel="stylesheet" href="/css/all.css"> <script src="/js/main08.js"></script> 我们可以在加载静态资源的,每次向服务器发送一个新的请求.来加载新的资源文件.做法如下 <…

前端静态资源版本更新与缓存之——gulp自动化添加版本号

公司项目每次发布后,偶尔会有缓存问题,然后看了下gulp,发现gulp还能给js,css自动化添加版本号,可解决缓存的问题,所以自动化实现静态资源的版本更新才是正道.通过网上的资料试过了两种办法: 1.生成一个新的dist目录,里面包含了要发布的html,js,css等文件 . 2.在原来的HTML文件上进行js ,css版本的替换,不需要生成新的目录文件. 通过两种方法的实践过程对比,决定使用第二种办法,所以这里介绍一下第二种方式的实现过程: 一. 1. 修改js和css文件 2. 通过对js…

.htaccess设置静态资源缓存(即浏览器缓存)

在HTTP标头中为静态资源设置过期日期或最长存在时间,可指示浏览器从本地磁盘中加载以前下载的资源,而不是通过网络加载.这样, 网站加载速度会更快. 下面的代码都需要放到.htaccess中才能生效. 推荐设置过期时间为一个月, 即: max-age=2592000. 通过FilesMatch设置 <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|css|js)$">Header set Cache-Control "max-a…

Nginx实践篇（2）- Nginx作为静态资源web服务 - 控制浏览器缓存、防盗链

一.控制浏览器缓存 1. 浏览器缓存简介浏览器缓存遵循HTTP协议定义的缓存机制(如:Expires;Cache-control等). 当浏览器无缓存时,请求响应流程当浏览器有缓存时,请求响应流程浏览器缓存校验过期机制校验是否过期 Cache-Control(max-age).Expires 协议中Etag头信息校验 Etag Last-Modified头信息校验 Last-Modified 浏览器请求流程 2. Nginx控制浏览器缓存配置 Nginx通过添加Cache-Control…

引用静态资源的url添加版本号，解决版本发布后的浏览器缓存有关问题

在日常的工作中,我们经常会遇到页面文件(html,jsp等)中引用的js,css,图片等被修改后,而浏览器依然缓存着老版本的文件,客户一时半会看不到修改后的效果,同时也给生产环境的版本发布带来了一些问题. 其实遇到这种问题,我们第一反应是清空浏览器缓存,但是我们不是客户啊,也不能要求客户每次去清空缓存.所以遇到这种问题我们的解决方法如下: 通常的解决方法就是在资源后跟上随机的参数或者版本号,日期等,来刷新浏览器的缓存使其到服务器上重新下载这些文件,如淘宝:http://a.tbcdn.cn/p/…

[分享黑科技]纯js突破localstorage存储上线，远程抓取图片，并转码base64保存本地，最终实现整个网站所有静态资源离线到用户手机效果却不依赖浏览器的缓存机制，单页应用最新黑科技

好久没有写博客了,想到2年前答应要放出源代码的也没放出来,最近终于有空先把纯js实现无限空间大小的本地存储的功能开源了,项目地址https://github.com/xueduany/localstore,demo见http://xueduany.github.io/localstore/,下面给大家简单说说大概原理,具体细节和异常处理后面有机会在单独说先说下突破本地localStorage的原理,官方原话是这么说的http://www.w3.org/TR/2013/PR-webstorage…

gulp管理静态资源缓存

前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,size一栏是from cache,也就是直接使用了本地的资源,而没有向服务器请求.这样做的好处是提升页面渲染速度,坏处是当服务器的对应的文件发生变化时,浏览器却还是使用缓存,造成布局混乱的问题. 解决办法一个比较原始的办法是在修改了文件之后,手动改变文件名称,然后再在html手动更新资源的path…

循序渐进nginx(二)：反向代理、负载均衡、缓存服务、静态资源访问

目录反向代理使用 1.创建代理目标服务端: 2.配置nginx反向代理目标服务端: 3.测试使用: 负载均衡使用 1.准备服务端 2.修改nginx配置 3.测试负载均衡策略负载均衡的额外参数缓存服务代理缓存语法介绍使用例子代理缓存补充: 浏览器缓存测试静态资源访问前置知识章节: 1.介绍.安装.hello world.location匹配 2.反向代理.负载均衡.缓存服务.静态资源访问 3.日志管理.http限流.https配置,http_rewrite模块,第三方模…

HappyAA服务器部署笔记2(nginx的静态资源缓存配置)

我近期对服务器进行了少量改进,虽然之前使用了nginx反向代理之后性能有所提高,但仍然不够,需要使用缓存来大幅度提高静态资源的访问速度. 服务器上的静态资源主要有这些:png, jpg, svg, js, css等.下面,我通过新的nginx配置来实现缓存.对红色的字我会额外进行说明. worker_processes 1; events { worker_connections 1024; multi_accept on; use epoll; } http { include mime.ty…

利用 filter 机制给静态资源 url 加上时间戳，来防止js和css文件的缓存，利于开发调试

直接上代码: public class WeiXinFilter implements Filter{ private static Logger logger = LoggerFactory.getLogger(WeiXinFilter.class); public void init(FilterConfig fConfig) throws ServletException {} public void destroy() {} public void doFilter(ServletReq…

gulp之静态资源防缓存处理

最近,因为校友网项目开始有些规模了.开始就要考虑对静态资源进行工程自动化的管理.一讲到前端的自动化工具,大家或许都会想到Grunt,Gulp,或者百度的FIS.这三个都有各自的特点,大家可以依据自己的喜好,选择工具.至于为什么选择Gulp,因为Grunt的gruntfile配置真的很头大好吗!简直看到头晕晕,但是还是有不少人喜欢这种方式的.然后FIS真心很强大,你所需要的,基本它都提供了,并且做得很好很简单,如果你急于马上使用可以赶紧去看看.而我为什么不用呢,感觉可能是因为,有点黑盒子?哈哈哈.…

【tips 前端 阻止 浏览器缓存静态资源】的更多相关文章

【tips 前端阻止浏览器缓存静态资源】的更多相关文章