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

 更新时间:2013年07月07日 23:31:14   作者:   我要评论
这里我们只求CSS规则的覆盖率,所以访问 querySelectorAll().length 即可。通过排序就可看出各个CSS使用情况

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的分析。

顺便贴个测试结果:

哪些CSS没用到一目了然:

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

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

相关文章

  • ajax请求乱码的解决方法(中文乱码)

    ajax请求乱码的解决方法(中文乱码)

    这篇文章主要介绍了ajax请求乱码的解决方法(中文乱码),需要的朋友可以参考下
    2014-04-04
  • 服务器端的JavaScript脚本 Node.js 使用入门

    服务器端的JavaScript脚本 Node.js 使用入门

    触爪伸向传说中的Server-Side Javascrpt。后端JS最出名无疑是Ryan Dahl的node.js,另一个是aptana IDE提供商搞出的jaxer,这里讨论node.js的使用
    2012-03-03
  • 微信小程序实现表单校验功能

    微信小程序实现表单校验功能

    微信小程序最难实现的公共业务是什么?应该是表单校验,这篇文章主要介绍了微信小程序如何实现表单校验功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Node调试工具JSHint的安装及配置教程

    Node调试工具JSHint的安装及配置教程

    Node的优势我就不再乱吹捧了,它让javascript统一web的前后台成为了可能。但是对于新手来说,server端的JS代码可能不像client端的代码那么好调试,直观。client端JS代码的调试基本上经历了一个从“肉眼--alert()--firebug(或者其它的developer tools)”的一个过程。而对于server端的调试,可能新手仍然停留在使用“肉眼--console()”的阶段。其实,Node经过了这么多年(虽然才短短几年)的发展,也有了很多不错的第三方的调试工具。包括Node内建的调试工具debugger、node-inspector等。
    2014-05-05
  • 改版了网上的一个js操作userdata

    改版了网上的一个js操作userdata

    改版了网上的一个js操作userdata,并根据其它网友的文章结合了下。希望对需要的朋友有所帮助。
    2007-04-04
  • js动态添加事件并可传参数示例代码

    js动态添加事件并可传参数示例代码

    js动态添加事件可以搜索到很多的相关文章,不过可以传参数的就没有几个了,下面有个不错的示例可以满足大家对传参的需求,感兴趣的各位不要错过
    2013-10-10
  • firefox下获取下列框选中option的text的代码

    firefox下获取下列框选中option的text的代码

    Firefox下面没有innerText,所以我们想在firefox下获取下列框选中option的text(注意不是value)时会比较吃力。笔者结合自己在项目中的解决方案和代码总结一下,请大家指教。
    2010-06-06
  • 如何让div span等元素能响应键盘事件操作指南

    如何让div span等元素能响应键盘事件操作指南

    在我这几天的工作中遇到了一个问题,我有一个可编辑的div,并且在DIV里面还有一个可编辑的span,我想要让span能响应键盘事,想实现这种效果,应该如何实践呢
    2012-11-11
  • 全面接触神奇的Bootstrap导航条实战篇

    全面接触神奇的Bootstrap导航条实战篇

    导航条(navbar)在Bootstrap中是一个独立组件,导航条(navbar)和导航(nav)在Bootstrap中是有明显区别的,本文全面接触神奇的Bootstrap导航条,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 才发现的超链接js导致网页中GIF动画停止的解决方法

    才发现的超链接js导致网页中GIF动画停止的解决方法

    才发现的超链接js导致网页中GIF动画停止的解决方法...
    2007-11-11

最新评论