记录一次前端页面崩溃的产生及处理

记录一次前端页面崩溃的产生及处理

​  起因:前端的一个地图页面某一些单子一点进去,就会导致页面卡死、崩溃,浏览器最终给的错误码为:out of memory。

​  排查:OOM!第一反应是猜测会不会是因为地图要渲染的点位太多了(大概7、8千个点位),后面在另一个页面看到相同数量的点位也能够正常的渲染出来,就排除了这一猜测。

​  由于这个情况只发生测试环境,本地环境复现不出来,一时陷入了困境。后面对比了两个环境的区别,测试环境是通过打包,使用 nginx 代理的方式运行的,本地环境是通过 node 环境运行。于是本地环境也采用打包,nginx 代理的方式运行,终于成功的把页面崩溃情况复现出来。

​  第一次代码定位:通过查看网络请求,发现页面卡死前有个请求一直处于未返回状态,于是使用接口调试工具手动调用该接口,但该接口能正常返回,排除接口问题。接着将代码定位到发送该请求处,在进行各种各样的尝试后发现,将 statusList 从响应式类型换成非响应式类型后,居然页面不会崩溃了,于是便再发了一版测试环境…

  ...
<div v-for="(item, index) in statusList" :key="index" style="width: 100%">...
</div>...
const statusList = ref<any>(); const draw = async () => {...statusList.value =  await getStatus();...
}

​  解决方案:将响应式类型换成非响应式类型…

​  再起:发版没过多久,这个状况又出现了,不同之处在于,这次刚点进去没问题,过了一段时间才会出现页面崩溃的情况。

​  排查:这次情况第一反应,内存泄漏!通过内存工具发现,页面快照的内存会随着时间的增加而增加。这次首先去优化了地图元素的使用,没用的元素该销毁的进行销毁,不出意外,没啥效果。又是一顿各种尝试,终于发现了问题所在!

​  第二次代码定位:通过打 log,发现某一方法(getShipRoute)一直在死循环不断输出 log,于是定位到了该代码处。

	...
<div v-for="(item, index) in statusList" :key="index" style="width: 100%"><div v-if="getShipRoute(Number(items.pointIndex) - 1)">...<span class="arr-time">船名:{{ shipRoute.vesselName }}</span>...</div>
</div>...
const shipRoute = ref<any>(null);
const getShipRoute = (idx:number) => {let a = routeList.find((v: any) =>{return v.range === idx});if (a) shipRoute.value = a;return a;
}

​  原因:shipRoute 是一个响应式数据,内部是一个对象,第一次循环,将 a1 的引用赋值给 shipRoute,然后 shipRoute 进行第一次页面元素 pageElement1 渲染,第二次循环,将 a2 的引用赋值给 shipRoute,然后 shipRoute 进行第二次页面元素 pageElement2 渲染,同时由于 shipRoute 发生改变, pageElement1 需要重新进行一次渲染,又将 a1 的引用赋值给 shipRoute,此时 shipRoute 对于 pageElement2 来说又发生了变化,至此死循环发生了。

​  解决方法:将 shipRoute 的内部数据换成数组,至此该问题得到了解决。

​  疑问点:

  • 为什么第一次改动可以延迟问题的发生?
  • 为什么打包才会导致问题的发生?

​  对于疑问1,推测跟渲染方式有关,如果外层数组为响应式数据,每次死循环都得渲染外层整一个代码块,这无疑大大加速了内存的爆炸,而不为响应式数据,则每次死循环只需要渲染内层一个小代码块,内存增长的速度不会那么快。但随着时间的累积作用,内存也会增长到极限值进而引发崩溃,这似乎解释了为什么第一次改动可以延迟问题的发生。

​  对于疑问2,猜测 node 环境可能对此种情况做出了一定的优化,导致问题没能复现,具体原因也未得而知。

​  补充:页面崩溃前的情况:其他元素貌似渲染完毕,只剩下地图元素还没进行渲染,这一定程度误导了我们对于该问题产生原因的推测。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/19997.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为云的云主机安装的linux系统不能使用yum下载软件包、程序、组件等

