Einführung
Dieser Artikel konzentriert sich darauf, wie Sie HTML5 und CSS vollständig nutzen können, um Web-Apps reibungsloser laufen zu lassen.
Tipp 1: Webspeicher statt Cookies nutzen
Der größte Nachteil von Cookies besteht darin, dass alle regelkonformen Cookie-Daten in jeder HTTP-Anfrage übertragen werden. Dies erhöht die Antwortzeit der Anfrage, insbesondere bei XHR-Anfragen. In HTML5 ist es besser, sessionStorage und localStorage zu verwenden 🎜>
Diese alternative Methode kann Daten dauerhaft oder für die Sitzungszeit lokal speichern. Daher bevorzugen wir die Verwendung von Webspeicher und verwenden nur Cookies als Alternative
Tipp 2: Verwenden Sie CSS Transition anstelle von JavaScript-Animationen
// if localStorage is present, use that
if (('localStorage' in window) && window.localStorage !== null) {
// easy object property API
localStorage.wishlist = '["unicorn", "Narwhal", "deathbear"]';
} else {
// without sessionStorage we'll have to use a far-future cookie
// with document.cookie's awkward API
var date = new Date();
date.setTime(date.getTime() + (365 * 24 * 60 * 60 * 1000));
var expires = date.toGMTString();
var cookiestr = 'wishlist=["unicorn", "Narwhal", "deathbear"];' +
' expires=' + expires + '; path=/';
document.cookie = cookiestr;
}Nach dem Login kopieren
Der CSS-Übergang kann zu höherer Leistung, weniger Code und einfacherer Wartung und einfacherem Verständnis führen.
Tipp 3: Client-Datenbank statt Server-Anfrage verwenden
Web SQL Database und IndexedDB bieten Browsern Datenbankspeicherfunktionen, die auf Clientdatenbanken migriert werden können, um die Anzahl der Serveranfragen zu reduzieren
LocalStorage und SessionStorage sind bei der einfachen Datenspeicherung schneller als Client-Datenbanken und können zum Implementieren einiger einfacher Zustände und zum Speichern des Fortschritts verwendet werden
Wenn eine Komponente Hunderte von Daten (z. B. eine Freundesliste) verwalten und Benutzersuche, Filterung und Sortierung unterstützen muss, kann das Speichern einer Kopie der Daten in der Client-Datenbank die Anzahl der HTTP-Anfragen effektiv reduzieren Ausführliche Anleitung finden Sie im Tutorial zur Web-SQL-Datenbank.
Tipp 4: Verwenden Sie die native JavaScript-API
Mit der Beliebtheit höherer Versionen von JavaScript wurden viele neue APIs hinzugefügt, wie z. B. Array-Prototypen, die in den meisten Browsern direkt verwendet werden können. Zum Beispiel:
Normalerweise sind diese nativen Methoden schneller als das manuelle Schreiben von Schleifen:
Die Verwendung von nativem JSON.parse() ist effizienter und sicherer als json2.js.
// give me a new array of all values multiplied by 10
[5, 6, 7, 8, 900].map(function (value) {
return value * 10;
});
// [50, 60, 70, 80, 9000]
// create links to specs and drop them into #links.
var linksList = document.querySelector('#links');
var links = [];
['html5', 'css3', 'webgl'].forEach(function (value) {
links.push(value.link('http://google.com/search?btnI=1&q=' + value + ' spec'));
});
linksList.innerHTML = links.join('');
// return a new array of all mathematical constants under 2
[3.14, 2.718, 1.618].filter(function (number) {
return number < 2;
});
// you can also use these extras on other collections link nodeLists
[].forEach.call(document.querySelectorAll('section[data-bucket]'),
function (elem, i) {
localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});Nach dem Login kopieren
Die native String.prototype.trim ist ebenfalls ein gutes Beispiel. Diese Funktionen sind nicht in HTML5 enthalten und sollten häufig verwendet werden
Tipp 5: Cache-Manifest nicht nur für Offline-Apps verwenden, sondern auch für Online-Websites
for (var i = 0, len = arr.length; i < len; ++i) {
}Nach dem Login kopieren
Websites wie Backend-Verwaltungssysteme können die Leistung durch die Verwendung von Cache erheblich verbessern.
Das Cache-Manifest hat gegenüber der Einstellung „Abläufe“ einige Vorteile: Es deklariert eindeutig die Dateien, die zwischengespeichert werden müssen, der Browser kann sie optimieren und sie wurden möglicherweise lokal heruntergeladen, bevor Sie sie verwenden
Die Grundstruktur der Seite kann als Vorlage betrachtet werden. Die vorlagenfähige HTML-Struktur wird über „cache.manifest“ zwischengespeichert und der Inhalt wird nach dem Abrufen der JSON-Daten vom Server aktualisiert 🎜>
Ausführliche Anweisungen finden Sie im Anwendungs-Cache-Tutorial.
Tipp 6: Aktivieren Sie die Hardwarebeschleunigung, um das visuelle Erlebnis zu verbessern
Einige Browser nutzen möglicherweise die GPU-Beschleunigung, um Hochgeschwindigkeitsanimationen flüssiger zu machen. Firefox Minefield, IE9 und Safari haben auch eine 3D-Transformationsbeschleunigung für die Windows-Plattform hinzugefügt . Je besser.
Wenn die Hardwarebeschleunigung unterstützt und aktiviert ist, werden Animation, Drehung, Skalierung und Deckkraft definitiv flüssiger. Alle tatsächlichen Vorgänge werden auf der GPU ausgeführt, ohne dass der Inhalt neu gezeichnet werden muss Geschwindigkeit.
Tipp 7: Verwenden Sie Web Worker, um Vorgänge auszuführen, die viele CPU-Ressourcen erfordern
Web-Worker haben zwei Vorteile: 1) Schnell 2) Blockiert die Browser-Reaktion nicht. Klicken Sie auf die Web-Worker-Folie, um weitere Informationen anzuzeigen.
Einige mögliche Einsatzszenarien von Web Workern:
Langtextformatierung
Tipp 9: Verwenden Sie CSS3, um die Verwendung von Bildern zu reduzieren
Durch das Reduzieren von Bildern können HTTP-Anfragen reduziert, die Seitengröße reduziert und die Wartung vereinfacht werden:
lineare und radiale Verläufe
Randradius
box-shadow
rgba
transformieren
CSS-Maske
-
Zu den gängigen Anwendungsszenarien gehören: Polierte Schaltflächen über Farbverläufe, Nachbildung vieler anderer Effekte
Tipp 10: Verwenden Sie WebSocket anstelle von XHR, um eine schnellere Interaktion und weniger Bandbreite zu ermöglichen
WebSockets wurde für Comet entwickelt. Die Verwendung zur Implementierung von Comet bringt mehr Vorteile als XHR.
Ursprünglicher Link: http://www.html5rocks.com/en/tutorials/speed/quick/
Das obige ist der detaillierte Inhalt vonBest Practices für HTML5, um Web-Apps schneller zu machen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
