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:
JavaScript
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
So setzen Sie das Root-Passwort von Mysql in Windows zurück, wenn Sie es vergessen haben
Meine Maschinenumgebung: Windows 2008 R2 MySQL 5....
Tutorial zum Erstellen eines FTP-Servers in Ubuntu 16.04
Ubuntu 16.04 baut FTP-Server FTP installieren FTP...
Zusammenfassung der für die Front-End-Entwicklung erforderlichen allgemeinen Toolfunktionen
1. Zeitformatierung und andere Methoden Es wird e...
So verwenden Sie gespeicherte Prozeduren in MySQL, um schnell 1 Million Datensätze zu generieren
Vorwort Um beim Testen die Fähigkeit des Projekts...
So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS
Eine beträchtliche Anzahl von Websites verwendet d...
Vue und React im Detail
Inhaltsverzeichnis 1. Panorama II. Hintergrund 1....
Detaillierte Erklärung der Befehle zum Anzeigen von Linux-Dateien
So zeigen Sie Linux-Dateien an Befehl zum Anzeige...
Zusammenfassung einiger Probleme, die bei der Integration von E-Charts mit vue.js aufgetreten sind
Vorwort Ich arbeite derzeit an der Datenanalysepl...
Kennen Sie die seltsamen Dinge in Javascript?
Unsere erfahrenen Vorgänger haben zahllose Codes ...
Super ausführliches Tutorial zur Implementierung der TabBar untere Navigationsleiste in Vue
Inhaltsverzeichnis Projekteinführung: Projektverz...
MySQL-Abfragedaten stündlich, geben Sie 0 ein, wenn keine Daten vorhanden sind
Nachfragehintergrund Als statistische Schnittstel...
So stellen Sie HTTPS kostenlos auf Tencent Cloud bereit
Als ich kürzlich ein WeChat-Applet schrieb, erfor...
Tudou.com Frontend-Übersicht
1. Arbeitsteilung und Prozess <br />Bei Tud...
Designreferenz Schönes und originelles Blog-Design
Alle unten aufgeführten Blogs sind originell und ...
So verwenden Sie den VIM-Editor unter Linux
Als leistungsstarker Editor mit umfangreichen Opt...