视频上云/网络穿透/网络映射服务EasyNTS前端切换页面卡顿如何优化?
时间:2022-07-24
本文章向大家介绍视频上云/网络穿透/网络映射服务EasyNTS前端切换页面卡顿如何优化?,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
EasyNTS作为视频上云网关,具备视频组网、远程运维等功能,上线前会经过研发部-测试部-项目部多重测试,在这个过程中不断完善产品。虽然EasyNTS目前已经上线,但是我们的测试并没有停止,近期就在测试时发现,在进入EasyNTS视频组网服务一段时间后,切换页面会变得卡顿。
问题分析
1、打开控制台的network,发现首页的定时器在其他页面也在运行调取接口,运行时间长就会导致浏览器缓存资源增加,其他页面使用时就很卡。
2、切换导航的时候每次都会请求如下两个接口,浪费不必要的资源,而且网络环境较差的情况下,请求接口如果一直没有返回,也会造成卡顿的现象。
解决问题
我们还是从以上两个方面来解决这个问题。
1、定时器造成的卡顿 在首页代码找到定时器,在页面销毁的生命周期中加入清除定时器。
beforeDestroy() {
if (this.timerAll) {
clearInterval(this.timerAll);
this.timerAll = 0;
}
if (this.timerTop) {
clearInterval(this.timerTop);
this.timerTop = 0;
}
},
2、接口请求造成的卡顿 在项目的router.Js 加入判断条件,如vuex已有用户及软件信息,就从vuex中获取。
router.beforeEach(async (to, from, next) => {
let userInfo = null
if (store.state.userInfo === null) {
userInfo = await store.dispatch("getUserInfo");
} else {
userInfo = store.state.userInfo
}
//如果用户没登录
if (!userInfo) {
if (to.matched.some((record => {
return record.meta.needLogin || record.meta.role;
}))) {
if (to.fullPath == '/') {
window.kk = `/login.html`;
} else {
window.kk = `/login.html?r=${encodeURIComponent(window.kk)}`;
}
return;
}
} else {
//获取登录用户角色
var roles = userInfo.roles || [];
//获取所有的菜单
var menus = store.state.menus.reduce((pval, cval) => {
pval[cval.path] = cval;
return pval;
}, {})
var _roles = [];
//查找访问路径的菜单
var menu = menus[to.path];
if (menu) {
_roles.push(...(menu.roles || []));
}
//判断是否有当前路径权限
if (_roles.length > 0 && !_roles.some(val => {
return roles.indexOf(val) >= 0;
})) {
return;
}
//根据版本屏蔽权限
let dssInfo = null
if (store.state.serverInfo === null) {
dssInfo = await store.dispatch("getDssInfo");
} else {
dssInfo = store.state.serverInfo
}
if (dssInfo && parseInt(dssInfo.ProductType) == 1 && to.path.match(//vod/)) {
//如果是直播版本,屏蔽点播相关功能,强制跳转首页
window.kk = `/`;
return;
}
}
next();
})
通过以上两种方式修改代码之后,程序运行时,服务器的资源分配将会均匀,不再出现由于消耗过大而导致的卡顿问题。
关于EasyNTS
EasyNTS目前实现了硬件设备的接入与管控、动态组网、远程运维、文件传输、远程指令调用等功能,从终端到云端,形成了一整套的上云网关解决方案,极大地解决现场无固定IP、端口不开放、系统权限不开放等问题。如想详细了解,可进入TSINGSEE青犀视频进行浏览查阅。
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(24)-权限管理系统-将权限授权给角色
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(23)-权限管理系统-角色组模块
- jQuery Gallery Plugin在Asp.Net中使用
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(22)-权限管理系统-模块导航制作
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(20)-权限管理系统-根据权限获取菜单
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(19)-权限管理系统-用户登录
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(21)-权限管理系统-跑通整个系统
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(18)-权限管理系统-表数据
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(17)-LinQ动态排序
- 构建ASP.NET MVC4+EF5+EasyUI+Unity2.x注入的后台管理系统(16)-权限管理系统-漂亮的验证码
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(42)-工作流设计-表建立
- 印度税务局调查比特币大户,需缴纳资本利得税;交易所Poloniex强制所有用户完成KYC
- Windows Server 2008R2配置MySQL Cluster
- ASP.NET MVC5+EF6+EasyUI 后台管理系统(41)-组织架构
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Java底层-本地接口(JNI)
- 如何从最坏、平均、最好的情况分析复杂度?
- 利用Python进行MR栅格数据处理
- 利用Sql处理MR栅格数据
- Netty组件之Channel注册
- 使用 kubeadm 安装单 master kubernetes 集群
- 垃圾回收算法(4)-复制算法
- Digital-Signature-Hijack:一款针对数字签名劫持的PowerShell脚本
- 使用TensorFlow物体检测模型、Python和OpenCV的社交距离检测器
- 基于OpenCV和Tensorflow的深蹲检测器
- BBPress未经身份验证的提权漏洞分析
- 开源日志管理系统Graylog之Sidecar功能实践
- CentOS-AltArch-7(ARM版)下源码编译MySQL5.7.31
- 用BurpSuit的Burpy插件搞定WEB端中的JS加密算法
- CentOS7下安装文档协作工具Confluence7.2.1