当前位置: 首页 > news >正文

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

内存泄漏
内存泄漏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,里面就是每一层组件的各种信息

相关文章:

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

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

力扣:209.长度最小的子数组

1.题目分析&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数组&#xff0c;返回 0 。 示例 …...

常见类型的yaml文件如何编写?--kind: Service

基本说明 在 Kubernetes 中&#xff0c;Service 是一种抽象的方式&#xff0c;用于定义一组 Pod 的访问方式和网络服务。Service 提供了一个稳定的网络端点&#xff08;Endpoint&#xff09;&#xff0c;使得其他服务或外部用户可以通过 Service 来访问被管理的 Pod。 负载均…...

linux环境下安装postgresql

PostgreSQL: Linux downloads (Red Hat family)postgresql官网 PostgreSQL: Linux downloads (Red Hat family) 环境&#xff1a; centos7 postgresql14 选择版本 执行启动命令 配置远程连接文件 vi /var/lib/pqsql/14/data/postgresql.conf 这里将listen_addresses值由lo…...

专业课145+合肥工业大学833信号分析与处理考研经验合工大电子信息通信

今年专业课145也是考研科目中最满意的一门&#xff0c;其他基本相对平平&#xff0c;所以这里我总结一下自己的专业课合肥工业大学833信号分析与处理的复习经验。 我所用的教材是郑君里的《信号与系统》&#xff08;第三版&#xff09;和高西全、丁玉美的《数字信号处理》&…...

FreeRtos Queue (一)

本篇主要讲队列的数据结构和初始化 一、队列的数据结构 二、队列初始化完是什么样子的 队列初始化的函数调用关系&#xff1a;xQueueGenericCreate->prvInitialiseNewQueue->xQueueGenericReset 所以&#xff0c;最终初始化完的队列是这样的 假设申请了4个消息体&…...

深入理解 Hadoop (五)YARN核心工作机制浅析

概述 YARN 的核心设计理念是 服务化&#xff08;Service&#xff09; 和 事件驱动&#xff08;Event EventHandler&#xff09;。服务化 和 事件驱动 软件设计思想的引入&#xff0c;使得 YARN 具有低耦合、高内聚的特点&#xff0c;各个模块只需完成各自功能&#xff0c;而模…...

优化 - 重构一次Mysql导致服务器的OOM

概述 优化了一次前后端处理不当导致的CPU的一次爆机行为&#xff0c;当然&#xff0c;这和服务器的配置低也有着密不可分的关系&#xff0c;简单的逻辑学告诉我们&#xff0c;要找到真正的问题&#xff0c;进行解决&#xff0c;CPU爆机的关键点在于前后端两个方面&#xff0c;…...

【光波电子学】基于MATLAB的多模光纤模场分布的仿真分析

基于MATLAB的多模光纤模场分布的仿真分析 一、引言 &#xff08;1&#xff09;多模光纤的概念 多模光纤&#xff08;MMF&#xff09;是一种具有较大纤芯直径的光纤结构&#xff0c;其核心直径通常在10-50微米范围内。与单模光纤&#xff08;SMF&#xff09;相比&#xff0c;…...

0104 AJAX介绍

Ajax 的全称是 Asynchronous Javascript And XML &#xff08;异步 JavaScript 和 XML &#xff09;。 通俗的理解&#xff1a;在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式&#xff0c;就是 Ajax Ajax 能让我们轻松实现网页与服务器之间的数据交互。 浏览器…...

代码随想录算法训练营第24天 | 理论基础 77. 组合

目录 理论基础 什么是回溯法 回溯法的效率 回溯法解决的问题 如何理解回溯法 回溯法模板 77. 组合 &#x1f4a1;解题思路 &#x1f4bb;实现代码 理论基础 什么是回溯法 回溯法也可以叫做回溯搜索法&#xff0c;它是一种搜索的方式。 回溯法的效率 虽然回溯法很难&#xff…...

【深度学习环境搭建】Windows搭建Anaconda3、已经Pytorch的GPU版本

