前端导致浏览器奔溃原因分析
内存泄漏
内存泄漏(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,里面就是每一层组件的各种信息
相关文章:
前端导致浏览器奔溃原因分析
内存泄漏 内存泄漏(Memory Leak)是指程序中已动态分配的堆内存由于某种原因程序未释放或无法释放,造成系统内存的浪费,导致程序运行速度减慢甚至系统崩溃等严重后果。(程序某个未使用的变量或者方法,长期占…...
力扣:209.长度最小的子数组
1.题目分析: 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, ..., numsr-1, numsr] ,并返回其长度。如果不存在符合条件的子数组,返回 0 。 示例 …...
常见类型的yaml文件如何编写?--kind: Service
基本说明 在 Kubernetes 中,Service 是一种抽象的方式,用于定义一组 Pod 的访问方式和网络服务。Service 提供了一个稳定的网络端点(Endpoint),使得其他服务或外部用户可以通过 Service 来访问被管理的 Pod。 负载均…...
linux环境下安装postgresql
PostgreSQL: Linux downloads (Red Hat family)postgresql官网 PostgreSQL: Linux downloads (Red Hat family) 环境: centos7 postgresql14 选择版本 执行启动命令 配置远程连接文件 vi /var/lib/pqsql/14/data/postgresql.conf 这里将listen_addresses值由lo…...
专业课145+合肥工业大学833信号分析与处理考研经验合工大电子信息通信
今年专业课145也是考研科目中最满意的一门,其他基本相对平平,所以这里我总结一下自己的专业课合肥工业大学833信号分析与处理的复习经验。 我所用的教材是郑君里的《信号与系统》(第三版)和高西全、丁玉美的《数字信号处理》&…...
FreeRtos Queue (一)
本篇主要讲队列的数据结构和初始化 一、队列的数据结构 二、队列初始化完是什么样子的 队列初始化的函数调用关系:xQueueGenericCreate->prvInitialiseNewQueue->xQueueGenericReset 所以,最终初始化完的队列是这样的 假设申请了4个消息体&…...
深入理解 Hadoop (五)YARN核心工作机制浅析
概述 YARN 的核心设计理念是 服务化(Service) 和 事件驱动(Event EventHandler)。服务化 和 事件驱动 软件设计思想的引入,使得 YARN 具有低耦合、高内聚的特点,各个模块只需完成各自功能,而模…...
优化 - 重构一次Mysql导致服务器的OOM
概述 优化了一次前后端处理不当导致的CPU的一次爆机行为,当然,这和服务器的配置低也有着密不可分的关系,简单的逻辑学告诉我们,要找到真正的问题,进行解决,CPU爆机的关键点在于前后端两个方面,…...
【光波电子学】基于MATLAB的多模光纤模场分布的仿真分析
基于MATLAB的多模光纤模场分布的仿真分析 一、引言 (1)多模光纤的概念 多模光纤(MMF)是一种具有较大纤芯直径的光纤结构,其核心直径通常在10-50微米范围内。与单模光纤(SMF)相比,…...
0104 AJAX介绍
Ajax 的全称是 Asynchronous Javascript And XML (异步 JavaScript 和 XML )。 通俗的理解:在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式,就是 Ajax Ajax 能让我们轻松实现网页与服务器之间的数据交互。 浏览器…...
代码随想录算法训练营第24天 | 理论基础 77. 组合
目录 理论基础 什么是回溯法 回溯法的效率 回溯法解决的问题 如何理解回溯法 回溯法模板 77. 组合 💡解题思路 💻实现代码 理论基础 什么是回溯法 回溯法也可以叫做回溯搜索法,它是一种搜索的方式。 回溯法的效率 虽然回溯法很难ÿ…...
【深度学习环境搭建】Windows搭建Anaconda3、已经Pytorch的GPU版本
目录 搭建Anaconda3搭建GPU版本的Pytorch你的pip也要换源,推荐阿里源打开conda的PowerShell验证 搭建Anaconda3 无脑下载安装包安装(自行百度) 注意点: 1、用户目录下的.condarc需要配置(自定义环境的地址(…...
基于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 找到配置段: CC CXX CPP LD 把它们改成 CC > "/usr/bin/clang-…...
【信息安全】hydra爆破工具的使用方法
hydra简介 hydra又名九头蛇,与burp常规的爆破模块不同,hydra爆破的范围更加广泛,可以爆破远程桌面连接,数据库这类的密码。他在kali系统中自带。 参数说明 -l 指定用户名 -L 指定用户名字典文件 -p 指定密码 -P 指…...
uniapp中uview组件库丰富的CountTo 数字滚动使用方法
目录 #平台差异说明 #基本使用 #设置滚动相关参数 #是否显示小数位 #千分位分隔符 #滚动执行的时机 #API #Props #Methods #Event 该组件一般用于需要滚动数字到某一个值的场景,目标要求是一个递增的值。 注意 如果给组件的父元素设置text-align: cente…...
inflate流程分析
一.inflate的三参数重载方法else里面逻辑 我们先看到setContentView里面的inflate的调用链: public View inflate(LayoutRes int resource, Nullable ViewGroup root) {return inflate(resource, root, root ! null);}public View inflate(LayoutRes int resource…...
数据挖掘实战-基于机器学习的电商文本分类模型
🤵♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞Ǵ…...
第8章-第4节-Java中字节流的缓冲流
1、缓冲流:属于高级IO流,并不能直接读写数据,需要依赖于基础流。缓冲流的目的是为了提高文件的读写效率?那么是如何提高文件的读写效率的呢? 在内存中设置一个缓冲区,缓冲区的默认大小是8192字节ÿ…...
NULL是什么?
NULL是一个编程术语,通常用于表示一个空值或无效值。在很多编程语言中,NULL用于表示一个变量或指针不引用任何有效的对象或内存位置。 NULL可以看作是一个特殊的值,表示缺少有效的数据或引用。当一个变量被赋予NULL值时,它表示该变…...
在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能
下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能,包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...
三体问题详解
从物理学角度,三体问题之所以不稳定,是因为三个天体在万有引力作用下相互作用,形成一个非线性耦合系统。我们可以从牛顿经典力学出发,列出具体的运动方程,并说明为何这个系统本质上是混沌的,无法得到一般解…...
关键领域软件测试的突围之路:如何破解安全与效率的平衡难题
在数字化浪潮席卷全球的今天,软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件,这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下,实现高效测试与快速迭代?这一命题正考验着…...
网站指纹识别
网站指纹识别 网站的最基本组成:服务器(操作系统)、中间件(web容器)、脚本语言、数据厍 为什么要了解这些?举个例子:发现了一个文件读取漏洞,我们需要读/etc/passwd,如…...
iview框架主题色的应用
1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题,无需引入,直接可…...
WebRTC从入门到实践 - 零基础教程
WebRTC从入门到实践 - 零基础教程 目录 WebRTC简介 基础概念 工作原理 开发环境搭建 基础实践 三个实战案例 常见问题解答 1. WebRTC简介 1.1 什么是WebRTC? WebRTC(Web Real-Time Communication)是一个支持网页浏览器进行实时语音…...
毫米波雷达基础理论(3D+4D)
3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文: 一文入门汽车毫米波雷达基本原理 :https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...
SQL Server 触发器调用存储过程实现发送 HTTP 请求
文章目录 需求分析解决第 1 步:前置条件,启用 OLE 自动化方式 1:使用 SQL 实现启用 OLE 自动化方式 2:Sql Server 2005启动OLE自动化方式 3:Sql Server 2008启动OLE自动化第 2 步:创建存储过程第 3 步:创建触发器扩展 - 如何调试?第 1 步:登录 SQL Server 2008第 2 步…...
微服务通信安全:深入解析mTLS的原理与实践
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、引言:微服务时代的通信安全挑战 随着云原生和微服务架构的普及,服务间的通信安全成为系统设计的核心议题。传统的单体架构中&…...
CTF show 数学不及格
拿到题目先查一下壳,看一下信息 发现是一个ELF文件,64位的 用IDA Pro 64 打开这个文件 然后点击F5进行伪代码转换 可以看到有五个if判断,第一个argc ! 5这个判断并没有起太大作用,主要是下面四个if判断 根据题目…...
