详解JS 和CSS 代码利用率统计利器Coverage以及高版本chrome中coverage的一个致命问题

news2025/1/21 7:40:06

 

在做前端性能测试时较大的文件需要更多时间来下载,并可能导致我们的网站加载缓慢,从而导致用户体验欠佳。因此删除JS和CSS中未被使用的代码就很有必要了!Coverage工具就可以非常方便的实现这一需求。

Coverage使用方法

Coverage 是chrome开发者工具中的一个功能,从字面意思上就可以知道它是可以用来检测代码在网站运行时有哪些js和css是已经在运行,而哪些js和css是还没有用到的。我们可以在Chrome的开发者工具的source面板中将其启动,选择下图中的三个点图标,然后在菜单中选择Coverage即可。

启动Coverage后,点击下图中的刷新按钮,就可以对当前页面中所涉及的JS和CSS脚本进行代码覆盖率统计工作。

具体统计情况如下图所示,最右边显示的是我们加载的css和js文件数量,红色区域表示已运行的代码,而蓝色表示已加载但未运行的代码。

通过coverage可用来发现页面中尚未用到的js 和 css代码,我们可以为用户只提供必要的代码,删除没有用到的代码,这样就可以提升页面的性能,这对于找出可以进行拆分的脚本以及延迟加载非关键脚本来说非常有用的。

高版本chrome中coverage的问题

在这里给大家分享一个我遇到的一个难缠的问题

在chrome 116的source面板中,设置pretty print方式显示代码时,无法完全显示具体的代码利用率,即左侧的红蓝线条会出现展示缺失(具体原因暂时未知),如上图所示。

但是在chrome 90版本中这个问题是可以避免的,如下图所示,我们可以清晰的看到哪些代码执行了(蓝色),哪些代码没有执行(红色),所以想具体查看代码利用率的同学使用chrome 90版本即可。

我的每一篇文章都希望帮助读者解决实际工作中遇到的问题!如果文章帮到了您,劳烦点赞、收藏、转发!您的鼓励是我不断更新文章最大的动力!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/944727.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

已知两地经纬度,计算两地直线距离

