首先使用Chrome任务管理器查看各标签页内存占用,其次可通过chrome://flags启用悬停显示内存功能,最后利用开发者工具的Memory面板进行堆快照分析以检测泄漏。

谷歌浏览器怎么查看当前网页的内存占用情况_Chrome网页内存监控教程  第1张

如果您在浏览网页时发现浏览器变得迟缓或卡顿,可能是某个页面占用了过多的内存资源。了解当前网页的内存占用情况有助于识别并解决性能问题。以下是几种在Chrome中监控网页内存使用的方法。

本文运行环境:Dell XPS 13,Windows 11

一、使用Chrome任务管理器

Chrome任务管理器可以显示每个标签页、扩展程序和后台进程的实时内存使用情况,是快速定位高资源消耗页面的首选工具。

1、在Chrome浏览器中,点击右上角的三点菜单图标,选择更多工具,然后点击任务管理器

2、在打开的任务管理器窗口中,找到您想要检查的网页标签页,观察其内存占用JavaScript内存列的数值。

3、如需释放资源,可选中该条目后点击结束进程按钮,这将关闭对应的标签页或进程。

二、启用标签页悬停显示内存功能

Chrome正在测试一项便捷功能,允许用户通过将鼠标悬停在标签页上来直接查看其内存占用,无需打开任务管理器。

1、在Chrome地址栏输入chrome://flags/#memory-usage-on-hover并按回车键。

2、在搜索结果中找到Memory usage on hover选项,将其下拉菜单设置为Enabled

3、根据提示重启浏览器以应用更改。之后,只需将鼠标指针悬停在任意标签页上,即可看到一个小卡片显示该页面的内存使用量。

三、利用开发者工具的内存面板

对于需要深入分析内存泄漏或对象分配情况的开发者,Chrome DevTools提供了专业的内存分析工具,可以生成堆快照并进行详细比对。

1、在目标网页上按下F12Ctrl+Shift+I打开开发者工具。

2、切换到Memory面板(若未显示,可通过“>>”菜单找到)。

3、选择Heap snapshot模式,点击Take snapshot按钮记录当前JavaScript堆内存状态。

4、执行可能引发内存泄漏的操作后,再次拍摄快照,并通过比较不同快照来识别未被回收的对象。