使用|使用 Chrome 开发者工具 coverage 功能分析 web 应用的渲染阻止资源的执行分布情况
【使用|使用 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 首页也无法正常被加载了：
文章图片
更多Jerry的原创文章，尽在："汪子熙":
文章图片
推荐阅读
- 由浅入深理解AOP
- Mac安装Chromedriver
- 【译】20个更有效地使用谷歌搜索的技巧
- mybatisplus如何在xml的连表查询中使用queryWrapper
- MybatisPlus|MybatisPlus LambdaQueryWrapper使用int默认值的坑及解决
- MybatisPlus使用queryWrapper如何实现复杂查询
- iOS中的Block
- Linux下面如何查看tomcat已经使用多少线程
- 使用composer自动加载类文件
- android|android studio中ndk的使用