Code zur Implementierung des CSS-Abdeckungstestskripts

In diesem Artikel wird hauptsächlich der Code für die Implementierung von CSS-Abdeckungstestskripten vorgestellt. Jetzt kann ich ihn mit Ihnen teilen.

Hier fragen wir nur nach CSS-Regeln. Abdeckung, also greifen Sie einfach auf querySelectorAll().length zu. Durch Sortieren können Sie die Verwendung jedes CSS sehen.

document.styleSheets speichert eine Sammlung aller CSS-Regeln auf der aktuellen Seite. Dadurch können Sie alle in der Seite definierten Selektoren durchlaufen und auf das Attribut selectorText zugreifen, um die passenden Regeln des Selektors abzurufen. Übergeben Sie dann die Regel an document.querySelectorAll, um eine Liste der Elemente auf der Seite zu erhalten, die dieser Regel entsprechen. Hier geht es nur um die Abdeckung von CSS-Regeln, also greifen Sie einfach auf querySelectorAll().length zu. Durch Sortieren können Sie die Verwendung jedes CSS sehen. Der Code ist sehr einfach.

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); } Nach dem Login kopieren Rufen Sie F12 auf, fügen Sie den Code in die Konsole ein und drücken Sie die Eingabetaste.

Natürlich kann aufgrund von Berechtigungsproblemen ohnehin nicht auf extern importiertes CSS zugegriffen werden, daher werden wir dies vorerst nicht berücksichtigen. Was einen defekten IE betrifft, der StyleSheets nicht unterstützt, können Sie die Verwendung von expression oder behavior.htc in Betracht ziehen und es an einem anderen Tag versuchen. Das ist alles für die reine JS-Implementierung. Zukünftig werden wir mit lokalen Programmen zusammenarbeiten, um die Analyse externer CSS zu realisieren.

Posten Sie übrigens die Testergebnisse:

Es ist klar, welches CSS nicht verwendet wird:

Natürlich bedeuten 0 Treffer nicht, dass es nutzlos ist. Das typischste Beispiel ist:hover, das nur dann zutrifft, wenn die Maus nach oben bewegt wird. Es gibt auch Kontrollen über className, [attr=], #dynamic ID und dynamische Elemente. . . . Die Stile usw. sind nicht leicht zu kombinieren.

Der obige Code macht also nicht viel Sinn, und derzeit verfügen Mainstream-Browser über eine integrierte Profilfunktion und können die Anzahl der vom Selektor übereinstimmenden Elemente in Echtzeit verfolgen, sodass es sinnvoll ist, eine IE-Version zu erstellen :)

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So schreiben Sie JS und CSS in dieselbe Datei

Über CSS-Programmierung Einführung in OOCSS und SMACSS-Entwurfsmuster

PHP8, ich komme auch

Lernen Sie das Website-Layout in 30 Minuten

Shangguan Oracle Video-Tutorial für Anfänger bis Fortgeschrittene

Ihre erste Zeile UNI-APP-Code

Flattern Sie von Grund auf bis zum App-Start

Brother Lian Neues Linux-Video-Tutorial

AXURE 9 Video-Tutorial (geeignet für die interaktive Produktdesign-Benutzeroberfläche von Product Manager)

Zero Basic Proficiency PS-Video-Tutorial

16-tägiges UI-Video-Tutorial für den Einstieg

PS-Techniken und Slicing-Techniken-Video-Tutorial

Video-Tutorial zum Bau und zur Projekteinführung der Alibaba Cloud-Umgebung

Überblick über Computernetzwerke – Grundkenntnisse, die Programmierer beherrschen müssen

Grundlegendes Tutorial für Programmierer – Erklärung des HTTP-Protokolls

Websocket-Video-Tutorial

Code zur Implementierung des CSS-Abdeckungstestskripts