chrome单页签内存分配上限问题,怎么解决

前言

我们都知道 chrome 的单个标签内存占用都是有限制的,平均也就2~4G,32位的只会更少,并且这很多情况下只是理想状态,当桌面应用多开的时候,chrome 单个页签的大小更是会大幅度缩水,那么我们怎样解决chrome的内存分配上限呢

为什么

疑问:为何要管这个内存分配上限问题?

答:内存不足时,无论是操作系统还是浏览器都会有一些内存交换或者释放内存的方式,无论是哪一个短时间内都是极度耗费性能的,尤其是单纯的内存占用高的问题,频繁的内存交换,这个只会造成更严重的页面严重卡顿,甚至无响应,也就是说到底内存问题还是会再转化为标注你的性能优化问题

一般场景

解决单页签内存分配上限时,我们首先要看问题在哪里,一般会有下面几种场景:

  • 页面递归死循环,堆栈溢出,这个属于重大bug,需要及时解决,不多解释
  • 页面出现了循环引用内存泄漏,导致内存没能及时释放,出现内存占用过高,此时我们要想尽办法解决内存泄漏问题,当然这个问题算是中等问题,因为还有垃圾回收,只要不是全局引用的一般都会随着页面资源的释放释放,或者内存不足时统一释放回收
  • 页面出现了海量数据需要展示的数据,但是又无可奈何的时候,只能想尽办法来避免占用过高,常见的:echarts图标大量数据,直播巨量弹幕等

一些解决方案

递归死循环

对于递归死循环的问题,只能说,靠实力或者队友解决此bug,不应该出现

内存泄漏

当页面出现内存泄漏的时候,前端一般出现在闭包场景,或者强引用场景,出现了类似的循环引用问题,导致内存无法释放或者无法及时释放,累计起来也是一个不小的数字

对于常规页面内的循环引用,一般会随着页面的释放,那片内存空间会成为无主之物,会成为垃圾回收的养料,一般不管

主要是涉及到模块或者全局场景,这类大对象的强引用问题需要注意,如果不及时释放持有,则可能会长期持有,导致内存居高不不下,成为压死骆驼的最后一根稻草

海量数据问题

对于海量的数据问题,常见的就是大屏echart 之类的表格折线图等数据了,这类数据可以通过一些算法,优化尽量减少数据、分段渲染,甚至更改展示区间逻辑,这样内存高占用以及非高占用的卡顿问题能够改善

对于海量数据,还有另外一种情况,就是需要展示海量内容很多,单独一个页面无论怎么处理都是非常麻烦的,此时可以将该页面展示一个概览数据,当需要看详情的时候,直接跳转到另外一个浏览器标签,这样新的把标签的内存占用情况会明显改善,对于新标签页仍然占用过高的情况,仍然使用之前的数据分段减少数据等手段解决

最后

从chrome的内存分配上限,到转化为实际的性能瓶颈优化,到bug修复,到内存泄漏问题,再到海量数据优化,再到页面分布改善标签跳转等

解决问题的思路总是随着我们的疑问,一步一步向外延伸,问题和解决的方案上面也只是其中一部分,分析问题实际上也是我们进步的一环

本篇文章也就介绍到这里了,下次见😄

相关推荐
IT_陈寒2 小时前
Vite的热更新突然不香了,排查三小时差点砸键盘
前端·人工智能·后端
子兮曰2 小时前
Agency-Agents 深度解析:400+ AI 专家的"梦之队"如何重塑开发工作流
前端·后端·vibecoding
竹林8183 小时前
用 The Graph 查询链上数据实战:从手搓 RPC 到 Subgraph,我的 NFT 项目数据加载快了 10 倍
前端·javascript
妙码生花3 小时前
从 PHP 到 AI + Golang,程序员自救转型手记(十九):点选验证码代码逐行目检
前端·后端·go
Awu12274 小时前
⚡从零开发 Agent CLI(五)实现一个可治理、可扩展的工具系统
前端·人工智能·claude
咪库咪库咪4 小时前
Vue3-生命周期
前端
莪_幻尘5 小时前
你的 AI Skill 越多越蠢?Token 上下文爆炸的求生指南
前端·ai编程
lichenyang4535 小时前
从 has.echo 到异步 API 注册表:一次 ASCF API 回调不触发的排查复盘
前端
林瞅瞅5 小时前
Nuxt3 项目部署 Nginx 防盗链后特定 JS 文件 403 问题修复方案
前端
kyriewen6 小时前
别再每次都 Google 了:我整理了前端日常最常踩的 10 个 Git 坑,附速查表
前端·javascript·git