网页内存占用高如何优化

[lulinchuanllc]

如题所述，目前公司有一个 vue2 后台管理项目，代码量非常大，功能也非常多，大部分页面是列表+详情的组合，现在客户反馈打开我们的网页，开的 tab 多了之后，浏览器容易闪退，我自己试了下，内存占用可以到七八百兆。 目前看了一些内存优化的文章和分享，但是里面的垃圾代码是在太多，有大佬做过类似的优化或者看过类似的文章吗，或者提供下思路

[8355]

公司为用户电脑增加内存，这是最低成本方案。

[nitmali]

检查一下是否有内存泄漏的因素 闭包 定时器 乱 console.log 等等
检查一下是否有大量操作 DOM
检查是否有递归或者一次性生成大量数据什么的

[rekulas]

加内存只是吃止痛药，还是要找到原因才行
可以考虑排查下是否存在内存泄漏的代码 https://facebook.github.io/memlab/

[wxf666]

什么浏览器，七八百兆就崩啊？我这常年几个 G 呢。。

不会是一个页面就七八百兆吧？抖音客户端，也是 Electron ，都才四五百兆啊。。

[cloverzrg2]

@wxf666 #4 都说了网页优化，那就是一个 Tab 的内存占用，肯定不是整个浏览器几十个 Tab 页面的内存占用啊

[zhongjun96]

@wxf666 #4 我做工厂 erp 的，工厂还不少 2G ram 的机器。

[rekulas]

@wxf666 应该是指单 tab 几百兆 不是浏览器几百
tab 几大百是有点高了，大概率泄漏了，毕竟打开淘宝刷一会也才 2 300MB

[musi]

@rekulas #7 c 端的业务和 b 端不能直接比好吧。。。

[TV1X6Na04Q52A20X]

系统有做前端拆分么，如果拆过试试虚拟列表（延迟加载）。可以用 Lighthouse 分析下哪个环节的问题....

[geekvcn]

让你客户把虚拟内存调大

[br_wang]

看看有没有 Pb 之类的需要在浏览器环境以字符串 eval 成对应方法的类库，初始化是否正确。
以前遇到过代码按次新建 Pb 实例，对应方法字符串在内存多次保存的情况。

还有一些 chrome 的问题造成的内存泄漏，比如： https://github.com/vuejs/core/issues/5363
当然还有一些 vue 本身的问题造成的，比如： https://github.com/vuejs/core/issues/5256

[wangtian2020]

组件没有销毁？虚拟列表？

[IvanLi127]

本地复现出问题了吗？复现完慢慢拍快照看内存里都是啥。找到不正常的占用就可以开始改代码了。

[janus77]

先静态扫描一下
首先内存泄漏肯定必须优化
然后再优化内存随便申请的问题
在这过程中摸索出适合你们团队的一套静态 es 规范，后续团队强制开启执行就行了

[VagabondH]

你是说浏览器整个 700 - 800MB ，还是你们的网页直接就占到了 700-800MB 呢？ 大概率不是因为你们的项目过大，而是因为你们某些数据或者渲染 dom 的操作不当导致的，可以在占用大的 case 下用 performance 工具录了 10s 然后分析是因为内存问题还是渲染问题。

[lulinchuanllc]

@8355 😭如果可以一人加一条 32G 内存条就好了

[lulinchuanllc]

@nitmali 这种代码太多了，代码迭代三四年了，什么写法都有

[lulinchuanllc]

@rekulas #3 感谢大佬，我试下这个工具