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 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
javascript 多浏览器 事件大全
Mar 23 Javascript
jQuery 阴影插件代码分享
Jan 09 Javascript
jQuery中:visible选择器用法实例
Dec 30 Javascript
jQuery选择器源码解读(八):addCombinator函数
Mar 31 Javascript
JS中完美兼容各大浏览器的scrolltop方法
Apr 17 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
Aug 25 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
Apr 21 jQuery
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 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
MOTOROLA 摩托罗拉 MODEL 66-XI五灯中波收音机
2021/03/02 无线电
PHP框架Laravel中使用UUID实现数据分表操作示例
2018/05/30 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
jquery中对表单的基本操作代码
2010/07/29 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
2015/04/03 Javascript
jquery append 动态添加的元素事件on 不起作用的解决方案
2015/07/30 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
node.js Promise对象的使用方法实例分析
2019/12/26 Javascript
[01:03:27]NAVI vs EG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:11:21]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第三场 3月7日
2021/03/11 DOTA
python模块之StringIO使用示例
2015/04/08 Python
在Python的Flask框架中验证注册用户的Email的方法
2015/09/02 Python
Python实现删除文件中含“指定内容”的行示例
2017/06/09 Python
Python探索之自定义实现线程池
2017/10/27 Python
python 实现判断ip连通性的方法总结
2018/04/22 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
详解python--模拟轮盘抽奖游戏
2019/04/12 Python
django中使用POST方法获取POST数据
2019/08/20 Python
HTML5画渐变背景图片并自动下载实现步骤
2013/11/18 HTML / CSS
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
trivago美国:全球最大的酒店价格比较网站
2018/01/18 全球购物
法国在线宠物店:zooplus.fr
2018/02/23 全球购物
怎样创建、运行java程序
2014/08/01 面试题
北京-环亚运商测试题.net程序员初步测试题
2013/05/28 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
受伤赔偿协议书
2014/09/24 职场文书
React Native项目框架搭建的一些心得体会
2021/05/28 Javascript
Python利用zhdate模块实现农历日期处理
2022/03/31 Python
TV动画《八十龟酱观察日记》第四季宣传PV公布
2022/04/06 日漫
create-react-app开发常用配置教程
2022/06/25 Javascript