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

一.静态资源缓存 参考文章 (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

示例 # Media: images, icons, video, audio, HTC location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ { expires 1M; access_log off; add_header Cache-Control "public"; } REFs Nginx 静态资源缓存设置 Nginx Caching

Nginx静态资源 Nginx可以处理静态资源 非Web服务器可以运行处理而生成的文件,即服务器只需要从硬盘或者缓存中读取然后直接给客户端响应即可. 常见的静态资源 # 浏览器渲染: html文件,样式表CSS,JS脚本--浏览器需要读取样式格式和脚本,然后去渲染的. # 图片文件: GIF.PNG.JPEG # 视频文件: MP4.FLV.AVI.MPEG # 其它文件: ISO.PDF.TXT.EXE Nginx作为网站服务器,如何高效的处理静态资源,就需要让nginx速度变快,可以从以下几

之前写过一篇如何配置nginx缓存及手动清除缓存的文章: http://www.cnblogs.com/Eivll0m/p/4921829.html 但如果有大量缓存需要清理,手动一条条清理就比较慢了,所以写了个小脚本进行清理,脚本如下: #!/usr/bin/env python # -*- coding: UTF-8 -*- # data:2015-12-08 # author:eivll0m # 脚本用途:清除nginx静态资源缓存 # 使用方法:将要清除缓存的url粘贴到/app/adm

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

本文转自:https://www.w3cschool.cn/nginxsysc/nginxsysc-cache.html 在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apache不缓存配置和nginx不缓存配置的设置.在常用的缓存设置里面有两种方式,都是使用add_header来设置:分别为Cache-Control和Pragma. nginx: location ~ .*\.(css|js|swf|php|htm|html )$

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

1. 问题-背景 以前也经常用nginx,但用的不深,通常是简单的设置个location用来做反向代理.直到今天给客户做项目碰到缓存问题:客户有个app,只是用原生做了个壳,里面的内容都是用h5写的,我们半途接手将新版本静态资源部署到服务器上后,发现手机端一直显示老的页面,一抓包,发现手机端根本就没有去请求新的html页面,定位是缓存问题. 2. 配置 乍一看,客户原来的配置好像没什么问题,该有的也全有了 # 这是客户原来的配置 server { listen 80 default_server

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

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

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

nginx实现静态文件缓存实战 1.nginx静态文件缓存 如果要熟练使用nginx来实现文件的缓存,那下面的几个指令你必须要牢记于心 指令1:proxy_cache_path 作用:设置缓存数据的相关信息 Syntax: proxy_cache_path path [levels=levels] [use_temp_path=on|off] keys_zone=name:size [inactive=time] [max_size=size] [manager_files=number] [m

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

前言: 在我前面的博客,angular项目总结——angular + browserify + gulp + bower + less 架构分享  把我开发angular的架构进行了分享,并上传到了github https://github.com/zimv/zmNgFrameWork . 而后我又在我的 gulp系列 里分享了 gulp-rev:项目部署缓存解决方案----gulp系列(六) ,也更新了github上gulpStart的rev分支 https://github.com/zimv

1.将nginx-windows.zip下载下来,然后点击nginx.exe 如果一闪而过并且打开网页输入localhost显示无法访问,打开error.log文件:No mapping for the Unicode character exists in the target multi-byte code page 说明路径含有中文,存在在不含中文的路径即可. 2.在该目录下新建一个test.html,输入任意内容即可 然后访问localhost/test.html: 这就相当于把静态资源

前言:在一些中大型的网站中,都会专门配置一个处理静态资源的服务,下面我们来用NGINX实战配置下 配置静态资源的目的是为了加速静态资源的访问速度 比较简单,下面直接上配置了 以上就是文章内容的全部了

某天,有同学反馈后台管理系统出现静态资源无法加载的问题. 复现如下: 进入首页. 点击侧边栏某个子功能,静态资源可正常访问到. 等待10分钟左右,点击侧边栏其他子功能,无法访问到静态资源. 查看控制台,发现输出 Uncaught SyntaxError: Unexpected token < 一开始检查了一下是不是服务器上面没有这个静态资源文件,随机找了一台服(注意,从这里开始掉坑里了),发现文件是存在: 接着怀疑是静态文件因为某种原因,会不时变动文件名,但是测试了一下,半小时内文件未曾发生变动

在开发调试web的时候,经常会碰到因浏览器缓存(cache)而经常要去清空缓存或者强制刷新来测试的烦恼,提供下apache不缓存配置和nginx不缓存配置的设置.在常用的缓存设置里面有两种方式,都是使用add_header来设置:分别为Cache-Control和Pragma. nginx: location ~ .*\.(css|js|swf|php|htm|html )$ { add_header Cache-Control no-store; add_header Pragma no-ca

原理 修改js和css文件 通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化) 替换html中的js,css文件名,生成一个带版本号的文件名 方案 现在网上的方案都是生成一个新的dist目录,里面包含了要发布的html,js,css等文件.但是在实际的公司的项目中,会有情况不能生成新的HTML进行发布,需要在原来的HTML文件上进行js ,css版本的替换. 这里分享下我在实际项目中通过改动插件然后在原目录结构下进行版本的控制方案.