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 相关文章推荐
csdn 博客中实现运行代码功能实现
Aug 29 Javascript
js 创建快捷方式的代码(fso)
Nov 19 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
JS使用parseInt解析数字实现求和的方法
Aug 05 Javascript
jquery实现图片水平滚动效果代码分享
Aug 26 Javascript
jQuery之动画效果大全
Nov 09 Javascript
jquery实现的table排序功能示例
Mar 10 Javascript
用JavaScript和jQuery实现瀑布流
Mar 19 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
Oct 24 Javascript
浅谈React和Redux的连接react-redux
Dec 04 Javascript
javascript触发模拟鼠标点击事件
Jun 26 Javascript
Vue和React有哪些区别
Sep 12 Javascript
在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
在PHP中利用XML技术构造远程服务(上)
2006/10/09 PHP
PHP字符串 ==比较运算符的副作用
2009/10/21 PHP
解析argc argv在php中的应用
2013/06/24 PHP
PHP远程采集图片详细教程
2014/07/01 PHP
php绘制一个扇形的方法
2015/01/24 PHP
php上传文件并显示上传进度的方法
2015/03/24 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
PHP读书笔记_运算符详解
2016/07/01 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
laravel实现查询最后执行的一条sql语句的方法
2019/10/09 PHP
JavaScript中的关键字&quot;VAR&quot;使用详解 分享
2013/07/31 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
JS 弹出层 定位至屏幕居中示例
2014/05/21 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
通过点击jqgrid表格弹出需要的表格数据
2015/12/02 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
深入理解jquery自定义动画animate()
2016/05/24 Javascript
JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)
2017/03/30 Javascript
AngularJS中的拦截器实例详解
2017/04/07 Javascript
关于angular js_$watch监控属性和对象详解
2017/04/24 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
JS验证码实现代码
2017/09/14 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
jQuery实现的页面详情展开收起功能示例
2018/06/11 jQuery
JavaScript基础之静态方法和实例方法分析
2018/12/26 Javascript
Python入门之三角函数全解【收藏】
2017/11/08 Python
Python使用functools实现注解同步方法
2018/02/06 Python
python实现三维拟合的方法
2018/12/29 Python
基于Numpy.convolve使用Python实现滑动平均滤波的思路详解
2019/05/16 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
干部行政关系介绍信
2014/01/17 职场文书
司机岗位职责范本
2015/04/10 职场文书
雷锋之歌观后感
2015/06/10 职场文书
党员反邪教心得体会
2016/01/15 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang