Best Practices für HTML5, um Web-Apps schneller zu machen

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;
}

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');
});

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) {
}

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

• Syntaxhervorhebung

• 
  

• Bildbearbeitung

• 
  

• Bildsynthese

• 
  

• Große Array-Verarbeitung

• Tipp 8: HTML5-Formularattribute und Eingabetypen
  

  HTML5 fügt eine Reihe von Eingabetypen hinzu, darunter Suche, Telefonnummer, URL, E-Mail, Datum/Uhrzeit, Datum, Monat, Woche, Uhrzeit, Zahl, Bereich, Farbe usw. Verwenden Sie native Funktionen in Browsern, die diese Funktionen unterstützen, und verwenden Sie JS-Plugins. als Ergänzung .
• Dinge wie Platzhalter, erforderlich und Muster können die Benutzerfreundlichkeit und Leistung der Seite erheblich verbessern.
  ​Klicken Sie auf die HTML5-Formularinformationen, um weitere Informationen anzuzeigen.

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!