目录 一、背景介绍 二、问题描述 1、尝试使用yum安装traceroute 2、更换yum源 3、使用curl命令访问百度&#xff0c;测试网络 三、问题分析和解决 1、修改网卡设置 &#xff08;1&#xff09;ifconfig查看网卡信息 &#xff08;2&#xff09;添加DNS 2、修改/etc/res…

移动机器人传感器

移动机器人传感器是机器人系统的关键组成部分&#xff0c;用于感知和理解周围环境&#xff0c;为导航、避障、定位和任务执行提供必要的信息。以下是一些常用的移动机器人传感器及其功能和应用。 常用移动机器人传感器 激光雷达 (LiDAR)摄像头深度摄像头超声波传感器红外传感器…

idea 插件推荐

idea 插件推荐 RESTFul-Tool 接口搜索Show Comment 代码注释展示translation 翻译(注释翻译)MyBatisCodeHelperPro 日志封装sql xml跳转GitToolBox 展示GIT提交Jenkins Control idea jenkins 集成Gitmoji Plus: Commit Button GIT提交moji表情 RESTFul-Tool 接口搜索 https://…

简单介绍QKeySequenceEdit的使用

QKeySequenceEdit是Qt框架中的一个便捷用户界面组件&#xff0c;用于输入和显示键盘快捷键。它提供了一个简单的界面&#xff0c;允许用户输入一个键盘快捷键&#xff0c;并将其显示为一个字符串。这在需要配置快捷键的应用程序中非常有用。在本文中&#xff0c;我们将详细介绍…

一键安装 HaloDB 之 Ansible for Halo

↑ 关注“少安事务所”公众号&#xff0c;欢迎⭐收藏&#xff0c;不错过精彩内容~ 前倾回顾 前面介绍了“光环”数据库的基本情况和安装办法。 哈喽&#xff0c;国产数据库&#xff01;Halo DB! 三步走&#xff0c;Halo DB 安装指引 以及 HaloDB 的 Oracle 和 MySQL 兼容模式: …

k8s——Pod进阶(资源限制和探针)

一、资源限制 1.1 资源限制的定义 当定义Pod时可以选择性地为每个容器设定所需要的资源数量。 最常见的可设定资源是CPU和内存大小&#xff0c;以及其他类型的资源。 当为Pod中的容器指定了request资源时&#xff0c;调度器就使用该信息来决定将Pod调度到哪个节点上。当还为容器…

斐波那契数列加仓递推编程:深入探索与优化

斐波那契数列加仓递推编程&#xff1a;深入探索与优化 斐波那契数列&#xff0c;这一看似简单的数列&#xff0c;却在编程领域中隐藏着丰富的逻辑和技巧。在加仓递推的应用场景下&#xff0c;斐波那契数列的生成与优化变得尤为重要。本文将围绕这一主题&#xff0c;从四个方面…

使用 Django Model 构建强大的数据库模型

文章目录 创建一个简单的 Django Model迁移数据库使用 Django Shell 操作模型Django Admin结论 在 Django 中&#xff0c;Model 是构建数据库模型的基础。它允许开发人员定义数据的结构&#xff0c;并提供了方便的方式来与数据库进行交互。本文将介绍如何使用 Django Model 来创…

解析Java中1000个常用类:Error类,你学会了吗?

在 Java 编程中,异常处理是一个至关重要的部分。Java 提供了丰富的异常处理机制,包括 Exception 和 Error。 本文将深入探讨 Error 类的功能、用法、实际应用中的注意事项,以及如何处理和预防这些错误。 什么是 Error 类? Error 类是 Java 中 Throwable 类的一个子类,用…

玄机平台应急响应—Linux日志分析

