处理setInterval造成的浏览器内存溢出

起因

最近的一个vue项目要求页面5秒一次实时请求数据, 最开始考虑的是建立websocket长连接进行通信,但是在数据量较大时socket链接会自动断开,后台也没有找到解决办法,最后决定由前端发送定时请求, 但是在使用过程中出现了长时间挂机页面会出现浏览器崩溃的情况

后经过测试是setInterval方法造成的(原因没有搞懂)

解决方案

使用requestAnimationFrame方法代替setInterval进行实时请求

export function RAFInit () {let RAF = {intervalTimer: null,timeoutTimer: null,setTimeout (cb, interval) { // 实现setTimeout功能let now = Date.nowlet stime = now()let etime = stimelet loop = () => {this.timeoutTimer = requestAnimationFrame(loop)etime = now()if (etime - stime >= interval) {cb()cancelAnimationFrame(this.timeoutTimer)}}this.timeoutTimer = requestAnimationFrame(loop)return this.timeoutTimer},clearTimeout () {cancelAnimationFrame(this.timeoutTimer)},setInterval (cb, interval) { // 实现setInterval功能let now = Date.nowlet stime = now()let etime = stimelet loop = () => {this.intervalTimer = requestAnimationFrame(loop)etime = now()if (etime - stime >= interval) {stime = now()etime = stimecb()}}this.intervalTimer = requestAnimationFrame(loop)return this.intervalTimer},clearInterval () {cancelAnimationFrame(this.intervalTimer)}}return RAF
}

调用:

import {RAFInit} from '文件路径'getAll () {console.log('实时请求的数据')
},
startSetInterval() { // 启用实时请求this.RAF = RAFInit()this.RAF.setInterval(this.getAll, 5000)
}
stop () {  // 关闭实时请求if (this.RAF) {this.RAF.clearInterval()this.RAF = null}
}

处理setInterval造成的浏览器内存溢出相关推荐

chrome浏览器内存溢出分析
chrome内存溢出问题需要我们在开发者工具中去定位. 一边情况下去记录两次的操作后的内存情况,第一次,是记录首次操作后的内存情况,第二次是操作后的内存使用情况,然后进行对比. 废话少说看图. 第一次 ...
ajax timeout 内存溢出,setInterval 和 setTimeout会产生内存溢出
setInterval 和 setTimeout会产生内存溢出来一个简单的例子.有兴趣的朋友可以自己尝试复制代码代码如下: function a(){ document.title = &quo ...
chrome浏览器js内存溢出
Google Chrome 浏览器提供了非常强大的JS调试工具,Heap Profiling便是其中一个.Heap Profiling可以记录当前的堆内存(heap)快照,并生成对象的描述文件,该描 ...
添加IFrame导致内存溢出的解决过程（IE浏览器，目前发现了原因，还未解决）...
1. 现象每次动态添加iframe时,iexplore.exe进程占据的内存都会增加(大概10M左右),不会自动释放,最终导致内存溢出 2. 解决过程经过网络的一番搜索,基本上给出的解决方案是 ...
js垃圾回收机制，内存泄露和内存溢出，解决闭包产生的内存泄露详解
一.内存的周期和回收机制分配内存----->使用内存----->释放内存 1.JS 环境中分配的内存有如下声明周期: 内存分配:当我们声明变量.函数.对象的时候,系统会自动为他们分配内存 ...
node aws 内存溢出_如何使用Node.js和AWS快速创建无服务器RESTful API
node aws 内存溢出 by Mark Hopson 马克·霍普森(Mark Hopson) 如何使用Node.js和AWS快速创建无服务器RESTful API (How to quickly ...
记一次内存溢出的分析经历
作者:Janti https://www.cnblogs.com/superfj/p/8474288.html 说在前面的话朋友,你经历过部署好的服务突然内存溢出吗? 你经历过没有看过Java虚拟机 ...
Linux下tomcat内存溢出分析及优化
为什么80%的码农都做不了架构师?>>> 常见的内存溢出有以下两种: java.lang.OutOfMemoryError: PermGen space java.lang.O ...
Node的垃圾回收机制与内存溢出捕获（上）
Node的垃圾回收机制与内存溢出捕获一.什么是Node的内存? 想必大家在用JavaScript开发的过程中,不太关心内存的管理,因为对于前端来说,浏览器的内存几乎不会出现用完的情况,因为所接触 ...

处理setInterval造成的浏览器内存溢出

起因

解决方案

处理setInterval造成的浏览器内存溢出相关推荐

最新文章

热门文章