前端导致浏览器奔溃原因分析

内存泄漏
内存泄漏（Memory Leak）是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放，造成系统内存的浪费，导致程序运行速度减慢甚至系统崩溃等严重后果。（程序某个未使用的变量或者方法，长期占用内存不会释放，导致内存堆积浪费）

内存溢出:

“内存溢出(Out Of Memory，简称OOM)是指应用系统中存在无法回收的内存或使用的内存过多，最终使得程序运行要用到的内存大于能提供的最大内存。此时程序就运行不了，系统会提示内存溢出，有时候会自动关闭软件，重启电脑或者软件后释放掉一部分内存又可以正常运行该软件，而由系统配置、数据流、用户代码等原因而导致的内存溢出错误，即使用户重新执行任务依然无法避免。”（因为某些原因，程序使用的内存大于硬件提供的内存，导致内存超出了）

前端导致浏览器奔溃原因分析

1.浏览器内存限制

chrome 浏览器对单个页面最分配内存，32位（1G），64（1.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,里面就是每一层组件的各种信息