使用 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 应用的渲染阻止资源的执行分布情况

更多Jerry的原创文章,尽在:"汪子熙":
使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况

上一篇:二十六、逐行阅读Yii2.0.43源码_Yii框架文件yii\base\Application.php(4)


下一篇:Go包管理