部署到线上的步骤:

拿到打包之后的文件,删除服务器上的文件,再放上去的。

测试1:

更改js文件,删除并上传新包。

额外发现1:如果用户在上传期间,仍然在系统之内,此时即使将服务器上的包删除掉,用户不会跳出系统,只会在控制台上报错。

报错内容:

只是在报错服务器上没有指定的html文件

额外发现2:

已经被缓存了的页面html 刚进页面时会进行从服务器200取到,随后删除服务器的包,已经被缓存下来的html页面是可以正常操作的。

此时再上传新包,用户仍然在已经缓存的页面里,按照老系统正常跑。访问未缓存的页面,再看引用的js与css文件,还是在使用老的js与css,并不是最新的,只是html因为是从服务器上取来的,所以取到的html是最新的。

在发现1的情况下,再将删除的包恢复,这时又可以正常访问了,控制台不再报错,不过系统还是在请求老的js文件。

用户在登录界面上操作时,仍然这样。

用户如果点击退出,会取到最新部署的包。

用户点击收藏在浏览器上的地址,也会重新获取包。

用户重新输入网址,也会重新重新获取包。

从官网测试链接跳转,会重新获取包

测试2:

用户在系统之外,更新系统。是没有缓存的。

综上得到的结论

当单页面的系统在重新部署更新时,此时正在浏览网页,并且已经在网页内的用户,始终会使用老的js与css文件,一直在使用已经缓存了的静态资源。

所有的缓存问题焦点都在index.html上,只要index.html刷新即可重新获取代码。

解决方案:

1:在路由跳转时即刷新index页面

缺点:不管有没有更新部署,页面都会得到刷新。

2:在打包之后的dist文件夹里插入一个js文件,作为版本监控,每次路由转变/发送请求时,对这个js文件做回调,并且这个js文件,不被引入index内。

3:在服务端给予一个版本号的返回接口,每次发送请求时,先检查版本号,版本号不正确了 就刷新页面。

4:这是一个比较简单又暴力的方法

 <title>XXXXX</title>
<script type="text/javascript">
var url=window.location.href,oldTime,roleSesstion = window.sessionStorage.getItem('partnerNo');
oldTime = (url.indexOf('?v')==-1) ? 0 : (url.match(/v=(\S*)#\//) ? url.match(/v=(\S*)#\//)[1] : url.match(/v=(\S*)/)[1]);
if(((new Date()).getTime()-oldTime)>600000 && !roleSesstion) {
window.location.href = '?v=' + (new Date()).getTime()
}
</script>

  

这个是直接在进入网站之前,在index.html页面上加上了一个时间戳作为版本控制,这样就可以在网址的请求地址上看见增加了一个参数,而由于index页面是被缓存的,所以加了参数请求,也只是会报304,亲测有效,可以尝试。

SPA页面缓存再优化二的更多相关文章

  1. App架构师实践指南五之性能优化二

    App架构师实践指南五之性能优化二 2018年07月30日 13:08:44 nicolelili1 阅读数:214   从UI和CPU方面来说App流畅体验优化,核心为流畅度/卡顿性能优化. 1.基 ...

  2. SQL索引一步到位(此文章为“数据库性能优化二:数据库表优化”附属文章之一)

    SQL索引一步到位(此文章为“数据库性能优化二:数据库表优化”附属文章之一) SQL索引在数据库优化中占有一个非常大的比例, 一个好的索引的设计,可以让你的效率提高几十甚至几百倍,在这里将带你一步步揭 ...

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

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

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

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

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

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

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

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

  7. JSP 页面缓存以及清除缓存

    一.概述 缓存的思想可以应用在软件分层的各个层面.它是一种内部机制,对外界而言,是不可感知的. 数据库本身有缓存,持久层也可以缓存.(比如:hibernate,还分1级和2级缓存) 业务层也可以有缓存 ...

  8. 更新页面缓存OutputCache

    为什么要使用OutputCache 我认为OutputCache是最简单的缓存技术了,它针对的是页面级别的,简单的一条指令就可以达到缓存的效果,有效的减轻服务器的压力和减少带宽,对于网站一些不会频繁更 ...

  9. 构建基于WinRT的WP8.1 App 01:页面导航及页面缓存模式

    本篇博文主要阐述基于Windows Runtime的Windows Phone 应用页面间导航相关知识,主要分为以下几个方面: Window.Frame和Page概览 页面间实现跳转 处理物理后退键 ...

随机推荐

  1. ubuntu vim简单命令

    1.ubuntu  vim 一些基本的命令. :set nu  或着 set number   设置行数 :set nonu          取消行数 ctrl+u                将 ...

  2. Authentication failed (rejected by the remote node), please check the Erlang

    官网提供的解决方案 Synchronise Erlang Cookies (when running a manually installedWindows Service) Erlang Secur ...

  3. Linux磁盘管理,vi编辑器以及包管理器

    一.Linux磁盘管理 Linux磁盘管理常用的三个命令为df,du,fdisk df:列出文件系统的整体磁盘使用量,利用这个命令来获取磁盘被占用了多少空间,,目前还剩下多少空间用法:df [-ahi ...

  4. textBaseline

    <!DOCTYPE html><html><body> <canvas id="myCanvas" width="400&quo ...

  5. zookeeper server处理客户端命令的流程

    zk server处理命令涉及到3个类,2个线程:一个命令请求先后经过PrepRequestProcessor,SyncRequestProcessor,FinalRequestProcessor. ...

  6. gdb调试分析多线程死锁

    转载: http://blog.chinaunix.net/uid-30343738-id-5757210.html #include <stdio.h> #include <pth ...

  7. SQL Server 调优系列玩转篇一(如何利用查询提示(Hint)引导语句运行)

    前言 前面几篇我们分析了关于SQL Server关于性能调优的一系列内容,我把它分为两个模块. 第一个模块注重基础内容的掌握,共分7篇文章完成,内容涵盖一系列基础运算算法,详细分析了如何查看执行计划. ...

  8. 【令人振奋】【转】微软潘正磊谈DevOps、Visual Studio 2013新功能、.NET未来

    日前,微软开发平台事业部全球资深副总裁潘正磊(Julia Liuson)从美国总部回到北京参加TechEd2013,在大会现场,潘正磊接受了CSDN的访谈,对于微软研发团队如何运用DevOps模式.对 ...

  9. 福大软工1816 · 第八次作业(课堂实战)- 项目UML设计(团队)

    团队 学号 姓名 本次作业博客链接 031602428 苏路明(组长) https://www.cnblogs.com/Sulumer/p/9822854.html 031602401 陈瀚霖 htt ...

  10. PostgreSQL11.2 configure卡住 checking for DocBook XML V4.2

    在PG11.2的数据库编译过程中,卡在了“checking for DocBook XML V4.2”,不动,需要安装docbook才可以. 需要安装: yum install docbook-dtd ...