在网页开发中，确保CSS样式的有效性和利用率是优化前端性能的重要步骤。本文将介绍如何通过简单的20行JavaScript代码创建一个CSS覆盖率测试脚本来帮助开发者了解页面中哪些CSS规则被实际使用，哪些可能未被利用，从而进行有效的代码清理和优化。
我们要明白`document.styleSheets`对象在JavaScript中的作用。它是一个包含当前页面中所有样式表（包括内联<style>标签和外部链接的CSS文件）的集合。通过这个对象，我们可以遍历所有的CSS规则。对于每个规则，我们可以访问其`selectorText`属性来获取选择器的文本内容，即CSS选择器的匹配规则。
接下来，我们利用`document.querySelectorAll`方法，传入选择器文本，来查找页面中匹配该选择器的元素。该方法返回一个NodeList，包含了所有匹配的元素。我们关注的是匹配元素的数量，因为它反映了CSS规则在实际页面中的使用频率。为了计算覆盖率，我们需要统计每个选择器匹配的元素数量，并将这些数据存储在一个数组中。
以下是一个简单的实现，展示如何编写这个20行的CSS覆盖率测试脚本：
```javascript
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);
}
```
在浏览器的开发者工具（如Chrome或Firefox的F12工具）的控制台中运行这段代码，会显示出每条CSS规则及其在页面上匹配的元素数量。这样，你可以清晰地看到哪些规则被广泛使用，哪些可能被忽视，从而对CSS进行有针对性的优化。
然而，需要注意的是，由于同源策略的限制，这段代码只能获取当前页面中<style>标签内的CSS规则信息，而无法访问外部CSS文件中的规则。对于不支持`styleSheets`属性的旧版IE浏览器，可以尝试使用expression或behavior.htc作为替代方案，但这可能涉及更多的兼容性问题。
这个简单的CSS覆盖率测试脚本提供了一种快速评估和优化前端代码的方法。通过定期运行这样的测试，开发者可以保持代码整洁，提高页面加载速度，并减少不必要的资源消耗。在实际项目中，还可以进一步扩展这个脚本，例如添加输出到文件或整合到自动化测试流程的功能，以实现更全面的代码覆盖率分析。
