如何查看一个在线页面的内存大小

查看一个在线页面M端内存的操作方法：

1. 打开界面：使用浏览器打开页面（本次选用google chrome），找到developer tools按钮或按F12打开开发者工具，点击手机屏幕按钮，再按F5，打开网页的手机端。

2. 找到右侧代码的Network 功能选项

3. 所有资源：点击Network - 点击ALL，是加载页面上所有内容，包含js,css,img,media等资源

4. 页面内存大小：下拉到最后，可以看到6.1MB resources, 6.1MB就是这个页面的内存大小。

但是实际传输的以左边那个transfered为准。因为有缓存，所以加载了2.5MB的资源,如果第二次再打开这个页面，缓存的内容就更多，transferred的加载内存就会更少。

2.5MB transferred是实际用户打开页面加载的内存大小，因为有些资源是缓存里的，不占用用户加载的内存。

有些内容会被压缩后传输，所以这个值总会比实际大小要小。

5.  Transferred包含的内存有哪些：如果要查看2.5MB transferred的资源有哪些，可以分别点击头部ALL右侧的各个功能，比如js,css,img，点击到img发现，图片的内存占2.2MB，那如果要优化这个页面的速度的话，就要从img上着手。

6. 查看img里具体内容的size和time数据：

可对size比较大的产品图片，加载时间比较长的产品图片进行内存的压缩，或采取谷歌推荐的图片格式（ JPEG 2000, JPEG XR, and WebP），还可以使用优化图片的工具和插件（ImageOptim工具,squoosh工具,Magento优化图片扩展插件，图像优化WordPress插件，Joomla图片优化插件）。

7. 加载时间分析：Loading: 5.67s时间，是所有资源加载完的时间，包括第三方的一些东西。

页面内容展示全部主要看domcontentloaded的时间，第三方fb和google ad的，占比不大，但time上显示的加载时间比较长，这个加载是在页面加载完成后，也就是能看到完整页面后，实际上是对用户体验没啥影响的，所以这个页面内容展示需要的时间是1.76s（domcontentloaded）。

第一次访问过后，浏览器会把图片 js css这种静态资源缓存下来。你再请求的话，只要缓存不过期，就不再去加载了，直接用缓存，这时的页面加载内存会相比第一次小很多，可能就是300多KB的transferred。

扩充：用memory功能查看的页面内存大小，是电脑加载占用了电脑多少内存资源的，是查看js调用栈的，是看js执行期间电脑系统分配了多少内存，不是说页面有多少size的。这个跟设备和浏览器有关系。

总结：

学会查看一个页面的内存大小，找出占内存比较多的资源项有哪些，再进行针对性的优化，一个页面的内存越小，在相同前提下，用户打开的加载速度就越快，特别是在谷歌的核心网页指标（LCP, FID, CLS）即将在6月上线的前夕，网站，页面速度提升应该成为这段时间的首要任务。