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

渲染阻止资源(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 首页也无法正常被加载了:

(0)

相关推荐

  • Vue项目上线要做哪些优化?面试必学

    前言 大家好啊,我是wangly19,一名前端摸鱼小能手.最近忙着开源项目的东西,还有公司项目的迭代问题,导致更新文章的频率有点低了.也来聊聊我在干嘛吧. 第一个事情就是比较我的阉割版UI Desig ...

  • 前端性能优化清单,超详细,一篇文章足矣,建议看完(1)

    前端性能优化清单,超详细,一篇文章足矣,建议看完(1) 沐晨枫语2021-02-02 22:49:36 当我们去面试的时候,很大概率会被面试官问这么一个问题:你有尝试过对项目做性能优化吗?或者你了解哪 ...

  • 使用 Chrome 开发者工具的 lighthouse 功能分析 web 应用的性能问题

    Optimize website speed 每当您着手提高站点的负载性能时,请始终从 audit 开始. 审计有两个重要功能: 它为您创建了一个基线来衡量后续更改. 它为您提供有关哪些更改将产生最大 ...

  • Chrome开发者工具详解

    面板组成 包括控制器.过滤器.概览.请求列表.概要. 控制器--控制面板的外观与功能. 过滤器--过滤请求列表中显示的资源,按住Command(Mac)或Ctrl(Window/Linux),然后点击 ...

  • Chrome开发者工具详解(2)

    Chrome开发者工具详解(2)-Network面板 注: 这一篇主要讲解面板Network,参考了Google的相关文档,主要用于公司内部技术分享. Chrome开发者工具面板 面板上包含了Elem ...

  • Chrome开发者工具不彻底指南:(3、性能篇)

    卤煮在前面已经向你们介绍了Chrome开发者工具的一些功能面板,其中包括Elements.Network.Resources基础功能部分和Sources进阶功能部分,对于通常的网站项目来讲,其实就是须 ...

  • Chrome 开发者工具无法显示服务器正常返回的 HTTP 请求 - Failed to load response data

    今天做开发时遇到一个问题,Chrome 开发者工具 network 标签里,虽然一个 HTTP 请求已经成功从服务器端返回,但是 Chrome 开发者工具里,仍然显示 Failed to load r ...

  • Chrome开发者工具使用指南

    前言 工欲善其事,必先利其器. 在前端工作中,我们常常使用到Chrome开发者工具去做各种各样的事情. 但是您真的了解这些开发者工具吗? 官方文档还是挺详细的:chrome-devtools文档. 但 ...

  • Chrome 开发者工具 workspace 的概念

    Edit files with Workspaces 本教程提供设置和使用工作区的实践练习,以便您可以在自己的项目中使用工作区. 工作区使您能够将在 DevTools 中所做的更改保存到存储在计算机上 ...

  • Chrome 开发者工具里的 CSS grid editor

    Grid 布局与 Flex 布局有一定的相似性,都可以指定容器内部多个项目的位置.但是,它们也存在重大区别. Flex 布局是轴线布局,只能指定"项目"针对轴线的位置,可以看作是一 ...

  • 使用 Chrome 开发者工具分析内存问题

    DevTools 显示了按功能划分的内存分配细目. 默认视图是 Heavy (Bottom Up),它在顶部显示分配最多内存的函数. Fix memory problems 内存泄漏很容易定义. 如果 ...