20行代码实现的一个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版本的才有些意义：）
相关推荐
-
20行代码实现的一个CSS覆盖率测试脚本
document.styleSheets里保存了当前页面上所有CSS规则的集合.通过它可以遍历出页面<style>里定义的所有selector,访问selectorText属性可得选择器的匹配规则.然后将规则规则传递给 document.querySelectorAll 即可获取页面内匹配此规则的元素列表.这里我们只求CSS规则的覆盖率,所以访问 querySelectorAll().length 即可.通过排序就可看出各个CSS使用情况.代码很简单. 复制代码 代码如下: var usage
-
只需20行代码就可以写出CSS覆盖率测试脚本
document.styleSheets里保存了当前页面上所有CSS规则的集合.通过它可以遍历出页面<style>里定义的所有selector,访问selectorText属性可得选择器的匹配规则.然后将规则规则传递给 document.querySelectorAll 即可获取页面内匹配此规则的元素列表. 这里我们只求CSS规则的覆盖率,所以访问 querySelectorAll().length 即可.通过排序就可看出各个CSS使用情况. 代码很简单. 复制代码 代码如下: var usa
-
不到20行代码用Python做一个智能聊天机器人
伴随着自然语言技术和机器学习技术的发展,越来越多的有意思的自然语言小项目呈现在大家的眼前,聊天机器人就是其中最典型的应用,今天小编就带领大家用不到20行代码,运用两种方式搭建属于自己的聊天机器人. 1.神器wxpy库 首先,小编先向大家介绍一下本次运用到的python库,本次项目主要运用到的库有wxpy和chatterbot. wxpy是在 itchat库 的基础上,通过大量接口优化,让模块变得简单易用,并进行了功能上的扩展.什么是接口优化呢,简单来说就是用户直接调用函数,并输入几个参数,就可以
-
JavaScript用20行代码实现虎年春节倒计时
春节将至,小梦相信大家跟小朦梦一样很激动呀.为了迎接虎年春节到来,小梦撸了一个虎年春节倒计时,仅20行代码用js就实现啦,是不是很简单呢?我们用这20行代码不仅能做个虎年春节倒计时,还能从中学到JS相关知识,一举两得!话不多说,接下来小伙伴们跟着小梦一起也动手试试吧! 虎年春节倒计时局部效果图 虎年春节倒计时全局效果图,灰常可爱的小老虎呀~ JS关键代码实现 window.onload=function starttime(){ // 2022年春节时间 time(h1,'2022/2/1');
-
PHP基于关联数组20行代码搞定约瑟夫问题示例
本文实例讲述了PHP基于关联数组20行代码搞定约瑟夫问题.分享给大家供大家参考,具体如下: 记得前段时间一写做java开发的兄弟对我说他java60行做了个约瑟夫问题,挺不错的.调侃php应该写这个挺不行的. 于是 呵呵... 洋洋洒洒 20行,写完自己都有些不相信了.哈哈 让不了解php的见识哈php的快捷轻便之处. ps:其实个人挺反感用代码行数来衡量代码数量的,感觉常把代码行数挂嘴边的大多无奈装2.此文仅属闲余娱乐. 回顾一下约瑟夫问题:N个人围成一圈,从第一个开始报数,第M个将被杀掉,最
-
python随机生成大小写字母数字混合密码(仅20行代码)
用简单的方法生成随机性较大的密码 仅用20行代码随机生成密码 核心思路:利用random模块 random模块随机生成数字,大小写字母,循环次数 while循环+随机生成的循环次数-->随机plus++ 大写字母ASKII码在65-90之间 小写字母Askll码在97-122之间 最终效果: x个大写字母+y个数字+z个小写字母(x,y,z均随机) 随机性相较于以往单调的 小写+数字+大写+小写+数字+大写- 循环有所提升 import random print(＂随机数生成") time
-
Python使用20行代码实现微信聊天机器人
近来,打开微信群发消息,就会秒收到一些活跃分子的回复,有的时候感觉对方回答很在理,但是有的时候发现对方的回答其实是驴唇不对马嘴,仔细深究发现,原来对方是机器人.今天,小编就带大家用20行代码,带你一起打造一个微信聊天机器人,让你的微信群一直嗨不停~~ 首先我们需要安装一个微信相关的第三方库,itchat,在Windows上通过命令:pip install itchat,就可以将其安装. 其二,我们需要去图灵机器人官网:http://www.tuling123.com,注册一下,即可获得一个机器人
-
20行代码教你用python给证件照换底色的方法示例
1.图片来源 该图片来源于百度图片,如果侵权,请联系我删除!图片仅用于知识交流. 2.读取图片并显示 imread():读取图片: imshow():展示图片: waitkey():设置窗口等待,如果不设置,窗口会一闪而过: import cv2 import numpy as np # 读取照片 img=cv2.imread('girl.jpg') # 显示图像 cv2.imshow('img',img) # 窗口等待的命令,0表示无限等待 cv2.waitKey(0) 效果如下: 3.图片缩
-
女神相册密码忘记了 我只用Python写了20行代码
视频地址 我用20行代码,帮女神破解相册密码 一.事情是这样的 今早上班,公司女神小姐姐说,她去年去三亚旅游的照片打不开了 好奇问了一下才知道. 原来是,她把照片压缩了,而且还加了密码. 但是密码不记得了,只记得是一串6位数字. 话说照片压缩率也不高,而且还加密,难道是有什么可爱的小照片 但是作为一个正(ba)直(gua)的技术人员 我跟她说:"这事交给我,python写个脚本,帮你破解掉~~" 二.首先回顾一下女神的操作流程 对相册进行压缩的时候,添加了密码. LIke This ↓
-
Python用20行代码实现完整邮件功能
目录 Python实现完整邮件 一.邮箱端设置 1.首先登录网页版126邮箱 2.打开 设置-POP3/SMTP/IMAP配置界面 3.新增一个授权码 二.python发送邮件 1.安装邮件模块 2.调用模块 3.设置邮件内容 4.添加附件 三.python读取邮件 Python实现完整邮件 先上效果: 一.邮箱端设置 首先,要对邮件进行一下设置,在邮箱端获取一个授权码. 1.首先登录网页版126邮箱 2.打开 设置-POP3/SMTP/IMAP配置界面 3.新增一个授权码 二.python发送