文章目录 1 原理公式2 代码实现2.1 JavaScript2.2 C2.3 Python2.4 MATLAB 1 原理公式 在地球上,计算两点之间的直线距离通常使用地理坐标系(例如WGS84)。计算两地直线距离的公式是根据经纬度之间的大圆距离(Great Circle Distanc…

C语言练习题解析:挑战与突破,开启编程新篇章!(1)

💓博客主页:江池俊的博客⏩收录专栏:C语言刷题专栏👉专栏推荐:✅C语言初阶之路 ✅C语言进阶之路💻代码仓库:江池俊的代码仓库🎉欢迎大家点赞👍评论📝收藏⭐&a…

正则表达式 之 断言详解

正则表达式的先行断言和后行断言一共有 4 种形式&#xff1a; (?pattern) 零宽正向先行断言(zero-width positive lookahead assertion)(?!pattern) 零宽负向先行断言(zero-width negative lookahead assertion)(?<pattern) 零宽正向后行断言(zero-width positive lookb…

QML Book 学习基础5(An Image Viewer)

目录 桌面版&#xff08;win端&#xff09; 移动端 下面我们用更有挑战性例子来使用Qt控件&#xff0c;将创建一个简单的图像查看器。 桌面版&#xff08;win端&#xff09; 程序主要由四个主要区域组成&#xff0c;如下所示。菜单栏、工具栏和状态栏&#xff0c;通常由控件…

ApiPost软件会对数据进行预处理,有可能会导致数据报错

文章目录 测试数据正确的请求方式当URL有数据被修改之后&#xff08;数据就不一致了&#xff09; 测试数据 %257B%2522pageNum%2522:1,%2522pageSize%2522:10,%2522param%2522:%257B%2522flowType%2522:1,%2522workcardType%2522:%2522作者的请求方便大家一键复制 localhost:…

记录windows7无权安装

项目场景&#xff1a; electron 安装程序 windows上的C盘 progrom files 、 问题描述 安装过程中出现 不能打开写入文件 提示如上。 { "name": "intergeOM-goldwind","version": "1.0.0","author": "weile",&q…

事业单位D类 — — 理论攻坚-主题班会

一、书写模版 &#xff08;一&#xff09;活动主题 1.书写模板 &#xff08;1&#xff09;&#xff08;主动学习&#xff09;&#xff0c;从我做起/我能行&#xff1b;做&#xff08;环保、诚信&#xff09;卫士/标兵&#xff1b;&#xff08;网络安全、诚信&#xff09;伴…

RealVNC配置自定义分辨率(AlmaLinux 8)

RealVNC 配置自定义分辨率&#xff08;AlmaLinux8&#xff09; 参考RealVNC官网 how to set up resolution https://help.realvnc.com/hc/en-us/articles/360016058212-How-do-I-adjust-the-screen-resolution-of-a-virtual-desktop-under-Linux-#standard-dummy-driver-0-2 …

Linux操作系统的基本配置操作

Linux操作系统的基本操作 一、和网络有关的Linux操作二、网络如果修改完成&#xff0c;需要重启Linux的网卡服务三、在Linux上还有一个网络服务NetworkManagaer四、Linux上还有一个服务叫做firewalld&#xff08;防火墙的服务&#xff09;五、Linux安装的节点服务器我们一般都是…

数据结构体--5.0图

目录 一、定义 二、图的顶点与边之间的关系 三、图的顶点与边之间的关系 四、连通图 五、连通图的生成树定义 一、定义 图&#xff08;Graph&#xff09;是由顶点的又穷非空集合合顶点之间边的集合组成&#xff0c;通常表示为&#xff1a;G&#xff08;V&#xff0c;E&…

中国知网账号包月多少钱?怎样知网包月最划算

中国知网是我们在查找下载论文资料时常用的中文数据库&#xff0c;也是全球最大的中文数据库之一。那么&#xff0c;中国知网是否可以包月使用呢&#xff1f;包月费用又是多少呢&#xff1f;如何包月最划算呢&#xff1f;下面本文将为您一一解答。 一、中国知网可包月使用吗&a…

C 语言不同类型变量之间的大小比较

1. 示例代码&#xff1a; #include <stdio.h>int main(void) {int a -1;unsigned int b 1;if (a b) {printf("a b\n");} else if (a < b) {printf("a < b\n");} else {printf("a > b\n");}return 0; } 2. 输出结果&#xff…

用变压器实现德-英语言翻译【01/8】:嵌入层

一、说明 本文是“用变压器实现德-英语言翻译”系列的第一篇文章。它引入了小规模的嵌入来建立感知系统。接下来是嵌入层的变压器使用。下面简要概述了每种方法&#xff0c;然后是德语到英语的翻译。 二、技术背景 嵌入层的目标是使模型能够详细了解单词、标记或其他输入之间的…

简易虚拟培训系统-UI控件的应用2

目录 Text组件-文字显示 Text组件-文字动态显示 ScrollView组件 使用文件流动态读取硬盘文件 本篇介绍Text和ScrollView的简单应用&#xff0c;以及读取硬盘中.txt文本的内容 Text组件-文字显示 1. 加入Text&#xff1a;在mainCanvas上点右键->UI->选择Text和TextMe…

CocosCreator组件上的schedule

目录 1.首先看component.ts中schedule 函数&#xff0c;核心代码就是获取director.getScheduler()&#xff0c;并调用schedule方法&#xff0c;把callback等参数传递进去。 2.再看到scheduler.ts类中的schedule方法&#xff0c;只取一些主要代码&#xff0c;下面会分段详细拆…

dockerfile 例子(二)

Dockerfile由一行一行的命令语句组成&#xff0c;#开头的为注释行。Dockerfile文件内容分为四个部分&#xff1a;基础镜像信息、维护者信息、镜像操作指令以及容器启动执行指令。 接下来给大家列出Dockerfile中主要命令的说明。 FROM&#xff0c;指定所创建镜像的基础镜像。 …

Verilog基础:块语句

相关阅读 Verilog基础专栏https://blog.csdn.net/weixin_45791458/category_12263729.html?spm1001.2014.3001.5482 1、块语句 块语句(block statements)是一种把语句组织在一起&#xff0c;这样他们在语法上就像单个语句一样工作。Verilog HDL中有两种类型的块&#xff1a; …

“惠医通-医院挂号订单平台”

结合已学习过的vue3和TS完成的项目&#xff0c;便于患者对自己想要就诊的科室进行挂号&#xff0c;付款 一&#xff1a;项目简介 前端技术栈 Vue3 TS vue-router Element-ui Axios Pinia 项目架构 二&#xff1a;主要模块 1. axios二次封装 1.1 创建实例 //利用axios.creat…

如何调整DOSBOX软件的运行窗口大小

前言 小编最近正在学习微机原理&#xff0c;碰到一些问题&#xff0c;在安装DOSBOX后&#xff0c;打开应用&#xff0c;会出现运行窗口特别小&#xff0c;字体也很小的情况&#xff0c;使用时会感觉特别费劲&#xff0c;看着特别的不舒服&#xff0c;那么这个时候就需要调整一…

【LeetCode题目详解】第八章 贪心算法 part01 理论基础 455.分发饼干 376. 摆动序列 53. 最大子序和 day31补

贪心算法理论基础 关于贪心算法&#xff0c;你该了解这些&#xff01; 题目分类大纲如下&#xff1a; # 什么是贪心 贪心的本质是选择每一阶段的局部最优&#xff0c;从而达到全局最优。 这么说有点抽象&#xff0c;来举一个例子&#xff1a; 例如&#xff0c;有一堆钞票&…