浏览器中怎么查看当前网页所有资源的数据大小
在开发者工具的“网络”选项卡中,可以看到所有请求和响应的详细信息,包括每个资源的大小。如果需要查看网页所有资源的总大小,可以按照以下步骤操作:
- 打开要查看的网页。
- 打开开发者工具,切换到“网络”选项卡。
- 刷新网页,等待开发者工具记录所有请求和响应。
- 在开发者工具中,找到“Size”(大小)一列,可以看到每个资源的大小,以字节为单位。
- 在底部的状态栏中,可以看到所有资源的总大小,以及加载时间等信息。如果看不到状态栏,可以通过点击开发者工具右下角的“Show drawer”按钮打开。
请注意,由于网页中的资源可能是异步加载的,因此总大小可能会随着时间而变化。此外,总大小也包括了一些可能不是网页本身的资源,比如广告或者分析脚本等。
最下面那列就是总计了
28 requests
- 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个人每秒同时打开这个页面
超过了就带宽就满了,就打不开了,但是这是理论上同时刷新页面。正常情况下,都是会错开的,并且进入页面后,只是收发消息的接口资源非常少,因此几十人在线也是没有问题的。