天天看點

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

渲染阻止資源(render-blocking resources)是浏覽器必須下載下傳、解析和執行才能顯示頁面的外部 JavaScript 或 CSS 檔案。 目标是僅運作正确顯示頁面所需的核心 CSS 和 JavaScript 代碼。

打開 coverage 标簽頁:

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

點選下圖這個圖示,會以 instrumenting 模式重新加載應用:

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

結果顯示,webpack 生成的 vendor.js 檔案,有多達 40% 的代碼并沒有在 SAP Spartacus UI 首頁加載的時候被執行:

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

前面有紅色橫條的代碼,說明 home page 加載時沒有被執行:

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

我們可以做個實驗,如果 vendor.js 根本不加載,結果會如何?

點選這個 more options:

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

選擇顯示“Network request blocking”标簽頁:

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

勾上“Enable network request blocking”的勾,添加 vendor.js:

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

重新重新整理,這個 vendor.js 的加載果然被浏覽器阻止了:

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

SAP 電商雲的 UI 首頁也無法正常被加載了:

使用 Chrome 開發者工具 coverage 功能分析 web 應用的渲染阻止資源的執行分布情況

繼續閱讀