JS前端性能优化解决内存泄漏页面崩溃

目录
  • 发生什么事了？
  • 咋了？这是咋了？
    • 死去的页面突然攻击我？
    • 陷入僵局
    • 垂死病中惊坐起
  • 勿以善小而不为
  • 修改参考

发生什么事了？

一个与往常一样的上午，当我沉浸在业务需求中不可自拔时，突然被拉入到一个事故大群。一脸懵逼的我还以为和之前的每次线上bug一样仅仅是个小问题时，殊不知是我简单了...

看着群里的聊天记录，瞬间一种不好的预感涌上心头。不会是哪个页面写了死循环了吧？

咋了？这是咋了？

死去的页面突然攻击我？

因为项目本身过于庞大，且用户反馈不特定页面崩溃，这使得问题定位难度较大。

经过团队的讨论认为可能是该用户的组织架构接口数据量过大，当数据到达页面后需要经过递归处理，导致内存不足，且通过调试发现并非初次调用该接口就会导致崩溃，而是需要多次调用才会出现该问题。

而且在调试的过程中还发现因数据量过大，该接口需要长达 30s 的时间才能返回。而这么长的时间用户可能已经离开这个页面了。我们尝试以这个场景进行操作发现，用户离开页面并没有取消已经发出的请求，当该请求响应后会导致内存占用飙升。

因该接口为项目全局接口，经过讨论我们决定先修复这个离开页面不取消请求的问题，测试能否解决崩溃问题。

陷入僵局

当我们在离开页面时取消未完成的请求后，测试反馈仍然会不定时崩溃，此时的我们有点无从下手了。因为我们发现问题貌似有点大了。

此时我们已经开始怀疑出现了内存泄漏，于是我们祭出了 chrome-devtool 使用 Memory 来进行内存占用分析。

经过内存分析发现，内存中存在大量的分离元素未能及时回收。我按照内存快照的指引开始了漫长的修改。两天的修改后发现，虽然修复了不少的问题，但是仍然不能有效的降低页面的内存占用，每当我们跳转新的页面时某些页面仍然不能正常释放。此时我为了高效定位问题，开始使用绝招——删代码。

  • 将页面中的组织架构树删除——内存占用没降下来...
  • 将页面的列表删除——很棒空页面果真降下来了
  • 将组织架构树加上，列表删除——内存又起来了...

此时的我认为组织架构树的写法有问题，所以花了两天的时间过了一遍组织架构树的代码，未发现有什么异常的地方。

为了确认是组织架构树的问题还是页面列表的问题，我在项目中新建了两个空白的路由页面。在这个页面中单独使用这两个组件，都没有问题。

问题陷入了僵局...

垂死病中惊坐起

在我们修复这个问题的期间，另一个用户也反馈了相同的问题过来，不过用户说他用的是edge浏览器。此时同事说edge好像可以撑的更久一点。

赞 (0)

