找出從網路載入的資源

瀏覽器開發人員工具中的「網路」面板可協助你找出資源 並在載入時預先載入資料「Network」面板中的每一列 網頁應用程式載入的特定網址。

Chrome 開發人員工具網路面板

知道您所載入的內容

要為您的網路應用程式擬定正確的快取策略時, 針對您要載入的確切「內容」取得控制代碼。打造可靠的網路環境時 網路可能會受到各種黑暗勢力的影響。您需要執行的操作 瞭解網路有哪些弱點,並設法解決 應用程式。

您可能以為自己對網路內容已有基本想法 系統就會載入應用程式若只需使用少量的靜態 HTML JavaScript、CSS 和圖片檔案等連結但當你開始在準備遊戲時 混合使用內容傳遞聯播網代管的第三方資源 動態 API 要求和伺服器產生的回應後 穆爾基。

適用於幾個小型 CSS 檔案都適用的快取策略 更適合數百張大型圖片

掌握負載時間

整體載入圖片的另一個環節是系統完全載入「時間」

會傳送至網路的某些要求,例如 導航要求 都會在使用者造訪指定的 網址。該 HTML 可能包含以硬式編碼方式參照重要的 CSS 或 JavaScript 系統必須載入檔案才能顯示互動式網頁。這些 都存在於您的重要載入路徑中您必須積極執行 並快取所需資料

其他資源 (例如 API 要求或延遲載入資產) 可能不會 等所有初始載入作業都順利完成後,才會順利載入物件。如果 因此這些要求只會在特定一系列使用者互動後發生 那麼,系統可能會要求不同的資源組合 多次造訪同一個網頁。較不積極的快取策略 ,因為您可以觀看您認定為「境界」之外的 重要載入路徑

「名稱」和「類型」欄可說明

「名稱」和「類型」欄有助於清楚呈現內容 就會引發這個事件。「載入內容」的答案上述範例加總了 四個網址,每個網址分別代表一種獨特的內容類型。

Chrome 開發人員工具網路面板顯示載入四個檔案。

「名稱」代表瀏覽器要求的網址,但您只有在 網址路徑的最後部分舉例來說 已載入「https://example.com/main.css」,現在只會顯示 main.css

網址路徑的最後幾個字元 (緊接在 半形句號 (例如「css」) 就是網址的副檔名。 網址的擴充功能通常會指出要求的資源類型 並直接對應至「類型」欄中的資訊。例如: v2.html 是文件,而 main.css 是樣式表。

建議您查看「刊登序列」欄

查看「刊登序列」欄,從頂部開始,然後逐步下去。 每個長條的長度代表載入的總時間長度 每個資源如何分辨以下列方式發出的要求: 是關鍵載入路徑的一部分,以及動態引發的請求。 「網頁瀏覽」和「延遲時間」

在刊登序列中的第一個要求一律為 HTML 文件 例如 v2.html。後續的所有要求都會處理,例如 瀑布!) 並設定 HTML 文件參照的樣式

Chrome 開發人員工具瀑布檢視畫面

刊登序列會顯示 v2.html 完成載入後,要求即是 參照的資產 (也稱為子資源) 一開始。 瀏覽器可以同時要求多個子資源 以 main.css 和 Waterfall 欄中的重疊長條表示 logo.svg。最後,您可以看到 main.js 啟動時的螢幕截圖 等三個網址都載入完畢