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. Odoo中本日、本月、上月过滤器实现方法

    <filter string="今日订单" name="today" invisible="0" domain="[('da ...

  2. 启用apache,发现80端口被占用【已解决】

    前段时间停止了Apache,结果在打开的时候发现无法打开,80端口被占用,于是win+r 运行cmd 输入netstat -ano 可以看到80端口被PID4占用,于是打开任务管理器-进程-查看,选择 ...

  3. Objective-O Runtime 运行时初体验

    Objective-C语言是一门动态语言,它将很多静态语言在编译和链接时期做的事放到了运行时来处理.这种动态语言的优势在于:我们写代码时更具灵活性,如我们可以把消息转发给我们想要的对象,或者随意交换一 ...

  4. Lua系统库

    Lua为了保证高度的可移植性,因此,它的标准库仅仅提供了非常少的功能,特别是和OS相关的库.但是Lua还提供了一些扩展库,比如Posix库等.对于文件操作而言,该库仅提供了os.rename函数和os ...

  5. mount windows-linux文件共享

    . (2)在linux下访问windows共享: smbclient -L 192.168.2.12 -U admin   //查看共享了那些目录,由此知道主机名为XIAOXING-PC smbcli ...

  6. Ubuntu播放yuv文件

    mplayer -demuxer rawvideo -rawvideo w=176:h=144 test.yuv mplayer -fps 30 test.264 ffmpeg采集摄像头视频数据 ff ...

  7. windows php 5.5 执行exe 不是有效的win32程序

    双击运行php-cgi.exe弹出对话框提示不是有效的win32应用程序.此为版本问题,PHP5.5版本 最低要运行于操作系统版本号最低要6.0 ,而WINDOWS 2003 系统为5.2 因此无法运 ...

  8. 数据库使用数据泵迁移遇到LOB字段

    impdp system/Clic1234 attach=SYS_IMPORT_ILEARN_TRA desc ILEARN_TRA.NOTIFI_TACTIC desc ILEARN_TRA.MSG ...

  9. redis原子性读写操作之LUA脚本和watch机制

    最近在开发电商平台的子系统--储值卡系统,系统核心业务涉及到金额消费以及库存控制,因此为了解决建立在内存上高并发情况下的事务控制,使用了spring封装的RedisTemplate执行lua脚本进行原 ...

  10. 视觉机器学习读书笔记--------SVM方法

    SVM是一种二类分类模型,有监督的统计学习方法,能够最小化经验误差和最大化几何边缘,被称为最大间隔分类器,可用于分类和回归分析.支持向量机的学习策略就是间隔最大化,可形式化为一个求解凸二次规划的问题, ...