东莞网站建设,和城乡建设厅网站,澧县网页定制,网站关键字内存泄漏 内存泄漏#xff08;Memory Leak#xff09;是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放#xff0c;造成系统内存的浪费#xff0c;导致程序运行速度减慢甚至系统崩溃等严重后果。#xff08;程序某个未使用的变量或者方法#xff0c;长期占…内存泄漏 内存泄漏Memory Leak是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放造成系统内存的浪费导致程序运行速度减慢甚至系统崩溃等严重后果。程序某个未使用的变量或者方法长期占用内存不会释放导致内存堆积浪费
内存溢出:
“内存溢出(Out Of Memory简称OOM)是指应用系统中存在无法回收的内存或使用的内存过多最终使得程序运行要用到的内存大于能提供的最大内存。此时程序就运行不了系统会提示内存溢出有时候会自动关闭软件重启电脑或者软件后释放掉一部分内存又可以正常运行该软件而由系统配置、数据流、用户代码等原因而导致的内存溢出错误即使用户重新执行任务依然无法避免。”因为某些原因程序使用的内存大于硬件提供的内存导致内存超出了
前端导致浏览器奔溃原因分析
1.浏览器内存限制
chrome 浏览器对单个页面最分配内存32位1G641.4G超出后网页失去相应重新加载自动清空内存占用
2.接口数据量巨大
问题现象阐述当接口数据返回巨量数据后前端渲染时占用大量内存。
解决思路限制接口的返回数据或者前端显示分批分页展示数据。
3.地图组件占用不会释放
问题现象阐述引入地图SDK后在单页面应用中因为切换页面实际不是真正的进入其他的页面而是销毁本页面组件。所以导致类似地图一些第三方SDK组件初始化之后无法得到内存的释放会持续生成新的地图实例从而导致内存泄漏。
解决思路旧版腾讯地图SDK没有销毁提供函数新版补充了这个函数于是把地图相关功能逻辑用新版腾讯地图重写一遍然后在页面的生命周期销毁函数中调用地图的销毁函数。调研发现百度和高德还有新版腾讯地图具有销毁函数旧版腾讯地图SDK没有。
4.事件监听函数调用
问题现象阐述事件监听函数在声明之后针对单页面的应用会一值常驻内存。持续被声明后会导致大量堆积导致内存溢出。
解决思路
事件使用实例 window.addEventListener(resize, this.getContentHeigh()); //页面初始化时声明添加window.removeEventListener(resize, this.getContentHeigh()); //页面销毁时声明移除
5.页面缓存机制
问题现象阐述使用keepalive组件后某些使用二级布局组件的页面其方法会一直保留到之后跳转的页面运行。导致多个页面的变量和方法累计导致了内存泄漏最终导致浏览器奔溃。
解决思路由于VUE使用的keepalive机制实质是缓存每个组件不针对实际的页面或者页面路由。二级布局组件会出现问题在路由守卫方法中去除二级局部组件不让keepalive缓存。
//去除多余布局组件的方法
const handleKeepAlive (to) {if (to.matched to.matched.length 2) {for (let i 0; i to.matched.length; i) {const element to.matched[i]if (element.components.default.name layout2) {to.matched.splice(i, 1)handleKeepAlive(to)}}}
}
//路由守卫方法中插入这个方法router.beforeEach(async (to, from, next) {....其他逻辑handleKeepAlive(to);....其他逻辑})
注keepalive实际是缓存的 to.matched,里面就是每一层组件的各种信息
