使用缓存，是提升web性能最重要的方式之一。

在开发单页面应用的时候，大量的单静态资源引用都是依赖于html这个文件的。例如：

<!doctype html>

<html lang="en">

<head><link href="/static/css/main.dfe5fa49.css" rel="stylesheet"></head>

<body>

<script type="text/javascript" src="/static/js/main.c34d94a7.js"></script>

</body>

</html>

html,css,js文件可以缓存 都可以缓存。设想如下场景：

该页面内嵌入到app（或者微信）打开，静态文件缓存到app里面了。第一次访问，打开没问题，为了提升第二次访问的性能。我们应该设置缓存。缓存超时时间为1d（随便举例）。

即一天内我们随便访问这个页面都是 会从缓存中取资源。

问题来了：假如我们刚好在一天内，服务端静态静态资源有更新，怎么办？

css，js文件有hash值，但是html文件没有，html如果不更新，那么我们在指定时间内永远没法取到更新后的js和css值。

所以，我们的缓存策略是：不缓存html，只缓存js 和 css。

基于nginx静态文件服务器设置如下：

location /hhhh/ {

                  root   /home;

                 #index  index.html index.htm

                  try_files $uri /h5/index.html;

                  if ($request_filename ~* .*\.(?:htm|html)$)

                  {

                    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";

                  }

                 if ($request_filename ~* .*\.(?:js|css)$)

                 {

                   expires      7d;

                 }

                if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$)

                {

                  expires      7d;

                }

              }

至于其他的缓存策略，可以基于此再完善。

至于引用一个固定名称的，没有hash值的css或js，比如 abc.css 在服务端有更新，怎么处理这种缓存，我们后续再讨论。

http缓存策略-nginx只缓存js和css不缓存html的更多相关文章

  1. (网页)JS和CSS不缓存方法,时间戳

    <link ..... href=".....css?time"+new Date()> <script type="text/javascript&q ...

  2. webpack的最简单应用，只使用js与css的打包

    首先进行全局安装webpack npm install -g webpack cmd跳转到项目的文件夹,安装webpack npm install --save-dev webpack 接着需要pac ...

  3. nginx 图片，js，css等文件允许跨域

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ { #允许跨域请求 add_header Access-Control-Allow-Ori ...

  4. Android 开源框架Universal-Image-Loader完全解析（二）--- 图片缓存策略详解

    转载请注明本文出自xiaanming的博客(http://blog.csdn.net/xiaanming/article/details/26810303),请尊重他人的辛勤劳动成果,谢谢! 本篇文章 ...

  5. Universal-Image-Loader源码分析，及常用的缓存策略

    讲到图片请求,主要涉及到网络请求,内存缓存,硬盘缓存等原理和4大引用的问题,概括起来主要有以下几个内容: 原理示意图 主体有三个,分别是UI,缓存模块和数据源(网络).它们之间的关系如下: ① UI: ...

  6. 腾讯QQ你的缓存策略应该改下了

    缓存策略基本原则大家都怎么考虑的? 缓存好友数量这个也是醉了,这个数字好像变化频率有点低吧,ok,就算你企鹅用户量大,需要缓存,那肉肉的问一句你这更新策略也不能只管网上涨的,不管往下降的吧?难不成你是 ...

  7. 轻松理解HTTP缓存策略

    上一篇文章我写了koa-static的源码解析,其中用到了HTTP的缓存策略,给返回的静态文件设置了一些缓存的头,比如Cache-Control之类的.于是我就跟朋友讨论了一下HTTP的缓存策略: 朋 ...

  8. 【腾讯Bugly干货分享】彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/qOMO0LIdA47j3RjhbCWUEQ 作者:李 ...

  9. Http协议：彻底弄懂 Http 缓存机制 - 基于缓存策略三要素分解法

    转载:http://mp.weixin.qq.com/s/uWPls0qrqJKHkHfNLmaenQ 导语 Http 缓存机制作为 web 性能优化的重要手段,对从事 Web 开发的小伙伴们来说是必 ...

随机推荐

  1. 一般处理程序获取get，post数据

    ashx具体代码: public class GuanWangWC : IHttpHandler { public void ProcessRequest(HttpContext context) { ...

  2. Wpf开源收集

    1,到底有哪些开源MVVM框架? 前面介绍了WPF的基本概念和一些相关知识,我们了解到开发WPF应用程序可以使用现成的框架和模式,最为合适的莫过于时下正热的MVVM模式,所以这里我们也列出针对MVVM ...

  3. 关于jpa

    mappedBy 如果不写,会多生成一张id关联表,无论是一对多还是多对多,关联表名为两张原始表连接起来,顺序以字母英文排序 名字为类名的小写复数 被标记的类作为被维护者,写入时,需要以维护者repo ...

  4. postman插件部分Header设置无效的解决办法

    在使用chrome的postman插件模拟http请求的时候,碰到了设置的部分Headers无效的问题,比如说Referer设置后就无效,经过查询发现了问题原因,原因的具体说明参考postman官网的 ...

  5. python解决四舍五入问题

    小数问题是计算机编程中大部分语言都会遇到的问题,尤其是在内容中涉及到评分.金额计算等等,本人一般在解决需求中固定小数位的数字计算时,都会先将其放大整10的倍数至整数,然后计算.存储,只有在显示的时候再 ...

  6. 【kubenetus】kubenetus运维

    重启K8S服务 systemctl stop kubelet systemctl stop kube-apiserver systemctl stop kube-proxy systemctl sto ...

  7. 使用pgrouting进行最短路径搜索

       PgRouting是基于开源空间数据库PostGIS用于网络分析的扩展模块,最初它被称作pgDijkstra,因为它只是利用Dijkstra算法实现最短路径搜索,之后慢慢添加了其他的路径分析算法 ...

  8. 记录1-更换mac pro内存，硬盘及恢复系统

    我的mac pro是2012年初买的,4G/500G HDD在服役了六年多后速度堪比老牛,以前装的虚拟机压根不敢打开.这几天把内存更换为8G,硬盘升级为samsung的1T SSD,感觉像起死回生一样 ...

  9. 理解Linux文件权限

    任何完整的系统都应该具备有某种形式的安全性.必须用过某种机制来保护文件不被未授权的用户查看或修改:Linux系统遵循了Unix的文件权限的方法,来根据用户与用户组授权,实现文件安全访问. 1.Linu ...

  10. C# 控件之数据绑定

    增加一个委托方法,可以实现后台多线程直接更新UI界面的值,利用了控件的DataBindings,以及 INotifyPropertyChanged接口和事件委托机制. 如果只是通过INotifyPro ...