vue项目中视频播放结束返回首页出现1秒左右的白屏问题
vue项目的性能优化问题,一直以来都是大家比较关注的。
近日负责的项目中,使用了SignalR实时通讯,客户端中点击发起播放视频的请求到服务器,服务器接到请求后再调用前端的播放视频方法,以此来达到播放视频的功能,也可以通过服务器进行广播,以此让另一个客户端可以与之联动,从而达到多个客户端同一时刻由其中一端发起请求,却达到所有客户端同时播放、同时结束的视频联动广播功能。实时通信的功能没话说,反应速度非常快,却恰恰在播放完视频,返回首页的时候出现了约1秒时间的白屏问题!这用户体验感一下子拉低了太多太多!
纠结之余,开始排查问题所在!
首先,联动视频只有在首页跳到视频播放页面返回时才出现这样的问题,而在其它二级或者三级页面可以迅速返回,迅速显示页面内容,问题预计出现在首页!
其次,关于vue项目首屏加载出现白屏的问题是比较常见的,也是大家比较头疼的问题,优化方面也是从路由懒加载,keepAlive, 压缩图片,减少http请求次数,使用nuxt框架等来考虑。但是当下项目的问题并不是首屏加载慢,出现白屏的问题,而是点击返回首页的时候才出现,以此可以断定并不是首屏加载的问题!
最后,与老同学聊了一会,和我说会不会是因为首页频繁操作了dom,引起了回流、重绘!我一开始质疑了同学,因为vue项目我基本不操作dom,而且首页只有一些图片和按钮,并不复杂,也没有操作dom的必要!然后他又说检查一下动画是否已经脱标,如果没有,重绘的话,也可能会引起类似的情况!
于是乎,我从动画开始检查,发现自己之前使用了别人写的水波纹动画特效,在此处,我确确实实操作了dom,注释这些代码,和动画css之后,打包看效果,确实不再白屏了!为了保住这个动画效果又继续做了一些列的修改,终于在不需要操作dom的情况下动画正常显示在页面上,同时也解决了这一白屏bug!
不曾想自己会在方面出现问题,因为动画本来就是定位脱标了的!以后使用别人的东西,还是要仔细一些!哈哈!
关于回流与重绘可以参考下面的网址:讲得非常清晰!
https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/24
vue项目中视频播放结束返回首页出现1秒左右的白屏问题的更多相关文章
- vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面 来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
- vue项目中遇到的那些事。
前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...
- 在vue项目中使用axios发送FormData
这个是axios的中文文档,挺详细的: https://www.kancloud.cn/luponu/axios/873153 文档中的 使用 application/x-www-form-ur ...
- vue项目中遇到的一些问题
或访问:https://github.com/littleHiuman/experiences-about-vue 欢迎补充! vuex 状态 vue-cli 命令行 vue vue vue-rou ...
- Vue项目中遇到的一些问题总结
一.开发环境使用Ajax请求,报错 网上查的资料,在config中的index.js这样设置 proxyTable:{ '/api':{ target:'', //此处为你的API接口地址 chan ...
- 如何在VUE项目中添加ESLint
如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...
- 浅谈 Axios 在 Vue 项目中的使用
介绍 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. 特性 它主要有如下特性: 浏览器端发起XMLHttpRequests请求 Node端发起http ...
- 去除vue项目中的#及其ie9兼容性
一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...
- vue 项目中当访问路由不存在的时候默认访问404页面
前言: 在Vue项目中,当访问的页面路由不存在或错误时,页面显示为一片空白.然而,通常我们需要对访问url不存在或者错误的情况下添加默认的404页面,即not found页面. 一般的处理方法是: 在 ...
随机推荐
- rlpyt(Deep Reinforcement Learning in PyTorch)
rlpyt: A Research Code Base for Deep Reinforcement Learning in PyTorch Github:https://github.com/ast ...
- 服务器基本配置(ubuntu)
服务器基本配置(ubuntu) 学习目标: 修改初始服务器名字(ubuntu 16.04 ) 修改初始服务器名字(ubuntu 18.04 ) ubuntu换源 更改默认python版本 安装软件出现 ...
- Java动态代理(二)——jdk动态代理
一.什么是动态代理?代理类在程序运行时创建的代理方式被成为动态代理.动态代理的代理类并不是在Java代码中定义的,而是在运行时根据我们在Java代码中的“指示”动态生成的.相比于静态代理, 动态代理的 ...
- 用Python的Pandas和Matplotlib绘制股票KDJ指标线
我最近出了一本书,<基于股票大数据分析的Python入门实战 视频教学版>,京东链接:https://item.jd.com/69241653952.html,在其中给出了MACD,KDJ ...
- systemctl 如何启动、关闭、启用/禁用服务
启动服务:systemctl start xxx.service 关闭服务:systemctl stop xxx.service 重启服务:systemctl restart xxx.service ...
- Codeforces Round #571 (Div. 2)-D. Vus the Cossack and Numbers
Vus the Cossack has nn real numbers aiai. It is known that the sum of all numbers is equal to 00. He ...
- Java格式化字符串Format
java的jdk1.5开始引用了对字符串的格式化处理,类似于C语言的printf("%d,%d",a,b);,对数据的处理非常方便,之所以有这样的方式输出,很多人说是为了抢夺C语言 ...
- hacker101 CTF 学习记录(二)
前言 无 Easy-Postbook 拿到功能有点多,先扫一遍目录 .Ds_Store没有啥东西,page是个静态页面 随便注册个账号,登录后已经有2篇文章,第一篇文章的id是1 自己创建文章,将ur ...
- python基础:日志模块logging,nnlog
python里面用来打印日志的模块,就是logging模块,logging模块可以在控制台打印日志,也可以写入文件中.也可以两个操作都执行 1.控制台输入 import logging#导入模块 lo ...
- Android 4.X 系统加载 so 失败的原因分析
1 so 加载过程 so 加载的过程可以参考小米的系统工程师的文章loadLibrary动态库加载过程分析 2 问题分析 2.1 问题 年前项目里新加了一个 so库,但发现native 方法的找不到的 ...