浏览器中怎么查看当前网页所有资源的数据大小

在开发者工具的“网络”选项卡中，可以看到所有请求和响应的详细信息，包括每个资源的大小。如果需要查看网页所有资源的总大小，可以按照以下步骤操作：

打开要查看的网页。

打开开发者工具，切换到“网络”选项卡。

刷新网页，等待开发者工具记录所有请求和响应。

在开发者工具中，找到“Size”（大小）一列，可以看到每个资源的大小，以字节为单位。

在底部的状态栏中，可以看到所有资源的总大小，以及加载时间等信息。如果看不到状态栏，可以通过点击开发者工具右下角的“Show drawer”按钮打开。

请注意，由于网页中的资源可能是异步加载的，因此总大小可能会随着时间而变化。此外，总大小也包括了一些可能不是网页本身的资源，比如广告或者分析脚本等。

最下面那列就是总计了

 

 

28 requests

703 kB transferred

1.7 MB resources

Finish: 1.64 s

DOMContentLoaded: 716 ms

Load: 1.53 s

28 requests：网页加载过程中发出了28个请求，包括HTML、CSS、JavaScript、图片等资源。

703 kB transferred：总共传输了703 KB的数据，这包括了所有请求和响应的数据大小。

1.7 MB resources：网页本身的资源总大小为1.7 MB，这是所有资源（包括缓存的资源）的总和。

Finish: 1.64 s：网页的加载时间为1.64秒，也就是从发出第一个请求到所有资源加载完成的时间。

DOMContentLoaded: 716 ms：表示 DOMContentLoaded 事件的触发时间，也就是当网页的 HTML 和 DOM 结构都加载完成后，浏览器触发的一个事件。在这个时间点之后，网页上的 JavaScript 代码可以开始执行。在这个例子中，DOMContentLoaded 事件触发的时间是 716 毫秒。

Load: 1.53 s：表示 Load 事件的触发时间，也就是当所有资源（包括图片、样式、JavaScript 等）都加载完成后，浏览器触发的一个事件。在这个事件触发之后，网页上的所有内容都已经完全加载完成，用户可以开始进行交互。在这个例子中，Load 事件触发的时间是 1.53 秒。

我们主要关注703k transferred

703 kB transferred：指的是网页加载过程中，浏览器从服务器下载的所有资源的总大小，包括 HTML、CSS、JavaScript、图片等。

1.7 MB resources：指的是网页本身的资源总大小，包括 HTML、CSS、JavaScript、图片等所有资源的总和，这个大小包括了浏览器缓存的资源。

也就是703 /1.5 就是每秒传输的数据，468 单位是k

假如带宽是5Mbps  ，也就是每秒5 * 1024 ，5120 单位是k

5120 / 468 = 10.94017094017094  大约就是10个人每秒同时打开这个页面

超过了就带宽就满了，就打不开了，但是这是理论上同时刷新页面。正常情况下，都是会错开的，并且进入页面后，只是收发消息的接口资源非常少，因此几十人在线也是没有问题的。

 

查看原文