相关推荐

  • Vue.js九个性能优化技巧(值得收藏)

    Vue.js九个性能优化技巧(值得收藏)

    目录 Functional components Child component splitting Local variables Reuse DOM with v-show KeepAlive Deferred features Time slicing Non-reactive data Virtual scrolling 总结 参考资料 这篇文章主要参考了 Vue.js 核心成员Guillaume Chau在 19 年美国的 Vue conf 分享的主题:9 Performance se

  • JS常见内存泄漏及解决方案解析

    内存泄漏? 官方解释:内存泄漏(Memory Leak)是指程序中己动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果. 通俗点就是指由于疏忽或者错误造成程序未能释放已经不再使用的内存,不再用到的内存却没有及时释放,从而造成内存上的浪费. 避免内存泄漏? 在局部作用域中,等函数执行完毕,变量就没有存在的必要了,垃圾回收机制很亏地做出判断并且回收,但是对于全局变量,很难判断什么时候不用这些变量,无法正常回收:所以,尽量少使用全局变量.在

  • JS性能优化实现方法及优点进行

    最近刚阅读完<高性能javascript>,想谈谈对js性能优化的看法.理解有些不同,可能还需要各位多多提醒. 话不多说,提到javascript难免会联想到文档对象模型(DOM),它作用于XML和HTML文档的程序接口(API),位于浏览器中,主要用来与HTML文档打交道.同样也用于Web程序中获取XML文档,并使用DOM API来访问文档中的数据.尽管DOM是个与语言无关的API,它在浏览器中的接口却是用javascript实现的.客户端脚本编程大多数时候是在和底层文档(underlyin

  • Vue.js 应用性能优化分析+解决方案

    Vue.js 应用性能优化分析+解决方案

    目录 一.介绍 二.为什么我们需要 Vue JS 性能优化? 三.Vue 性能不佳背后的主要原因 1. 生成报告 2. 运行命令和npm 运行生成 四.如何优化 Vue js 应用程序的性能? 1. 在 Vue js 中懒加载 2. 基于路线的代码拆分 3.Vue js预加载组件 4. 优化第三方库 5. 使用浏览器缓存 6. 优化和压缩图像 前言: 假设我们在开发整个 Vue 应用程序方面非常努力.js.但没有优先考虑其性能:现在,我们的应用程序需要一段时间来加载.导航.提交或执行任何用户操作

  • 手把手教你如何排查Javascript内存泄漏

    手把手教你如何排查Javascript内存泄漏

    目录 引言 如何判断我的应用发生了内存泄漏 Performance和Memory都可以用来定位内存问题,先用谁呢 通过Memory面板定位内存泄漏的流程通常是怎么样的呢 为什么我的内存快照记录下来之后看不懂,还出现了很多奇怪的变量 快照里有一些“Detached DOM tree”,是什么意思 Shallow size 和 Retained size,它们有什么不同 Memory里的Summary视图, Comparison视图, Dominators视图和Containment视图分别有什么不

  • js内存泄漏场景、如何监控及分析详解

    js内存泄漏场景、如何监控及分析详解

    目录 前言 哪些情况会引起内存泄漏 1. 意外的全局变量 2. 遗忘的定时器 3. 使用不当的闭包 4. 遗漏的 DOM 元素 5. 网络回调 如何监控内存泄漏 如何分析内存泄漏,找出有问题的代码 实例分析 总结 前言 Q:什么是内存泄漏? 字面上的意思,申请的内存没有及时回收掉,被泄漏了 Q:为什么会发生内存泄漏? 虽然前端有垃圾回收机制,但当某块无用的内存,却无法被垃圾回收机制认为是垃圾时,也就发生内存泄漏了 而垃圾回收机制通常是使用标志清除策略,简单说,也就是引用从根节点开始是否可达来判定

  • JS前端性能优化解决内存泄漏页面崩溃

    JS前端性能优化解决内存泄漏页面崩溃

    目录 发生什么事了? 咋了?这是咋了? 死去的页面突然攻击我? 陷入僵局 垂死病中惊坐起 勿以善小而不为 修改参考 发生什么事了? 一个与往常一样的上午,当我沉浸在业务需求中不可自拔时,突然被拉入到一个事故大群.一脸懵逼的我还以为和之前的每次线上bug一样仅仅是个小问题时,殊不知是我简单了... 看着群里的聊天记录,瞬间一种不好的预感涌上心头.不会是哪个页面写了死循环了吧? 咋了?这是咋了? 死去的页面突然攻击我? 因为项目本身过于庞大,且用户反馈不特定页面崩溃,这使得问题定位难度较大. 经过团

  • 详解Android性能优化之内存泄漏

    详解Android性能优化之内存泄漏

    综述 内存泄漏(memory leak)是指由于疏忽或错误造成程序未能释放已经不再使用的内存.那么在Android中,当一个对象持有Activity的引用,如果该对象不能被系统回收,那么当这个Activity不再使用时,这个Activity也不会被系统回收,那这么以来便出现了内存泄漏的情况.在应用中内出现一次两次的内存泄漏获取不会出现什么影响,但是在应用长时间使用以后,若是存在大量的Activity无法被GC回收的话,最终会导致OOM的出现.那么我们在这就来分析一下导致内存泄漏的常见因素并且如何

  • 利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

    利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)

    背景 我们经常使用 Chrome Dev Tools 来开发调试,但是很少知道怎么利用它来分析页面性能,这篇文章,我将详细说明怎样利用 Chrome Dev Tools 进行页面性能分析及性能报告数据如何解读. 分析面板介绍 上图是 Chrome Dev Tools 的一个截图,其中,我认为能用于进行页面性能快速分析的主要是图中圈出来的几个模块功能,这里简单介绍一下: Network : 页面中各种资源请求的情况,这里能看到资源的名称.状态.使用的协议(http1/http2/quic...).

  • 写给前端工程师的Web前端性能优化的10点建议

    1. 减少HTTP请求 在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突出. 一个正常HTTP请求的流程简述:如在浏览器中输入"www.xxxxxx.com"并按下回车,浏览器再与这个URL指向的服务器建立连接,然后浏览器才能向服务器发送请求信息,服务器在接受到请求的信息后再返回相应的信息,浏览器接收到来自服务器的应答信息后,对这些数据解释执行. HTTP协议是无状态的应用层协议,意味着每次HTTP请求都需要建立通信链路.进

  • webpack学习教程之前端性能优化总结

    webpack学习教程之前端性能优化总结

    前言 曾几何时,我们是如上图的方式引入JS资源的,相信现在很少遇见了.近年来Web前端开发领域朝着规范开发的方向演进.体现在以下两点: 1.MVC研发构架.多多益处(逻辑清晰,程序注重数据与表现分离,可读性强,利于规避和排查问题...) 2.构建工具层出不穷.多多益处(提升团队协作,以及工程运维,避免人工处理琐碎而重复的工作) 模块化开发 将前端性能优化理论落地,代码压缩,合并,缓存控制,提取公共代码等 其他的还包括比如你可以用ES 6 或CoffeeScript写源码,然后构建出浏览器支持的E

  • 前端性能优化建议

    前言: 一说到性能优化,大家都不约而同的想起了雅虎的军规,2-5-8原则,3秒的首屏准则等等,这些规则在开发中虽然不是强制要求的,但是为了追求页面性能的完美体验,就不得不对代码进行修改和优化. 下面就与大家一同分享一下我了解的一些性能优化指标: 一．加载优化 1. 减少HTTP请求:尽量减少向服务器发送的请求数,节省网络资源,所有静态资源都要放在服务器端并设置缓存,并且要尽量使用长缓存. 2. 压缩代码:减少资源大小可加快网页的显示速度,对代码进行压缩,并在服务器开启Gzip 3. 无阻塞:头部

  • 浅谈Android性能优化之内存优化

    浅谈Android性能优化之内存优化

    1.Android内存管理机制 1.1 Java内存分配模型 先上一张JVM将内存划分区域的图 程序计数器:存储当前线程执行目标方法执行到第几行. 栈内存:Java栈中存放的是一个个栈帧,每个栈帧对应一个被调用的方法.栈帧包括局部标量表, 操作数栈. 本地方法栈:本地方法栈主要是为执行本地方法服务的.而Java栈是为执行Java方法服务的. 方法区:该区域被线程共享.主要存储每个类的信息(类名,方法信息,字段信息等).静态变量,常量,以及编译器编译后的代码等. 堆:Java中的堆是被线程共享的,

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

  • 详解ES6通过WeakMap解决内存泄漏问题

    一.Map 1.定义 Map对象保存键值对,类似于数据结构字典:与传统上的对象只能用字符串当键不同,Map对象可以使用任意值当键. 2.语法 new Map([iterable]) 属性 size:返回键值对的数量. 操作方法 set(key, value):设置(新增/更新)键key的值为value,返回Map对象. get(key):读取键key的值,没有则返回undefined. has(key):判断一个Map对象中是否存在某个键值对,返回true/false. delete(key):

随机推荐