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

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

复制代码 代码如下:
var usage = [];
var sheets = documentstyleSheets;

for(var i = sheetslength ; i != ; i) {
var rules = sheets[i]rules;

for(var j = ruleslength ; j != ; j) {
var rule = rules[j];
var text = ruleselectorText;

usagepush({name: text count: documentquerySelectorAll(text)length});
}
}
usagesort(function(a b){return acount bcount});

for(var i = usagelength ; i != ; i) {
consolelog("选择器" + usage[i]name + "nt匹配数" + usage[i]count);
}

呼出F把代码粘到console里回车即可

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

顺便贴个测试结果

哪些CSS没用到一目了然

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

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