如何查看网页内存大小

╰+攻爆jí腚メ 2023-07-17 15:44 32阅读 0赞

## 1、错误的查看方法 ##

我们在做Web端开发的时候，会有需要查看项目的内存占用情况，那么我们的查看内存的操作是这样的：

比如，在Google浏览器测试项目的时候，是先在Memory页签下点击“Take heap snapshot”来查看当前网页的占用内存状况。如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70][]

像图中的Snapshot 1，我们可以看到，这个网页所占的内存2.6M，**那么问题来了，这个2.6M并不这个网页所占的所有的内存总和，只是这个JS运行的代码产生的内存。**

**所以Memory标签中显示的内存大小其实是错误的！**

## 2、正确的查看方法 ##

**那么一个网页所占的内存总和是怎么算的呢？**

首先，我们先用Shift+Esc按键，就能看到如下图图片：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 1][]

上图中没有我们需要的内存显示的列，所以我们要先添加进来，如：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 2][]

将**图片缓存、脚本缓存、CSS缓存、GPU缓存、Javascript使用的内存**添加进来**。**

最后，我们网页的内存带下的公式大概是这样：

**GPU内存+图片缓存+脚本缓存+Javascript使用的内存+CSS缓存**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 3][]

注：

1.有下滑线的两个地方（即“Javascript使用的内存”和“Select JavaScript VM instance”）的内存是一致的，都是JS代码运行产生的内存。

2.红框中的“内存占用空间”是整个网页占用的空间，不能代表实际的内存大小，因为比如我们打开网页的“开发者工具”的时候，也会增加内存。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70]: /images/20230528/715063764d1c47bfb5b6505bb82d126b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 1]: /images/20230528/726014d4fd0444369ac18423bb0caf6c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 2]: /images/20230528/d574f3efe6804f4fa449ef6ccf0b510f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTM2NTQxMjU_size_16_color_FFFFFF_t_70 3]: /images/20230528/e26ad633c0154a1faecc4d1b19f02919.png