当前位置: 首页 > Web前端 > JavaScript

使用ChromeDeveloperTools的覆盖率特性分析web应用的render-blockingresources执行分布

时间:2023-03-27 11:48:44 JavaScript

Render-blockingresources(渲染阻塞资源)是浏览器必须下载、解析并执行的外部JavaScript或CSS文件顺序显示页面。目标是只运行正确显示页面所需的核心CSS和JavaScript代码。打开coverage选项卡:点击下图图标以instrumenting模式重新加载应用:结果显示webpack生成的vendor.js文件中有多达40%的代码在SAPSpartacusUIhome时没有执行pagewasloaded:前面有红色横条的代码表示主页在加载时没有执行:我们可以做一个实验,如果vendor.js根本没有加载,会发生什么?点击这个更多选项:选择显示“网络请求拦截”选项卡:勾选“启用网络请求拦截”复选框,添加vendor.js:刷新,加载这个vendor.js确实被浏览器拦截了:SAPe-commerce云UI首页无法正常加载:Jerry更多原创文章在这里:《王子熙》: