Optimierung von JavaScript und CSS zur Verbesserung der Website-Leistung

Optimierung von JavaScript und CSS zur Verbesserung der Website-Leistung
<br /> Im ersten und zweiten Teil haben wir mehrere Regeln zur Verbesserung der Website-Leistung, des Seiteninhalts und des Servers vorgestellt. Darüber hinaus werden auf unseren Seiten häufig JavaScript und CSS verwendet. Ihre Optimierung ist ebenfalls ein wichtiger Aspekt zur Verbesserung der Website-Leistung:
CSS:
    Platzieren Sie das Stylesheet an oberster Stelle. Vermeiden Sie die Verwendung von CSS-Ausdrücken. Verwenden Sie externes JavaScript und CSS. Reduzieren Sie JavaScript und CSS. Verwenden Sie <link> statt @import. Vermeiden Sie die Verwendung von Filtern.

JavaScript
    Platzieren Sie Skripte am unteren Seitenrand. Verwenden Sie externes JavaScript und CSS. Reduzieren Sie JavaScript und CSS. Entfernen Sie doppelte Skripte. Reduzieren Sie den DOM-Zugriff. Entwickeln Sie intelligente Event-Handler.
17. Platzieren Sie das Stylesheet oben. Bei der Untersuchung der Leistung von Yahoo! stellten wir fest, dass das Platzieren des Stylesheets im <head /> des Dokuments die Seitendownloads zu beschleunigen schien. Dies liegt daran, dass das Einfügen des Stylesheets in den <head /> dazu führt, dass die Seite schrittweise geladen und angezeigt wird.
Leistungsorientierte Front-End-Server möchten oft, dass Seiten in einer geordneten Reihenfolge geladen werden. Gleichzeitig hoffen wir auch, dass der Browser die empfangenen Inhalte bestmöglich darstellt. Dies ist besonders wichtig für Seiten mit mehr Inhalt und für Benutzer mit langsameren Verbindungen. Die Rückgabe visueller Rückmeldungen an den Benutzer, beispielsweise in Form eines Fortschrittszeigers, wurde gut erforscht und dokumentiert. In unserer Forschung ist die HTML-Seite der Prozesszeiger. Wenn der Browser den Dateikopf, die Navigationsleiste, das obere Logo usw. ordnungsgemäß lädt, kann dies als visuelles Feedback für Benutzer dienen, die auf das Laden der Seite warten. Dies verbessert das Benutzererlebnis insgesamt. Klicken Sie hier, um den Inhalt des Tutorialkanals zur Webseitenerstellung anzuzeigen. Das Problem beim Platzieren des Stylesheets am Ende des Dokuments besteht darin, dass dies in vielen Browsern, einschließlich Internet Explorer, die ordnungsgemäße Darstellung des Inhalts verhindert. Der Browser unterbricht das Rendern, um ein Neuzeichnen der Seitenelemente aufgrund von Stiländerungen zu vermeiden. Der Benutzer wird mit einer leeren Seite konfrontiert.
In der HTML-Spezifikation wird eindeutig festgelegt, dass Stylesheets im Abschnitt <head /> der Seite platziert werden müssen: „Im Gegensatz zu <a /> kann <link /> nur im Abschnitt <head /> eines Dokuments erscheinen, obwohl es mehrfach verwendet werden kann.“ Es lohnt sich nicht, es auszuprobieren, unabhängig davon, ob dadurch ein weißer Bildschirm oder unformatierter Inhalt angezeigt wird. Die beste Lösung besteht darin, Ihr Stylesheet gemäß der HTML-Spezifikation im Dokument <head /> zu laden. CSS-Ausdrücke sind eine leistungsstarke (aber gefährliche) Möglichkeit, CSS-Eigenschaften dynamisch festzulegen. Internet Explorer unterstützt CSS-Ausdrücke seit Version 5. Im folgenden Beispiel können CSS-Ausdrücke verwendet werden, um die Hintergrundfarbe jede Stunde zu ändern: 18. Vermeiden Sie die Verwendung von CSS-Ausdrücken

Hintergrundfarbe: Ausdruck ((neues Datum ()).getHours ()%2? "#B8D4FF": "#F08A00");
Wie oben gezeigt wird im Ausdruck ein JavaScript-Ausdruck verwendet. CSS-Eigenschaften werden basierend auf den Ergebnissen der Auswertung eines JavaScript-Ausdrucks festgelegt. Da die Expression-Methode in anderen Browsern nicht funktioniert, ist es sinnvoller, sie in einem Cross-Browser-Design speziell für den Internet Explorer festzulegen.
Das Problem mit Ausdrücken ist, dass sie häufiger ausgewertet werden, als wir denken. Nicht nur beim Anzeigen und Zoomen der Seite, sondern auch beim Scrollen der Seite oder sogar bei Bewegungen der Maus muss eine Neuberechnung erfolgen. Durch Hinzufügen eines Zählers zu einem CSS-Ausdruck können Sie verfolgen, wie oft der Ausdruck ausgewertet wird. Allein durch Bewegen der Maus über die Seite können leicht über 10.000 Berechnungen erreicht werden.
Eine Möglichkeit, die Anzahl der Berechnungen von CSS-Ausdrücken zu reduzieren, besteht darin, einen einmaligen Ausdruck zu verwenden, der das Ergebnis bei der ersten Ausführung der angegebenen Stileigenschaft zuweist und diese Eigenschaft anstelle des CSS-Ausdrucks verwendet. Wenn Stileigenschaften während des Seitenlebenszyklus dynamisch geändert werden müssen, ist die Verwendung von Ereignishandlern anstelle von CSS-Ausdrücken ein praktikabler Ansatz. Wenn Sie CSS-Ausdrücke verwenden müssen, denken Sie daran, dass diese tausende Male ausgewertet werden und sich auf die Leistung Ihrer Seite auswirken können.
Vorherige Seite 1 2 3 Nächste Seite Mehr lesen

<<:  Fallstricke bei der neueren Version des IDEA2021 Tomcat10-Servlets

>>:  Eine kurze Einführung in MySQL InnoDB ReplicaSet

Artikel empfehlen

Erste Zusammenfassung des Website-Erstellungs-Tutorials für Anfänger

Nachdem ich diese sechs Artikel geschrieben hatte,...

Zusammenfassung der grundlegenden Verwendung des $-Symbols in Linux

Linux-Version: CentOS 7 [root@azfdbdfsdf230lqdg1b...

10 Tipps zur Website-Benutzerfreundlichkeit, die jeder kennen sollte

Lassen Sie uns keine weitere Zeit verschwenden un...

Analyse von Mysql-Datenmigrationsmethoden und -Tools

In diesem Artikel wird hauptsächlich die Analyse ...

Beispielcode zur Implementierung eines Laufschriftformats mit CSS3

Hintergrund Folgendes ist passiert: Luzhu erfuhr ...

JavaScript Canvas realisiert farbenfrohen Sonnenhalo-Effekt

In diesem Artikelbeispiel wird der spezifische Co...

Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten

1.MySQL UPDATE JOIN-Syntax In MySQL können Sie di...

So erstellen Sie ein neues Image basierend auf einem vorhandenen Image in Docker

Das Erstellen neuer Images aus vorhandenen Images...

Analyse des Konfigurationsprozesses der Nginx-HTTP-Integritätsprüfung

Passive Prüfung Mit passiven Integritätsprüfungen...

Analyse der zum Ausführen von Docker erforderlichen Berechtigungen

Zum Ausführen von Docker sind Root-Rechte erforde...

Vue realisiert den Prozentbalkeneffekt

In diesem Artikel wird der spezifische Code von V...