20行代码实现的一个CSS覆盖率测试脚本


Posted in Javascript onJuly 07, 2013

document.styleSheets里保存了当前页面上所有CSS规则的集合。通过它可以遍历出页面<style>里定义的所有selector,访问selectorText属性可得选择器的匹配规则。然后将规则规则传递给 document.querySelectorAll 即可获取页面内匹配此规则的元素列表。
这里我们只求CSS规则的覆盖率,所以访问 querySelectorAll().length 即可。通过排序就可看出各个CSS使用情况。
代码很简单。

var usage = [];
var sheets = document.styleSheets;
for(var i = sheets.length - 1; i != -1; i--) {
    var rules = sheets[i].rules;
    for(var j = rules.length - 1; j != -1; j--) {
        var rule = rules[j];
        var text = rule.selectorText;
        usage.push({name: text, count: document.querySelectorAll(text).length});
    }
}
usage.sort(function(a, b){return a.count - b.count});
for(var i = usage.length - 1; i != -1; i--) {
    console.log("选择器:" + usage[i].name + "\n\t匹配数:" + usage[i].count);
}

呼出F12,把代码粘到console里回车即可。

当然由于权限问题,外部导入的CSS无论如何都访问不到,暂时先不考虑了。至于不支持styleSheets的破IE嘛,可以考虑用expression或者behaviour.htc,改天试试看。
纯JS实现就到此。以后配合本地程序实现外部CSS的分析。

顺便贴个测试结果:

20行代码实现的一个CSS覆盖率测试脚本

哪些CSS没用到一目了然:

20行代码实现的一个CSS覆盖率测试脚本

当然,0匹配并不代表它就是没用的。最典型的例子就是:hover,只有鼠标移上去才会匹配。还有通过className控制,[attr=],#动态ID,动态元素。。。。等等等等的样式都不是轻易能匹配到。

所以以上代码意义并不大,而且目前主流浏览器都内置Profiles功能,并且能实时跟踪选择器匹配的元素数,所以做个IE版本的才有些意义:)

Javascript 相关文章推荐
JQuery对id中含有特殊字符的转义处理示例
Sep 06 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
详细解读JavaScript的跨浏览器事件处理
Aug 12 Javascript
javacript获取当前屏幕大小
Jun 04 Javascript
jQuery序列化表单成对象的简单实现
Nov 29 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
高效的jQuery代码编写技巧总结
Feb 22 Javascript
Angular2使用jQuery的方法教程
May 28 jQuery
关于vue.extend和vue.component的区别浅析
Aug 16 Javascript
在layui中使用form表单监听ajax异步验证注册的实例
Sep 03 Javascript
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
在JavaScript里嵌入大量字符串常量的实现方法
Jul 07 #Javascript
JQuery表格内容过滤的实现方法
Jul 05 #Javascript
JS动态创建Table,Tr,Td并赋值的具体实现
Jul 05 #Javascript
Javascript实现动态菜单添加的实例代码
Jul 05 #Javascript
javascript实现跳转菜单的具体方法
Jul 05 #Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 #Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 #Javascript
You might like
Codeigniter中mkdir创建目录遇到权限问题和解决方法
2014/07/25 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
php函数重载的替代方法--伪重载详解
2015/05/08 PHP
php+html5实现无刷新图片上传教程
2016/01/22 PHP
JavaScript 参考教程
2006/12/29 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
JavaScript 实现鼠标拖动元素实例代码
2014/02/24 Javascript
javascript制作sql转换为stringBuffer的小工具
2015/04/03 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
JQuery给网页更换皮肤的方法
2015/05/30 Javascript
js密码强度校验
2015/11/10 Javascript
JS使用eval()动态创建变量的方法
2016/06/03 Javascript
jquery移除了live()、die(),新版事件绑定on()、off()的方法
2016/10/26 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
2017/08/11 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
深入理解ES6中let和闭包
2018/02/22 Javascript
使用VUE+iView+.Net Core上传图片的方法示例
2019/01/04 Javascript
如何在Vue中抽离接口配置文件
2019/10/31 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
Node.js API详解之 os模块用法实例分析
2020/05/06 Javascript
js实现拾色器插件(ColorPicker)
2020/05/21 Javascript
js验证账户名是否重复
2020/05/26 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
Python中非常实用的一些功能和函数分享
2015/02/14 Python
python下读取公私钥做加解密实例详解
2017/03/29 Python
python计算日期之间的放假日期
2018/06/05 Python
spark: RDD与DataFrame之间的相互转换方法
2018/06/07 Python
pygame游戏之旅 添加碰撞效果的方法
2018/11/20 Python
python批量图片处理简单示例
2019/08/06 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
遗嘱公证书标准样本
2014/04/08 职场文书
2014年幼儿园国庆主题活动方案
2014/09/16 职场文书
巴黎圣母院读书笔记
2015/06/26 职场文书
Python作用域和名称空间的详细介绍
2022/04/13 Python