目录 搭建Anaconda3搭建GPU版本的Pytorch你的pip也要换源&#xff0c;推荐阿里源打开conda的PowerShell验证 搭建Anaconda3 无脑下载安装包安装&#xff08;自行百度&#xff09; 注意点&#xff1a; 1、用户目录下的.condarc需要配置&#xff08;自定义环境的地址&#xff08…...

基于WebFlux的Websocket的实现,高级实现自定义功能拓展

基于WebFlux的Websocket 一、导入XML依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-webflux</artifactId> </dependency><!-- 或者引入jackson --> <dependency><group…...

使用 LLVM clang C/C++ 编译器编译 OpenSSL 3.X库

1、下载 OpenSSL 3.X 库的源代码放到待编译目录 2、解压并接入 OpenSSL 3.X 库源码的根目录 3、复制 ./Configure 一个取名为 ./Configure-clang 4、修改 ./Configure-clang 找到配置段&#xff1a; CC CXX CPP LD 把它们改成 CC > "/usr/bin/clang-…...

【信息安全】hydra爆破工具的使用方法

hydra简介 hydra又名九头蛇&#xff0c;与burp常规的爆破模块不同&#xff0c;hydra爆破的范围更加广泛&#xff0c;可以爆破远程桌面连接&#xff0c;数据库这类的密码。他在kali系统中自带。 参数说明 -l 指定用户名 -L 指定用户名字典文件 -p 指定密码 -P 指…...

uniapp中uview组件库丰富的CountTo 数字滚动使用方法

目录 #平台差异说明 #基本使用 #设置滚动相关参数 #是否显示小数位 #千分位分隔符 #滚动执行的时机 #API #Props #Methods #Event 该组件一般用于需要滚动数字到某一个值的场景&#xff0c;目标要求是一个递增的值。 注意 如果给组件的父元素设置text-align: cente…...

inflate流程分析

一.inflate的三参数重载方法else里面逻辑 我们先看到setContentView里面的inflate的调用链&#xff1a; public View inflate(LayoutRes int resource, Nullable ViewGroup root) {return inflate(resource, root, root ! null);}public View inflate(LayoutRes int resource…...

数据挖掘实战-基于机器学习的电商文本分类模型

&#x1f935;‍♂️ 个人主页&#xff1a;艾派森的个人主页 ✍&#x1f3fb;作者简介&#xff1a;Python学习者 &#x1f40b; 希望大家多多支持&#xff0c;我们一起进步&#xff01;&#x1f604; 如果文章对你有帮助的话&#xff0c; 欢迎评论 &#x1f4ac;点赞&#x1f4…...

第8章-第4节-Java中字节流的缓冲流

1、缓冲流&#xff1a;属于高级IO流&#xff0c;并不能直接读写数据&#xff0c;需要依赖于基础流。缓冲流的目的是为了提高文件的读写效率&#xff1f;那么是如何提高文件的读写效率的呢&#xff1f; 在内存中设置一个缓冲区&#xff0c;缓冲区的默认大小是8192字节&#xff…...

NULL是什么?

NULL是一个编程术语&#xff0c;通常用于表示一个空值或无效值。在很多编程语言中&#xff0c;NULL用于表示一个变量或指针不引用任何有效的对象或内存位置。 NULL可以看作是一个特殊的值&#xff0c;表示缺少有效的数据或引用。当一个变量被赋予NULL值时&#xff0c;它表示该变…...

XML Group端口详解

在XML数据映射过程中&#xff0c;经常需要对数据进行分组聚合操作。例如&#xff0c;当处理包含多个物料明细的XML文件时&#xff0c;可能需要将相同物料号的明细归为一组&#xff0c;或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码&#xff0c;增加了开…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

QMC5883L的驱动

简介 本篇文章的代码已经上传到了github上面&#xff0c;开源代码 作为一个电子罗盘模块&#xff0c;我们可以通过I2C从中获取偏航角yaw&#xff0c;相对于六轴陀螺仪的yaw&#xff0c;qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

【算法训练营Day07】字符串part1

文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接&#xff1a;344. 反转字符串 双指针法&#xff0c;两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...

基于Docker Compose部署Java微服务项目

一. 创建根项目 根项目&#xff08;父项目&#xff09;主要用于依赖管理 一些需要注意的点&#xff1a; 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件&#xff0c;否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...