Fähigkeiten zur Seiten-Refaktorierung – Javascript, CSS
Über JS, CSSCSS:
JS:
1. Warum ist das Stylesheet oben angeheftet?Der Browser rendert die Seite von oben nach unten. Wenn <link> oder <style> in <body> gefunden werden, wird das Rendern der Seite blockiert und die Seite kann auch neu gezeichnet werden . Es ist wie in einem Rastershop, in dem alles in der richtigen Reihenfolge angeordnet ist, aber der Chef sagt, dass dieses Ding so oder so angeordnet werden muss, also muss es eins nach dem anderen neu angeordnet werden. Zusätzlich wird es dem <head> hinzugefügt, damit die benötigten Styles nacheinander geladen werden können. 2. Vermeiden Sie CSS-Ausdrücke. Warum?Viele Leute, mich eingeschlossen, sagen, wenn sie etwas über CSS-Ausdrücke lernen, man solle sie vermeiden oder nicht verwenden, also sind wir zu faul und lesen sie nicht, einschließlich eval in JS … Später habe ich es zufällig einmal in einem Projekt verwendet und das Ergebnis war. . . Es war der letzte gefundene Fehler. . . (IE6 beeinflusst den Seitenstil) Tatsächlich besteht der Hauptnachteil von CSS-Ausdrücken darin, dass sie die Leistung beeinträchtigen. Sie sollten wissen, dass CSS zeitkritisch ist, d. h. wenn Sie den Stil ändern, wird dies sofort wirksam. Das Ändern der Fenstergröße, das Scrollen der Seite oder sogar das Bewegen der Maus löst eine häufige Auswertung des Ausdrucks aus, was schwerwiegende Auswirkungen haben kann. Versuchen Sie daher, dies zu vermeiden. 3. Externes JS und CSS verwenden. Warum?Wir alle wissen, dass die Verwendung externer Dateien die Anzahl der HTTP-Anfragen erhöht, aber durch das Caching wird die Antwortgeschwindigkeit der Seite erheblich verbessert, wenn Benutzer sie erneut besuchen oder auf anderen Seiten auf dieselben Dateien zugreifen. Ein weiterer Vorteil besteht darin, dass externe JSS und CSS die Dokumentgröße innerhalb der Seite reduzieren können. 4. Reduzieren Sie JS und CSS. Warum?Das versteht sich von selbst ... warum denken Sie das? 5. Verwenden Sie <link>, @import. Warum?Schauen wir uns zunächst den Unterschied zwischen den beiden an: Unterschied 1: Der Unterschied zwischen den Vorfahren. @import ist eine Methode, die vollständig von CSS bereitgestellt wird. Link ist ein XHTML-Tag. Neben dem Laden von CSS kann es auch andere Dinge wie RSS definieren. @import gehört zur Kategorie CSS und kann nur CSS laden. Unterschied 2: Unterschied in der Ladereihenfolge. Wenn der Link auf CSS verweist, wird er gleichzeitig mit der Seite geladen. Bei @import muss die Seite vor dem Laden vollständig geladen sein. Unterschied 3: Unterschied in der Kompatibilität. Link ist ein XHTML-Tag und hat keine Kompatibilitätsprobleme; @import wurde in CSS2.1 vorgeschlagen und wird von Browsern mit niedrigeren Versionen nicht unterstützt. Unterschied 4: Unterschied bei der Verwendung von DOM zur Steuerung von Stilen. Link unterstützt die Verwendung von Javascript zur DOM-Steuerung zum Ändern von Stilen, während @import dies nicht unterstützt. Im Vergleich zu den beiden ist @import offensichtlich schwächer … 6. Vermeiden Sie die Verwendung von Filtern. Warum? Die IE-spezifische Eigenschaft AlphaImageLoader wird verwendet, um den halbtransparenten Effekt von PNG-Bildern zu korrigieren, die in Versionen unter 7.0 angezeigt werden. Das Problem mit diesem Filter besteht darin, dass er die Darstellung des Inhalts stoppt und den Browser einfriert, während er das Bild lädt. Die Berechnung erfolgt einmal für jedes Element (nicht nur für Bilder), was den Speicherbedarf erhöht und somit vielschichtige Probleme mit sich bringt. 7. Das Skript steht ganz unten. Warum?Das Problem mit dem Skript besteht darin, dass der Browser, wenn er beim Rendern auf <script> stößt, zum Herunterladen und anschließenden Ausführen des darin enthaltenen JS übergeht. Während dieser Zeit wird die Seite blockiert und wartet, bis sie fertig ist, bevor sie mit der Ausführung fortfährt. Um dem Benutzer die Seite so schnell wie möglich zu präsentieren, sollte JS daher über </body> platziert werden. 8. Zugriff und Betrieb des DOM reduzieren. Warum?Besuchen Sie: In „High Performance JavaScript“ gibt es eine solche Metapher: „Stellen Sie sich DOM als eine Insel und JS als eine andere Insel vor, die durch eine Mautbrücke verbunden sind.“ Funktionsweise: Durch das Ändern und Zugreifen auf DOM-Elemente wird die Seite neu gezeichnet und neu formatiert, d. h. neu strukturiert. Das Problem liegt also auf der Hand. Lösung : Zwischenspeichern der besuchten Elemente Nachdem Sie die Knoten aktualisiert haben, fügen Sie sie sofort dem Dokumentbaum hinzu 9. Eventdelegation, warum?Durch Ereignisdelegierung wird das Ereignis mithilfe des Ereignis-Bubbling-Mechanismus an das übergeordnete Element des Elementobjekts gebunden. Beispiel: Eine mehrzeilige Tabelle mit einem Zeilenaufforderungseffekt, und die Tabelle ändert sich mit dem Seitenumbruch. Analyse: Angesichts des oben genannten Punkts 7 können wir die Leistung nicht beeinträchtigen, um Ereignisse für jedes geänderte Zeilenelement zu binden. Lösung: Binden Sie das Ereignis an das übergeordnete Element der Tabelle und führen Sie den Vorgang basierend auf dem Knotentyp von e.target (e.secElement) aus. |
<<: Detaillierter Prozess zum Erstellen von MongoDB und MySQL mit Docker-Compose
>>: HTML-Text in vertikalen Spalten anzeigen, um den Text in vertikalen Spalten anzuzeigen
Artikel empfehlen
Detaillierte Erläuterung der Bereitstellung von MySQL mit Docker (Datenpersistenz)
In diesem Artikel wird kurz beschrieben, wie Sie ...
So erstellen, speichern und laden Sie Docker-Images
Es gibt drei Möglichkeiten, ein Image zu erstelle...
MySQL verwendet frm-Dateien und ibd-Dateien, um Tabellendaten wiederherzustellen
Inhaltsverzeichnis Einführung in FRM-Dateien und ...
So fügen Sie Links zu FLASH in HTML ein und machen es mit allen gängigen Browsern kompatibel
Schauen Sie sich zuerst den Code an Code kopieren ...
Verwenden von jQuery zum Implementieren des Karusselleffekts
In diesem Artikel finden Sie den spezifischen Cod...
Docker-Tutorial: Container verwenden (einfaches Beispiel)
Wenn Sie mit Docker noch nicht vertraut sind, seh...
Detaillierte Erläuterung der MySQL-Datenbankisolationsebene und des MVCC
Inhaltsverzeichnis 1. Isolationsstufe LESEN SIE U...
Detaillierte Erklärung des gesamten Prozesses und der Schritte zur Installation von Clion auf Ubuntu16.04
Erklären Sie den gesamten Prozess von CLion von G...
Beispiel für den Aufbau eines Jenkins-Dienstes mit Docker
Ziehen Sie das Bild root@EricZhou-MateBookProX: D...
Detaillierte Erklärung der Verwendung und Unterschiede von MySQL-Ansichten und -Indizes
MySQL-Ansichten Einfach ausgedrückt ist eine MySQ...
So verwenden Sie Cron-Jobs, um PHP regelmäßig unter Cpanel auszuführen
Öffnen Sie das cPanel-Verwaltungs-Backend. Unter ...
Detaillierte Erklärung zum MySQL-Datenarchivierungstool mysql_archiver
Inhaltsverzeichnis I. Überblick 2. pt-archiver Ha...
Schritte zum Erstellen eines Dateiservers mit Apache unter Linux
1. Über den Dateiserver Wenn Sie in einem Projekt...
Grafisches Tutorial zur Installation von Ubuntu 18.04 auf einer virtuellen VMware 15-Maschine
In den letzten Jahren habe ich zwischen Automatis...
Detaillierte Erklärung der Verwendung der MySQL-Transaktionsverarbeitung und Beispielcode
Die MySQL-Transaktionsunterstützung ist nicht an ...