如何查看网页内存大小

1、错误的查看方法

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

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

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

 

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

 

2、正确的查看方法

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

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

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

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

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

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

注：

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

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