1,困惑

做web项目,对于开发者来说,一个最头痛的问题就是浏览器缓存,有缓存,js更改了,html更改了,发布服务器以后用户往往无法通过浏览器访问到最新的类容,需要用户主动去刷新页面,

因为一直做企业后台管理,针对人少的公司直接通知刷新页面(这也是做内部系统才敢这么给用户说),超千人的公司,跨省跨国的,就直接会被劈了,网上有很多解决方案,比如在js上添加版

本号这个方法可行,因为浏览器的缓存机制是针对是针对url来缓存的,比如添加:"http://test.com/test.js?verson=1.1" (这里verson只是为了好看,其实随便怎么写的可以

ru:aaa,bbb.ccc都可以只要和上次不一样就可以了).之前用做extjs的时候就是 用这种方案自定义个JavaScript标签 在每次发布文件后,都批量跟新一下版本号,这么做就保证每个js都是最新版本,这么做有个问题就是,发了一个js文件,其他文件,浏览器都要从服务器去取,如果小项目那就无所谓.

现在公司用的html页面+angular js ,自定义标签是行不通了,这里就是下nginx解决方案;

2,nginx解决方案

原理就是告诉浏览器哪些要缓存哪些不用缓存,通过设置响应头来实现

比如:

location /tpp3 {  
                root   html;  
                  #js css html 文件不缓存
                  if ($request_filename ~* ^.*?.(js|html|css)$){
                     add_header Cache-Control no-cache;
                  }
                  if ($request_filename ~* ^.*?.(txt|doc|pdf|rar|gz|zip|docx|exe|xlsx|ppt|pptx|jpg|png)$){
                    add_header Cache-Control max-age=864000;#缓存一天
                  
                 }
                proxy_pass  http://tppip/tpp3;  
                proxy_set_header  X-Real-IP  $remote_addr;  
                client_max_body_size  100m;  
                index  index.html index.htm;
                               
            }

上面只是一个最基础的列子,实际项目中,js,html ,css也是肯定需要缓存的,针对哪些图片,音频文件直接的可以长期缓存,

配置上面代码至少可以保证发布html,css,js文件,用户取到看到的效果都是最新数据,可以看下浏览器监控发现:

html:

图片:

可以发现html文件一直都是304 Not Modified 而图片都是 200ok(BFCahe)(两个区别可以参考:https://www.bokeyy.com/post/200-ok-from-cache-vs-304-not-modified.html这里)

结尾:时间有限这里只是初步介绍下还未应用到项目中,后期会有完整的前端优化解决方案,如果有更好方案的大神望分享!

nginx,控浏览器缓存,前端优化方案的更多相关文章

  1. Nginx与浏览器缓存

    Nginx与浏览器缓存 一.浏览器对缓存的处理:Internet选项 ★ 控制请求服务器策略:是忽略资源的缓存策略的情况下额外强制请求服务器的意思.  ★ 检查存储的页面较新版本 1.每次访问网页时  ...

  2. nginx 与 浏览器缓存

    一.本地静态文件 location /html/{ rewrite ^(html/.*)$ /$1 break; root /data/static; expires 12h; etag off; i ...

  3. Web前端 优化方案

    1.减少Http请求  在一个页面中图片,CSS,JS可能N个,如果每个资源都去请求一次服务器的话,那么服务器就会为每个资源开一个线程来完成,这样的话对服务器的压力就很大了.所以解决的方法就是合并资源 ...

  4. Nginx 决策浏览器缓存是否有效

    expires指令是告诉浏览器过期时间 syntax:expires [modified] time; eopch | max | off; default : off context :http,s ...

  5. # Nginx设置浏览器缓存

    配置语法 在location或if段里,来写. 格式 expires 30s; expires 30m; expires 2h; expires 30d; (注意:服务器的日期要准确,如果服务器的日期 ...

  6. nginx 禁止浏览器缓存

    如果我们使用Nginx作为静态资源服务器,那么可以使用expires进行缓存控制. location /{ expires 1s; } 如果Get页面未做任何修改,服务器就是对客户端返回304 Not ...

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

    一.控制浏览器缓存 1. 浏览器缓存简介 浏览器缓存遵循HTTP协议定义的缓存机制(如:Expires;Cache-control等). 当浏览器无缓存时,请求响应流程 当浏览器有缓存时,请求响应流程 ...

  8. CSS3与页面布局学习笔记(八)——浏览器兼容性问题与前端性能优化方案

    一.浏览器兼容 1.1.概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题.不同浏览器其内核亦不尽相同,相同内核的版本不同,相同版本的内核浏览器品牌不一样,各种运 ...

  9. 【nginx网站性能优化篇(1)】gzip压缩与expire浏览器缓存

    gzip压缩 概述 网页在服务器端经过了gzip或者其他格式的压缩后的输出明显减少了content-length字节,当访问过百万时,这些减少的字节就会变为客观的流量给节约下来;从而减轻服务器的压力以 ...

随机推荐

  1. Linux 下 JAVA 安装及配置

    1. 要 安装JDK7,当然是要有JDK的二进制文件拉..这个简单,直接在ORACLE的官网中下载就可以拉 http://www.oracle.com/technetwork/java/javase/ ...

  2. spark 2.0 Vector toBreeze

    def toBreeze( _v : Vector ) : BZV[Double] = { _v match { case x : org.apache.spark.mllib.linalg.Dens ...

  3. extjs后自己写了一些见不得人的脚本

    <html> <head> <title> 配置管理器 </title> <style type="text/css"> ...

  4. 【emWin】例程八:绘制位图

    实验指导书及代码包下载: 链接:http://pan.baidu.com/s/1bpeMYpp 密码:wgtp 实验现象:

  5. php http头设置相关信息

    HTTP 状态码 状态码用来告诉HTTP客户端,HTTP服务器是否产生了预期的Response. HTTP/1.1中定义了5类状态码, 状态码由三位数字组成,第一个数字定义了响应的类别 1XX 提示信 ...

  6. DataBinding examples

    Databinding in Windows Forms demo (CSWinFormDataBinding) /************************************* Modu ...

  7. win 10 常见问题

    Microsoft Edge Can't Open Local Domains IE Edge浏览器打不开本地站点 解决方法:解决方法

  8. 国家以及国家语言的json数据格式,提供给网友参考。

    目前接触到一个需求,需要全球主要国家的选择以及语言的选择,如下图: 这是国家选项 这是语言的选项: 很简单有木有? 本来打算直接给文件,但是好像没有文件上传,所以就提供一个思路和代码,你们照着弄吧. ...

  9. Redhat 一则关于路由及DNS配置的实例

    安装了Redhat 7.2, 配置路由, 但发现路由重启之后,不能生效. 配置路由: touch /etc/sysconfig/static-router, 然后编辑路由信息如下. any defau ...

  10. windows 系统时钟

    偶然发现了一个函数用以查询操作系统的时钟间隔: BOOL WINAPI GetSystemTimeAdjustment( _Out_ PDWORD lpTimeAdjustment, _Out_ PD ...