瀏覽器中怎麼查看當前網頁所有資源的數據大小
在開發者工具的“網絡”選項卡中,可以看到所有請求和響應的詳細信息,包括每個資源的大小。如果需要查看網頁所有資源的總大小,可以按照以下步驟操作:
- 打開要查看的網頁。
- 打開開發者工具,切換到“網絡”選項卡。
- 刷新網頁,等待開發者工具記錄所有請求和響應。
- 在開發者工具中,找到“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個人每秒同時打開這個頁面
超過了就帶寬就滿了,就打不開了,但是這是理論上同時刷新頁面。正常情況下,都是會錯開的,並且進入頁面後,只是收發消息的接口資源非常少,因此幾十人在線也是沒有問題的。