web应用越用越卡怎么办

简介

如果你的网页应用越用越卡,你就有理由怀疑存在内存泄露
在开发Web应用程序时，经常会遇到内存泄漏的问题，这可能导致应用程序的性能下降或崩溃。Chrome浏览器提供了一个内存面板，可以帮助我们识别并解决这些问题。本文将介绍如何使用Chrome的Memory面板进行内存分析，并提供了一些常见的内存泄漏原因和解决方案。

打开Chrome的Memory面板

1. 使用Chrome浏览器打开你要调试的网页。
2. 按下F12(Windows)或Command + Option + I(Mac)来打开Chrome的开发者工具。
3. 在开发者工具中，切换到"Memory"选项卡。

如何分析内存泄漏

1.记录内存快照

2.找到内存增加的操作

通过操作页面,观察内存值的变化,找出对内存影响大的操作.同时要注意,内存增加了并一定存在内存泄露,比如你的dom变多了,自然内存就会变大.如果发现,组件或者页面已经销毁了,并等待一段时间,内存还是没降下来,就可以记录当前的内存快照,进行比较.

3.比较内存快照

在Memory面板上，选择需要对比的快照。这里会显示你记录的内存快照列表。选择两个快照进行对比，以查看它们之间的差异。

4.查找可能的泄漏

Distance（距离）：表示从根对象到被选中对象之间的最短路径长度。它反映了被选中对象与根对象之间的引用关系的深度。

Shallow Size（浅层大小）：表示选定对象本身占用的内存大小，不包括其引用的其他对象。

Retained Size（保留大小）：表示选定对象及其所有直接或间接引用的对象所占用的内存总和。它是通过使用垃圾回收算法计算出来的，也就是说，即使有些对象没有直接引用指向它们，但由于它们仍然可以通过其他途径访问，所以它们的内存将被保留。

如何根据这些属性判断内存泄漏？
通常情况下，可以根据以下准则来判断可能存在内存泄漏问题：

如果一个对象的Distance（距离）很大，意味着该对象与根对象之间的引用链较长，可能存在内存泄漏。需要进一步检查该对象及其引用的其他对象是否可以被正常垃圾回收。

如果一个对象的Shallow Size（浅层大小）非常大，说明该对象本身占用了大量的内存。这可能是正常情况，比如一个大型数组或图片等，但也有可能是内存泄漏的原因之一。需要结合其他指标进一步判断。

如果一个对象的Retained Size（保留大小）远远超过它的Shallow Size（浅层大小），表示该对象及其所引用的其他对象在内存中保留了大量的空间。这种情况下很可能存在内存泄漏，需要进一步检查对象之间的引用关系，确定是否存在不必要的引用导致内存无法正常释放。

另外可以通过对象后面的数量来判断,如果一个对象的数量一直增加,就需要进一步判断,是否存在未释放的情况
最后具体的对象可以点击生成它的文件中查看,具体的生成逻辑,进一步排查泄露原因