Es gibt mittlerweile viele JavaScript-Codes in Webanwendungen und wir sind immer auf der Suche nach verschiedenen Lösungen, um sie schneller zu machen.
1. Wir nutzen die Ereignisdelegation, um die Ereignisüberwachung effizienter zu gestalten,
2. Wir verwenden die Technologie zur Funktionsentprellung , um die Anzahl der Aufrufe einer bestimmten Methode innerhalb eines Zeitraums zu begrenzen. Weitere Informationen finden Sie unter: So verhindern Sie das Hochfrequenzauslösen von Ereignisfunktionen (chinesische Übersetzung). )
3. Wir verwenden den JavaScript Loader, um die Ressourcen zu laden, die wir wirklich benötigen usw.
Es gibt eine andere Möglichkeit, unsere Seiten schneller und effizienter zu machen: Bestimmte Stile im Stylesheet direkt über JS hinzuzufügen und zu löschen, anstatt ständig DOM-Elemente abzufragen und verschiedene Stile anzuwenden. So funktioniert es.
Stylesheet abrufen
Sie können ein beliebiges Stylesheet auswählen, um Stilregeln hinzuzufügen. Wenn Sie über ein bestimmtes Stylesheet verfügen, können Sie das ID-Attribut zum -Tag in der HTML-Seite hinzufügen und dann das CSSStyleSheet-Objekt direkt über das Sheet-Attribut des DOM-Elements abrufen. Stylesheets können auch über document.styleSheets durchlaufen werden:
/*
Der Rückgabewert ähnelt dem folgenden:
StyleSheetList
{
0: CSSStyleSheet,
1: CSSStyleSheet,
2: CSSStyleSheet,
3: CSSStyleSheet,
4: CSSStyleSheet,
Länge: 5,
Artikel: Funktion
}
*/
// Holen Sie sich das erste Blatt, unabhängig vom Medienattribut
var sheet = document.styleSheets[0];
Besonderes Augenmerk muss auf das Medienattribut des Stylesheets gelegt werden – wenn Sie es auf dem Bildschirm anzeigen möchten, können Sie dem Druck-Stylesheet sicherlich keine CSS-Regeln hinzufügen. Sie können sich die Eigenschaftsinformationen des CSSStyleSheet-Objekts genauer ansehen:
/*
Rückgabewert:
CSSStyleSheet
cssRules: CSSRuleList[Object]
Deaktiviert: falsch
href: „http://davidwalsh.name/somesheet.css“
Medien: MediaList[object]
ownerNode: link[object]
Eigentümerregel: null
parentStyleSheet: null
Regeln: CSSRuleList[Object]
Titel: null
Geben Sie ein: „text/css“
*/
//Medientyp abrufen
console.log(document.styleSheets[0].media.mediaText)
/*
Der Rückgabewert kann sein:
„all“ oder „print“ oder andere Medien
werden auf dieses Stylesheet angewendet
*/
In jedem Fall haben Sie auf jeden Fall eine Möglichkeit, das Stylesheet zu erhalten, zu dem Sie die Regeln hinzufügen möchten.
Erstellen Sie ein neues Stylesheet
In vielen Fällen besteht der beste Ansatz möglicherweise darin, ein neues
