Wie man Modernizr verantwortungsbewusst benutzt

Verantwortungsbewusst verwenden Modernizr: Strategien zur Verbesserung der Website -Leistung

modernizr, eine JavaScript -Bibliothek, die erkennen kann, ob der Browser bestimmte Funktionen unterstützt. Um die Website jedoch zu verlangsamen, sollten Sie sie jedoch mit Vorsicht verwenden. In diesem Artikel wird untersucht, wie Modernizr verantwortungsbewusst und andere ähnliche Bibliotheken wie JQuery verwendet werden.

Warum sollten Sie darauf achten, wie Modernizr lädt?

Eine Schlüsselfrage: Sind Sie bereit, Sekunden zu warten, um auf die Webseite zuzugreifen? Wenn die Antwort nein ist, werden Ihre Besucher auch. Lange Ladezeiten wirken sich direkt auf die Benutzererfahrung aus und führen zum Verlust von Besuchern. Selbst wenn Sie coole Funktionen verfolgen, müssen Sie die Leistung der Website berücksichtigen.

Der Schlüssel ist, wie man lädt. Viele JavaScript -Dateien werden nach dem Laden der Seite ausgeführt, und das Einlegen in ist bedeutungslos und blockiert die Seitenwiedergabe. Große Skripte werden in

angegeben, und die Besucher müssen warten, bis das Skript geladen wird, bevor sie den Seiteninhalt sehen können.

modernizr wird verwendet, um moderne Merkmale wie CSS -Übergänge und -Transformationen zu erkennen. Mit Ausnahme von besonderen Umständen sind diese Eigenschaften nicht erforderlich, um Seiteninhalte anzuzeigen. Meistens kann Modernizr am Ende von anstelle von

geladen werden.

Optimierung ist nicht nur für eine einzelne Ressource

gilt

Wenn eine Webseite mit Modernizr langsam geladen wird, reicht es möglicherweise nicht aus, die Bibliothek verantwortungsbewusst zu laden, um das Leistungsproblem zu lösen. Ein verantwortungsbewusster Ansatz bedeutet jedes Mal, wenn Sie eine JavaScript -Datei oder andere große Ressourcen einfügen, sorgfältig. Die Optimierung einer einzelnen Ressource ist möglicherweise nicht offensichtlich, aber die Optimierung aller Ressourcen kann die Leistung erheblich verbessern.

Klären Sie die Bedürfnisse

Stellen Sie sicher, dass Sie die Anforderungen klären, bevor Sie Modernizr verwenden. Modernizr bietet viele Tests, aber nicht alle Tests sind für Ihr Projekt nützlich. Die offizielle Website von Modernizr bietet benutzerdefinierte Build -Tools. Sie können nur die erforderlichen Tests auswählen, um kleinere benutzerdefinierte Versionen zu generieren und so die Download -Zeit zu verkürzen.

Es wird empfohlen, die Vollversion von Modernizr während der Projektentwicklungsphase zu verwenden und eine benutzerdefinierte Version zu regenerieren, wenn sie veröffentlicht wird. Ein besserer Ansatz ist die Verwendung von Automatisierungswerkzeugen wie Grunzen-Moderziz, die Ihre CSS- und JavaScript-Dateien scannt, alle verwendeten Funktionen herausfindet und entsprechende maßgeschneiderte Modernizr-Builds generiert.

Nicht alle Tests sind erforderlich

text-shadow kann Modernizr beispielsweise testen, ob der Browser das Attribut text-shadow CSS unterstützt. Wenn nicht unterstützt, wird diese Eigenschaft ignoriert und veranlasst die Website nicht zum Absturz. Es ist möglicherweise nicht erforderlich, dass der Test für Ihre Website für Ihre Website von entscheidender Bedeutung ist (z. B. zur Verbesserung der Textlesbarkeit).

Für Situationen, in denen ein Fallback -Schema benötigt wird, müssen Sie es noch testen, aber nicht alle Fallback -Schemata erfordern Modernizr. Einige CSS -Fallback -Schemata erfordern sich nicht selbst.

html5shiv Wird verwendet, um HTML5 -Elemente in älteren Versionen von Internet Explorer zu unterstützen. Modernizr kann es einbeziehen, aber Sie brauchen es nicht, wenn Sie nicht mit älteren IE kompatibel sind. Es wird empfohlen, html5shiv zu verwenden, aber es muss nicht über Modernizr geladen werden.

Einige Funktionen können das Laden

verzögern

Die meisten Modernizr -Funktionen können das Laden zum Ende der Seite verzögert werden. Dies hindert die Benutzer nicht daran, den Seiteninhalt zu sehen, sondern zuerst den grundlegenden Inhalt anzeigt und dann die erweiterte Erfahrung lädt.

bestimmte Merkmale, wie html5shiv, müssen jedoch in geladen werden, bevor HTML5 -Elemente rendern. Sie können jedoch optimieren, wie es durch bedingte Kommentare oder Inline -Skripte lädt, um HTTP -Anforderungen zu reduzieren.

entscheiden, ob Modernizr in von Ihrer Seitenstruktur und -funktionalität abhängt. Wenn sich die Testergebnisse nicht auf das Seitenlayout auswirken, können Sie das Laden verzögern.

Effizienzüberlegung

Während Paul Irish Modernizr am Ende der Seite verbessern kann .

Es hängt von der Komplexität Ihres Dom -Baumes ab. Bei einfacheren DOM -Bäumen ist die Testausführung schneller. Es wird empfohlen, Tests durchzuführen, um die Ausführungszeit unter verschiedenen Browsern und Versionen zu bewerten. Benutzerdefinierte Builds können unnötige Tests reduzieren und die Effizienz weiter verbessern.

Zusammenfassung

In diesem Artikel wird untersucht, wie Modernizr verantwortungsbewusst und den richtigen Ladungsort in verschiedenen Situationen ausgewählt wird. Unabhängig davon, für welche Methode Sie auswählen, sollten unnötige Ressourcen -Downloads minimiert werden, um den Benutzern eine gute Erfahrung zu bieten, insbesondere wenn die Netzwerkverbindung langsam ist. Dieser verantwortungsvolle Entwicklungsansatz gilt nicht nur für Modernizr, sondern auch für andere Bibliotheken wie JQuery. Das Vermeiden von nutzlosen Daten zu vermeiden, ist ein Prinzip, dem jeder Entwickler folgen sollte.

Das obige ist der detaillierte Inhalt vonWie man Modernizr verantwortungsbewusst benutzt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!