引出问题:

在做完一个项目迭代上线的时候遇到一个问题:Ht代码部署在nginx里面,当我打包的H5代码上传把之前代码替换掉之后,如果手机端之前有打开过相关的页面,那么在代码上传成功后再次打开,回出现一些js文件404(在PC上也是一样)

分析问题:

H5代码使用webpack打包之后会把所有的js文件按照规则命名

所以每次代码有改动的话,打出的新包会和老包里面的js文件名称不一样;

那么回到开始的问题

为什么会出现404,那么一定是那些js文件被删掉了,

怎么会被删掉呢?因为上传新包就把老包删掉了;

那么新包都上传了为什么还在请求老包的js呢?一定是页面被缓存了;

解决问题:

一开始我能想到的办法就是在HTML文件的head内写一些meta标签来禁止缓存,结果发现,没有任何luan用;

于是我就查了下关于HTTP的工具书,得知:每次HTTP请求

都会先发送一个新鲜度检测到server端,然后server端会告诉客户端是否需要发送本次请求,

那怎么看最后到底请求了没有呢,就看最终的HTTP状态码,如果是200说明请求了,如果状态码是304那就说明没有请求,使用了本地缓存;

那么server端和client端是通过什么来进行新鲜度检测呢?

主要是靠两个东西:

Etag/if-none-match

Last-Modify/If-Modify-Sice

没错,我们的项目出现问题就是请求出现了304,HTML文件没有通过HTTP的新鲜度检测,所以走的缓存,那么这就好办了;

我们直接来修改nginx配置文件,把HTML文件保持新鲜度

这样一来每次请求都不会走缓存了,问题解决

补充:

那么,我们会想到,每次请求都不走缓存是不是太消耗服务器的带宽了,给服务器带来了压力,从而提高了网络费用啊,

是的这个问题是有一点,但是我也看了,我们打包之后的代码只有一个HTML文件(VUE为SPA),而且这个文件很小

还不到1kb,所以我觉得可以暂时忽略这个问题;

另外,我也试了使用nginx的话,当我们有修改webServer下的HTML文件后,当我们再次请求该文件时,浏览器会自动拉去最新的代码;

但是我们的项目为什么就不会呢?我想到我们的webServer是通过tomcat反向代理到nginx上面的,多以我就明白了。

HTML页面缓存的更多相关文章

  1. 探索ASP.NET MVC5系列之~~~5.缓存篇(页面缓存+二级缓存)

    其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...

  2. Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解

    转载:http://freeloda.blog.51cto.com/2033581/1288553 大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负 ...

  3. cache-contro页面缓存处理设置

    <meta http-equiv="pragma" content="no-cache">,pragma与no-cache用于定义页面缓存,不缓存页 ...

  4. webform的页面缓存

    给页面添加<%@ OutputCache Duration="10" VaryByParam="*"%>标签就可以启用页面缓存. Duration表 ...

  5. 【WP开发】正确理解页面缓存

    注:本文内容面向Runtime App. 在新建项目后,细心观察,你会发现在App类中有以下代码: // TODO: 将此值更改为适合您的应用程序的缓存大小 rootFrame.CacheSize = ...

  6. [转]MVC3缓存之一:使用页面缓存

    本文转自:http://www.cnblogs.com/parry/archive/2011/03/19/OutputCache_In_MVC3.html 在以前的WebForm的开发中,在页面的头部 ...

  7. [转]Asp.net mvc 网站之速度优化 -- 页面缓存

    网站速度优化的一般方法 由于网站最重要的用户体验就是速度,特别是对于电子商务网站而言. 一般网站速度优化会涉及到几个方面: 1. 数据库优化 — 查询字段简历索引,使用数据库连接池和持久化,现在还有种 ...

  8. Nginx反向代理、负载均衡、页面缓存、URL重写及读写分离详解

    大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...

  9. ASP.NET 页面缓存

    ASP.NET 实现页面缓存页面缓存的使用方法非常的简单,只需要在aspx页的顶部加一句声明<%@ OutputCache Duration="60" VaryByParam ...

  10. MVC3缓存之一:使用页面缓存

    MVC3缓存之一:使用页面缓存 在MVC3中要如果要启用页面缓存,在页面对应的Action前面加上一个OutputCache属性即可. 我们建一个Demo来测试一下,在此Demo中,在View的Hom ...

随机推荐

  1. nginx介绍与安装

    1.nginx作用可以配置数十个场景 ​ ​ 2.环境安装 环境确认 ​ 安装环境 yum -y install gcc gcc-c++ autoconf pcre-devel make automa ...

  2. Scrapy的基本使用

    爬取:http://quotes.toscrape.com 单页面 # -*- coding: utf-8 -*- import scrapy class QuoteSpider(scrapy.Spi ...

  3. java8 stream自定义分组求和并排序

    public static void main(String[] args) { List<GroupDetailDTO> list = new ArrayList<>(); ...

  4. 使用doxygen

    Getting started with Doxygen 可执行文件doxygen是解析源文件并生成文档的主程序. 另外, 也可以使用可执行文件doxywizard, 是用于编辑配置文件, 以及在图形 ...

  5. [转]dll反编译工具(ILSpy)的使用

    软件地址: 链接:https://pan.baidu.com/s/1YunJ3MAuNisGtl8YYzr4hw 密码:ejx8 工具使方法 1.将压缩文件进行解压,打开exe文件. 2.打开后,选择 ...

  6. 2019中国大学生程序设计竞赛-女生专场(重现赛)部分题解C-Function(贪心+优先队列) H-clock(模拟)

    Function 题目链接 Problem Description wls 有 n 个二次函数 Fi(x) = aix2 + bix + ci (1 ≤ i ≤ n). 现在他想在∑ni=1xi = ...

  7. 曹工说Spring Boot源码(13)-- AspectJ的运行时织入(Load-Time-Weaving),基本内容是讲清楚了(附源码)

    写在前面的话 相关背景及资源: 曹工说Spring Boot源码(1)-- Bean Definition到底是什么,附spring思维导图分享 曹工说Spring Boot源码(2)-- Bean ...

  8. redis 常用命令行

    一.key 相关: ()redis允许模糊查询 key(keys *) 有3个通配符 *.?.[] ()randomkey:返回随机key ()type key:返回key存储的类型 ()exists ...

  9. latex使用总结

    1 输入双引号以及单引号: 双引号:按两下 Tab键上方的键, 再按两下单引号键. 单引号:按一下Tab键上方的键,再按一下单引号键. 原文地址 2 时间复杂度的O写法: $\mathcal{O}$ ...

  10. HDU_1035_水

    http://acm.xidian.edu.cn/problem.php?id=1035 本来想用goto优化一下的,不知道什么情况,加了goto就wa了. #include<iostream& ...