SPA页面缓存再优化二
部署到线上的步骤:
拿到打包之后的文件,删除服务器上的文件,再放上去的。
测试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页面缓存再优化二的更多相关文章
- App架构师实践指南五之性能优化二
App架构师实践指南五之性能优化二 2018年07月30日 13:08:44 nicolelili1 阅读数:214 从UI和CPU方面来说App流畅体验优化,核心为流畅度/卡顿性能优化. 1.基 ...
- SQL索引一步到位(此文章为“数据库性能优化二:数据库表优化”附属文章之一)
SQL索引一步到位(此文章为“数据库性能优化二:数据库表优化”附属文章之一) SQL索引在数据库优化中占有一个非常大的比例, 一个好的索引的设计,可以让你的效率提高几十甚至几百倍,在这里将带你一步步揭 ...
- 探索ASP.NET MVC5系列之~~~5.缓存篇(页面缓存+二级缓存)
其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
- Nginx 反向代理、负载均衡、页面缓存、URL重写及读写分离详解
转载:http://freeloda.blog.51cto.com/2033581/1288553 大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负 ...
- 【WP开发】正确理解页面缓存
注:本文内容面向Runtime App. 在新建项目后,细心观察,你会发现在App类中有以下代码: // TODO: 将此值更改为适合您的应用程序的缓存大小 rootFrame.CacheSize = ...
- Nginx反向代理、负载均衡、页面缓存、URL重写及读写分离详解
大纲 一.前言 二.环境准备 三.安装与配置Nginx 四.Nginx之反向代理 五.Nginx之负载均衡 六.Nginx之页面缓存 七.Nginx之URL重写 八.Nginx之读写分离 注,操作系统 ...
- JSP 页面缓存以及清除缓存
一.概述 缓存的思想可以应用在软件分层的各个层面.它是一种内部机制,对外界而言,是不可感知的. 数据库本身有缓存,持久层也可以缓存.(比如:hibernate,还分1级和2级缓存) 业务层也可以有缓存 ...
- 更新页面缓存OutputCache
为什么要使用OutputCache 我认为OutputCache是最简单的缓存技术了,它针对的是页面级别的,简单的一条指令就可以达到缓存的效果,有效的减轻服务器的压力和减少带宽,对于网站一些不会频繁更 ...
- 构建基于WinRT的WP8.1 App 01:页面导航及页面缓存模式
本篇博文主要阐述基于Windows Runtime的Windows Phone 应用页面间导航相关知识,主要分为以下几个方面: Window.Frame和Page概览 页面间实现跳转 处理物理后退键 ...
随机推荐
- ubuntu vim简单命令
1.ubuntu vim 一些基本的命令. :set nu 或着 set number 设置行数 :set nonu 取消行数 ctrl+u 将 ...
- Authentication failed (rejected by the remote node), please check the Erlang
官网提供的解决方案 Synchronise Erlang Cookies (when running a manually installedWindows Service) Erlang Secur ...
- Linux磁盘管理,vi编辑器以及包管理器
一.Linux磁盘管理 Linux磁盘管理常用的三个命令为df,du,fdisk df:列出文件系统的整体磁盘使用量,利用这个命令来获取磁盘被占用了多少空间,,目前还剩下多少空间用法:df [-ahi ...
- textBaseline
<!DOCTYPE html><html><body> <canvas id="myCanvas" width="400&quo ...
- zookeeper server处理客户端命令的流程
zk server处理命令涉及到3个类,2个线程:一个命令请求先后经过PrepRequestProcessor,SyncRequestProcessor,FinalRequestProcessor. ...
- gdb调试分析多线程死锁
转载: http://blog.chinaunix.net/uid-30343738-id-5757210.html #include <stdio.h> #include <pth ...
- SQL Server 调优系列玩转篇一(如何利用查询提示(Hint)引导语句运行)
前言 前面几篇我们分析了关于SQL Server关于性能调优的一系列内容,我把它分为两个模块. 第一个模块注重基础内容的掌握,共分7篇文章完成,内容涵盖一系列基础运算算法,详细分析了如何查看执行计划. ...
- 【令人振奋】【转】微软潘正磊谈DevOps、Visual Studio 2013新功能、.NET未来
日前,微软开发平台事业部全球资深副总裁潘正磊(Julia Liuson)从美国总部回到北京参加TechEd2013,在大会现场,潘正磊接受了CSDN的访谈,对于微软研发团队如何运用DevOps模式.对 ...
- 福大软工1816 · 第八次作业(课堂实战)- 项目UML设计(团队)
团队 学号 姓名 本次作业博客链接 031602428 苏路明(组长) https://www.cnblogs.com/Sulumer/p/9822854.html 031602401 陈瀚霖 htt ...
- PostgreSQL11.2 configure卡住 checking for DocBook XML V4.2
在PG11.2的数据库编译过程中,卡在了“checking for DocBook XML V4.2”,不动,需要安装docbook才可以. 需要安装: yum install docbook-dtd ...