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的逻辑运算符 ||
May 31 Javascript
web开发人员学习jQuery的6大理由及jQuery的优势介绍
Jan 03 Javascript
jquery ready(fn)事件使用介绍
Aug 21 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
socket.io学习教程之基本应用(二)
Apr 29 Javascript
基于JavaScript实现无限加载瀑布流
Jul 21 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
用React-Native+Mobx做一个迷你水果商城APP(附源码)
Dec 25 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
通过JS判断网页是否为手机打开
Oct 28 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
上海永华YH-R296(华普R-96)12波段立体声收音机的分析和打理
2021/03/02 无线电
Php 构造函数construct的前下划线是双的_
2009/12/08 PHP
WIFI万能钥匙密码查询接口实例
2015/09/28 PHP
不要在cookie中使用特殊字符的原因分析
2010/07/13 Javascript
Extjs TimeField 显示正常时间格式的代码
2011/06/28 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
浅谈JavaScript function函数种类
2014/12/29 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
javascript实现在指定元素中垂直水平居中
2015/09/13 Javascript
深入浅析javascript立即执行函数
2015/10/23 Javascript
省市联动效果的简单实现代码(推荐)
2016/06/06 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
angular.js+node.js实现下载图片处理详解
2017/03/31 Javascript
详解nodejs 配置文件处理方案
2019/01/02 NodeJs
JSON.stringify()方法讲解
2019/01/31 Javascript
移动端(微信等使用vConsole调试console的方法
2019/03/05 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
python进阶教程之函数对象(函数也是对象)
2014/08/30 Python
Python爬虫:通过关键字爬取百度图片
2017/02/17 Python
解决python3在anaconda下安装caffe失败的问题
2017/06/15 Python
python3 读写文件换行符的方法
2018/04/09 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
python搜索包的路径的实现方法
2019/07/19 Python
python 二维矩阵转三维矩阵示例
2019/11/30 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
html5 svg 中元素点击事件添加方法
2013/01/16 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
S’well Bottle保温杯官网:绝缘不锈钢水瓶
2018/05/09 全球购物
EJB timer的种类
2014/10/28 面试题
新闻专业本科生的自我评价分享
2013/11/20 职场文书
《金色的脚印》教后反思
2014/04/23 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
升学宴答谢词
2015/01/05 职场文书
golang 生成对应的数据表struct定义操作
2021/04/28 Golang