瀏覽器開發人員工具中的「網路」面板可協助你找出資源 並在載入時預先載入資料「Network」面板中的每一列 網頁應用程式載入的特定網址。
![Chrome 開發人員工具網路面板](https://web.developers.google.cn/static/articles/identify-resources-via-network-panel/image/chrome-devtools-network-c1e2afa5c987e.png?authuser=4&hl=zh-tw)
知道您所載入的內容
要為您的網路應用程式擬定正確的快取策略時, 針對您要載入的確切「內容」取得控制代碼。打造可靠的網路環境時 網路可能會受到各種黑暗勢力的影響。您需要執行的操作 瞭解網路有哪些弱點,並設法解決 應用程式。
您可能以為自己對網路內容已有基本想法 系統就會載入應用程式若只需使用少量的靜態 HTML JavaScript、CSS 和圖片檔案等連結但當你開始在準備遊戲時 混合使用內容傳遞聯播網代管的第三方資源 動態 API 要求和伺服器產生的回應後 穆爾基。
適用於幾個小型 CSS 檔案都適用的快取策略 更適合數百張大型圖片
掌握負載時間
整體載入圖片的另一個環節是系統完全載入「時間」,
會傳送至網路的某些要求,例如 導航要求 都會在使用者造訪指定的 網址。該 HTML 可能包含以硬式編碼方式參照重要的 CSS 或 JavaScript 系統必須載入檔案才能顯示互動式網頁。這些 都存在於您的重要載入路徑中您必須積極執行 並快取所需資料
其他資源 (例如 API 要求或延遲載入資產) 可能不會 等所有初始載入作業都順利完成後,才會順利載入物件。如果 因此這些要求只會在特定一系列使用者互動後發生 那麼,系統可能會要求不同的資源組合 多次造訪同一個網頁。較不積極的快取策略 ,因為您可以觀看您認定為「境界」之外的 重要載入路徑
「名稱」和「類型」欄可說明
「名稱」和「類型」欄有助於清楚呈現內容 就會引發這個事件。「載入內容」的答案上述範例加總了 四個網址,每個網址分別代表一種獨特的內容類型。
![Chrome 開發人員工具網路面板顯示載入四個檔案。](https://web.developers.google.cn/static/articles/identify-resources-via-network-panel/image/chrome-devtools-network-4df907e09f1c1.png?authuser=4&hl=zh-tw)
「名稱」代表瀏覽器要求的網址,但您只有在
網址路徑的最後部分舉例來說
已載入「https://example.com/main.css
」,現在只會顯示 main.css
。
網址路徑的最後幾個字元 (緊接在
半形句號 (例如「css」) 就是網址的副檔名。
網址的擴充功能通常會指出要求的資源類型
並直接對應至「類型」欄中的資訊。例如:
v2.html
是文件,而 main.css
是樣式表。
建議您查看「刊登序列」欄
查看「刊登序列」欄,從頂部開始,然後逐步下去。 每個長條的長度代表載入的總時間長度 每個資源如何分辨以下列方式發出的要求: 是關鍵載入路徑的一部分,以及動態引發的請求。 「網頁瀏覽」和「延遲時間」
在刊登序列中的第一個要求一律為 HTML 文件
例如 v2.html
。後續的所有要求都會處理,例如
瀑布!)
並設定 HTML 文件參照的樣式
刊登序列會顯示 v2.html
完成載入後,要求即是
參照的資產 (也稱為子資源) 一開始。
瀏覽器可以同時要求多個子資源
以 main.css
和 Waterfall 欄中的重疊長條表示
logo.svg
。最後,您可以看到 main.js
啟動時的螢幕截圖
等三個網址都載入完畢