1、前言 啥是日志呢&#xff0c;日志就是字面意思&#xff0c;用来记录你干了啥事情。日志大体可以分为网站日志和系统日志&#xff0c;网站日志呢就是记录哪个用户在哪里什么时候干了啥事&#xff0c;以及其它的与网站相关的事情。系统日志呢&#xff0c;就是记录你的电脑系统…

云原生架构相关技术_2.云原生微服务

1.微服务发展背景 微服务模式将后端单体应用拆分为松耦合的多个子应用&#xff0c;每个子应用负责一组子功能。这些子应用称为“微服务”&#xff0c;多个“微服务”共同形成了一个物理独立但逻辑完整的分布式微服务体系。这些微服务相对独立&#xff0c;通过解耦研发、测试与部…

[BUG历险记] ERROR: [SIM 211-100] CSim failed with errors

问题重现 在开发HLS过程中&#xff0c;我碰到一个奇怪的现象&#xff0c;同样的工程&#xff0c;在我重装完系统后&#xff0c;不能进行C仿真了&#xff0c;但是综合实现都是可以正常运作的。 vitis的报错也非常奇怪&#xff0c;单单一行&#xff1a; ERROR: [SIM 211-100] C…

【Linux系列】深入解析 `kill` 命令:Linux 下的进程管理利器

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kwan 的首页,持续学…

chatgpt API扫盲贴

temperature 是什么&#xff1f; 温度&#xff08;Temperature&#xff09;是一个介于 0 和 1 之间的值&#xff0c;基本上可以让你控制模型在进行这些预测时的置信度。降低温度&#xff08;Temperature&#xff09;意味着它将承担更少的风险&#xff0c;并且完成将更加准确和…

男士内裤哪个品牌好一点?2024热门男士内裤推荐

男人的内裤保质期只取决于被别人看见的次数&#xff0c;如果某条内裤从未被别人看见过&#xff0c;那它永远都是你的新内裤。也就是说&#xff0c;只要穿着破内裤这尴尬的瞬间没被目击&#xff0c;男人就能永远和一条内裤在一起。 实际上如果长时间不更换男士内裤&#xff0c;…

代码审计(工具Fortify 、Seay审计系统安装及漏洞验证)

源代码审计 代码安全测试简介 代码安全测试是从安全的角度对代码进行的安全测试评估。&#xff08;白盒测试&#xff1b;可看到源代码&#xff09; 结合丰富的安全知识、编程经验、测试技术&#xff0c;利用静态分析和人工审核的方法寻找代码在架构和编码上的安全缺陷&#xf…

MySQL增删查改初阶

目录 一&#xff0c;数据库操作 1.关键字 show 显示当前数据库有哪些&#xff1a;show databases&#xff1b; 2.创建数据库 3.选中数据库 4.删除数据库 二&#xff0c;表的操作&#xff0c;在选中数据库的基础之上 1.查看表的结构 2.创建表 3.查看当前选中的数据库中…

【算法】模拟算法——Z字形变换(medium)

题解&#xff1a;模拟算法——Z字形变换(medium) 目录 1.题目2.题解3.参考代码4.总结 1.题目 题目链接&#xff1a;LINK 2.题解 利用模拟&#xff0c;来解决问题。 首先创建出一个O(numRows*n)的数组来&#xff0c;并按照题目要求把每个字符按顺序填进去。 这里以numRows…

java中回调与Timer类的使用

回调&#xff1a;回调&#xff08;callback)是一种常见的程序设计模式。在这种模式中&#xff0c;可以指出某个特定事件发生时应该采取的动作。 Timer类&#xff1a;java.swing包中的Timer类&#xff0c;可以使用它在给定的时间间隔时发出通告。如程序中有一个时钟&#xff0c…

如何在IDEA中实现类似Linux命令那样的外部传参

【背景说明】 IDEA中执行一个程序时&#xff0c;如何就在程序一开始执行给传入你给的参数呢&#xff1f; 【说明】 public static void main(String[] args) throws Exception {} 说明&#xff1a;其实java中main方法里的args这个参数&#xff0c;就是用于接收外部传参的。…