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版本的才有些意義）

From:http://tw.wingwit.com/Article/program/Java/JSP/201311/20423.html