使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况

渲染阻止资源(render-blocking resources)是浏览器必须下载、解析和执行才能显示页面的外部 JavaScript 或 CSS 文件。 目标是仅运行正确显示页面所需的核心 CSS 和 JavaScript 代码。

打开 coverage 标签页:

使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况结果显示,webpack 生成的 vendor.js 文件,有多达 40% 的代码并没有在 SAP Spartacus UI 首页加载的时候被执行:使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况

上一篇:CSS3鼠标滑过图片3D旋转动画


下一篇:LayoutParams使用示例