渲染阻止资源 (render-blocking resources) 是浏览器必须下载、解析和执行能力显示页面的内部 JavaScript 或 CSS 文件。指标是仅运行正确显示页面所需的外围 CSS 和 JavaScript 代码。
关上 coverage 标签页:
点击下图这个图标,会以 instrumenting 模式从新加载利用:
结果显示,webpack 生成的 vendor.js 文件,有多达 40% 的代码并没有在 SAP Spartacus UI 首页加载的时候被执行:
后面有红色横条的代码,阐明 home page 加载时没有被执行:
咱们能够做个试验,如果 vendor.js 基本不加载,后果会如何?
点击这个 more options:
抉择显示“Network request blocking”标签页:
勾上“Enable network request blocking”的勾,增加 vendor.js:
从新刷新,这个 vendor.js 的加载果然被浏览器阻止了:
SAP 电商云的 UI 首页也无奈失常被加载了:
更多 Jerry 的原创文章,尽在:” 汪子熙 ”: