Diese Seite wurde von der Cloud Translation API übersetzt.

Best Practices für eine schnellere Web-App mit HTML5

Paul Irish

Einführung

Ein Großteil von HTML5 zielt darauf ab, nativen Browsersupport für Komponenten und Techniken bereitzustellen, die bisher über JavaScript-Bibliotheken erreicht wurden. Wenn diese Funktionen vorhanden sind, kann die Nutzung für Ihre Nutzer viel schneller erfolgen. In diesem Tutorial werde ich nicht auf die hervorragenden Leistungsstudien eingehen, die Sie auf der Website „Exceptional Performance“ von Yahoo oder in den Page Speed-Dokumenten und auf der Website Let's make the web faster von Google finden. Stattdessen konzentriere ich mich darauf, wie Sie Ihre Web-Apps mit HTML5 und CSS3 responsiver gestalten können.

Tipp 1: Webspeicher anstelle von Cookies verwenden

Cookies werden seit Jahren verwendet, um eindeutige Nutzerdaten zu erfassen. Sie haben jedoch erhebliche Nachteile. Der größte Nachteil ist, dass alle Ihre Cookie-Daten jedem HTTP-Anfrageheader hinzugefügt werden. Dies kann messbare Auswirkungen auf die Reaktionszeit haben, insbesondere bei XHRs. Daher ist es eine Best Practice, die Größe von Cookies zu reduzieren. In HTML5 können wir das noch besser machen: Wir verwenden sessionStorage und localStorage anstelle von Cookies.

Mit diesen beiden Webspeicherobjekten können Nutzerdaten für die Dauer der Sitzung oder unbegrenzt auf der Clientseite gespeichert werden. Ihre Daten werden auch nicht über jede HTTP-Anfrage an den Server übertragen. Sie haben eine API, die Sie froh machen wird, Cookies loszuwerden. Hier sind beide APIs zu sehen, bei denen Cookies als Fallback verwendet werden.

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

Tipp 2: CSS-Übergänge anstelle von JavaScript-Animationen verwenden

Mit CSS-Übergängen können Sie einen ansprechenden visuellen Übergang zwischen zwei Status erstellen. Die meisten Stileigenschaften können übergangsweise geändert werden, z. B. der Textschatten, die Position, der Hintergrund oder die Farbe. Sie können Übergänge in Pseudoauswahlstatus wie :hover oder von HTML5-Formularen, :invalid und :valid verwenden (Beispiel mit Formularvalidierungsstatus). Sie sind jedoch viel leistungsfähiger und können ausgelöst werden, wenn Sie einem Element eine beliebige Klasse hinzufügen.

div.box {
  left: 40px;
  -webkit-transition: all 0.3s ease-out;
     -moz-transition: all 0.3s ease-out;
       -o-transition: all 0.3s ease-out;
          transition: all 0.3s ease-out;
}
div.box.totheleft { left: 0px; }
div.box.totheright { left: 80px; }

Wenn Sie die Klassen von totheleft und totheright hinzufügen, können Sie das Feld verschieben. Vergleichen Sie diese Codemenge mit der einer JavaScript-Animationsbibliothek. Bei der Verwendung einer CSS-basierten Animation wird deutlich weniger an den Browser gesendet. Außerdem werden diese visuellen Übergänge durch die Beschleunigung auf GPU-Ebene so flüssig wie möglich.

Tipp 3: Clientseitige Datenbanken anstelle von Server-Roundtrips verwenden

Web SQL Database und IndexedDB führen Datenbanken auf der Clientseite ein. Anstatt Daten wie üblich über XMLHttpRequest oder das Einreichen eines Formulars auf dem Server zu veröffentlichen, können Sie diese clientseitigen Datenbanken nutzen. Die Reduzierung von HTTP-Anfragen ist ein Hauptziel aller Leistungsingenieure. Wenn Sie sie als Datenspeicher verwenden, können Sie viele XHR- oder Formularpost-Zugriffe auf den Server sparen. localStorage und sessionStorage können in einigen Fällen verwendet werden, z. B. um den Fortschritt der Formulareinreichung zu erfassen. Sie sind deutlich schneller als die clientseitigen Datenbank-APIs. Wenn Sie beispielsweise eine Datenrasterkomponente oder einen Posteingang mit Hunderten von Nachrichten haben, sparen Sie durch das lokale Speichern der Daten in einer Datenbank HTTP-Rückgaben, wenn der Nutzer suchen, filtern oder sortieren möchte. Eine Liste mit Freunden oder eine automatische Vervollständigung von Texteingaben kann bei jedem Tastenanschlag gefiltert werden, was die Nutzerfreundlichkeit erheblich verbessert.

Tipp 4: JavaScript-Verbesserungen bieten erhebliche Leistungsvorteile

In JavaScript 1.6 wurden dem Array-Prototyp viele zusätzliche Methoden hinzugefügt. Diese sind jetzt in den meisten Browsern verfügbar, mit Ausnahme von IE. Beispiel:

// 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.
['html5', 'css3', 'webgl'].forEach(function(value) {
  var linksList = document.querySelector('#links');
  var newLink = value.link('http://google.com/search?btnI=1&q=' + value + ' spec');
  linksList.innerHTML +=  newLink;
});


// Return a new array of all mathematical constants under 2.
[3.14, 2.718, 1.618].filter(function(number) {
  return number < 2;
});
// [1.618]


// You can also use these extras on other collections like nodeLists.
[].forEach.call(document.querySelectorAll('section[data-bucket]'), function(elem, i) {
  localStorage['bucket' + i] = elem.getAttribute('data-bucket');
});

In den meisten Fällen sind diese nativen Methoden deutlich schneller als eine typische For-Schleife wie for (var i = 0, len = arr.length; i < len; i++). Das native JSON-Parsen (über JSON.parse()) ersetzt die Datei „json2.js“, die wir schon seit einiger Zeit einbinden. Natives JSON ist viel schneller und sicherer als die Verwendung eines externen Scripts. Es ist bereits in IE8, Opera 10.50, Firefox 3.5, Safari 4.0.3 und Chrome verfügbar. Native String.trim ist ein weiteres gutes Beispiel dafür, dass es nicht nur schneller als die JS-Entsprechungen in Langform ist, sondern auch potenziell korrekter. Keine dieser JavaScript-Erweiterungen ist technisch gesehen HTML5, aber sie gehören zu den Technologien, die in letzter Zeit verfügbar geworden sind.

Tipp 5: Cache-Manifest nicht nur für Offline-Apps, sondern auch für Live-Websites verwenden

Vor zwei Jahren hat WordPress Google Gears verwendet, um die Funktion WordPress Turbo hinzuzufügen. Viele der im Admin-Bereich verwendeten Ressourcen wurden lokal im Cache gespeichert, um den Dateizugriff zu beschleunigen. Wir können dieses Verhalten mit dem applicationCache von HTML5 und der cache.manifest nachahmen. Der App-Cache hat einen kleinen Vorteil gegenüber dem Festlegen von Expires-Headern. Da Sie eine deklarative Datei mit den statischen Ressourcen erstellen, die im Cache gespeichert werden können, können Browser diese stark optimieren und sie möglicherweise sogar vor der Verwendung im Cache speichern. Betrachten Sie die grundlegende Struktur Ihrer Website als Vorlage. Sie haben Daten, die sich möglicherweise ändern, aber das umgebende HTML bleibt in der Regel ziemlich konsistent. Mit dem App-Cache können Sie Ihre HTML-Datei als Reihe von reinen Vorlagen behandeln, das Markup über das Manifest „cache.manifest“ im Cache speichern und dann JSON über die Verbindung senden, um den Inhalt zu aktualisieren. Dieses Modell ähnelt sehr dem einer nativen Nachrichten-App für iPhone oder Android.

Tipp 6: Hardwarebeschleunigung aktivieren, um die Bildqualität zu verbessern

In führenden Browsern können viele visuelle Vorgänge die Beschleunigung auf GPU-Ebene nutzen, was hochdynamische visuelle Vorgänge viel flüssiger machen kann. Die Hardwarebeschleunigung wurde für Firefox Minefield und IE9 angekündigt. Safari hat in Version 5 eine Beschleunigung auf Hardwareebene hinzugefügt. (In Mobile Safari war es schon viel früher verfügbar.) 3D-Transformierungen und Hardwarebeschleunigung wurden gerade erst in Chromium für Windows hinzugefügt. Die beiden anderen Plattformen folgen bald.

Die GPU-Beschleunigung wird nur unter relativ eingeschränkten Bedingungen aktiviert. 3D-Transformationen und animierte Deckkraft sind jedoch die häufigsten Auslöser. Eine etwas unkonventionelle, aber unauffällige Möglichkeit, ihn zu aktivieren:

.hwaccel {  -webkit-transform: translateZ(0); }

Es gibt jedoch keine Garantie. :) Wenn die Hardwarebeschleunigung unterstützt und aktiviert ist, werden animierte Verschiebungen, Drehungen, Skalierungen und Deckkraft mit GPU-Compositing definitiv flüssiger. Sie werden direkt auf der GPU verarbeitet und erfordern kein Neuzeichnen des Ebeneninhalts. Alle Properties, die sich auf das Layout der Seite auswirken, sind jedoch weiterhin relativ langsam.

Tipp 7: Für CPU-intensive Vorgänge eignen sich Webworker

Webworker haben zwei wesentliche Vorteile: 1) Sie sind schnell. 2) Während die Aufgaben ausgeführt werden, bleibt der Browser reaktionsschnell. Sehen Sie sich die HTML5-Foliensammlung für Arbeiter in Aktion an. Hier einige mögliche Anwendungsfälle für Webworker:

Textformatierung eines langen Dokuments
Syntaxhervorhebung
Bildverarbeitung
Bildsynthese
Große Arrays verarbeiten

Tipp 8: HTML5-Formularattribute und -Eingabetypen

HTML5 führt neue Eingabetypen ein. Die bisherigen text, password und file werden um search, tel, url, email, datetime, date, month, week, time, datetime-local, number, range und color ergänzt. Die Browserunterstützung für diese Funktionen variiert. Derzeit werden sie am besten von Opera unterstützt. Mit der Funktionserkennung können Sie feststellen, ob der Browser native Unterstützung bietet (und eine Benutzeroberfläche wie eine Datumsauswahl oder Farbauswahl anzeigt). Andernfalls können Sie die JS-Widgets weiterhin verwenden, um diese gängigen Aufgaben auszuführen. Zusätzlich zu den Typen wurden unseren normalen Eingabefeldern einige nützliche Funktionen hinzugefügt. Das Eingabefeld placeholder enthält Standardtext, der gelöscht wird, wenn Sie darauf klicken. Bei autofocus wird beim Laden der Seite der Cursor darauf platziert, damit Sie sofort mit diesem Feld interagieren können. Die Eingabevalidierung ist eine weitere Neuerung, die mit HTML5 eingeführt wird. Wenn Sie das Attribut required hinzufügen, kann das Formular erst gesendet werden, wenn dieses Feld ausgefüllt ist. Mit dem Attribut pattern können Sie auch einen benutzerdefinierten regulären Ausdruck für die Eingabe angeben, der geprüft werden soll. Ungültige Werte verhindern dann die Formulareinreichung. Diese deklarative Syntax ist nicht nur ein großer Fortschritt in Bezug auf die Lesbarkeit der Quelle, sondern ermöglicht auch eine erhebliche Reduzierung des erforderlichen JavaScript-Codes. Auch hier können Sie die Funktion „Funktionserkennung“ verwenden, um eine Fallback-Lösung bereitzustellen, wenn keine native Unterstützung vorhanden ist. Wenn Sie die nativen Widgets verwenden, müssen Sie nicht das umfangreiche JavaScript und CSS senden, das für die Ausführung dieser Widgets erforderlich ist. Dadurch wird die Seitenladezeit beschleunigt und die Widget-Resistenz wahrscheinlich verbessert. In der HTML5-Foliensammlung finden Sie einige dieser Eingabeverbesserungen.

Tipp 9: CSS3-Effekte verwenden, anstatt große Bild-Sprites anzufordern

CSS3 bietet viele neue Möglichkeiten für das Styling, die die Verwendung von Bildern zur genauen Darstellung des visuellen Designs ersetzen. Ein 2K-Bild durch 100 Byte CSS zu ersetzen, ist ein großer Gewinn. Außerdem haben Sie eine weitere HTTP-Anfrage entfernt. Hier einige Eigenschaften, mit denen Sie sich vertraut machen sollten:

Lineare und radiale Farbverläufe
Rahmenradius für abgerundete Ecken
Box-Shadow für Schlagschatten und Glühen
RGBA für Alphaundurchsichtigkeit
Transformationen für die Drehung
CSS-Masken

So können Sie beispielsweise sehr ansprechende Schaltflächen mithilfe von Farbverläufen erstellen und viele andere Effekte ohne Bilder replizieren. Die Browserunterstützung für die meisten dieser Funktionen ist sehr gut. Mit einer Bibliothek wie Modernizr können Sie Browser erkennen, die die Funktionen nicht unterstützen, und Bilder als Fallback verwenden.

Tipp 10: WebSockets für eine schnellere Bereitstellung mit weniger Bandbreite als XHR

WebSockets wurden als Reaktion auf die wachsende Beliebtheit von Comet entwickelt. Die Verwendung von WebSockets anstelle des Comet-over-XHR-Modells bietet tatsächlich Vorteile.

WebSockets haben einen sehr einfachen Frame, sodass die benötigte Bandbreite oft geringer ist als bei XHR. Einige Berichte weisen auf eine Reduzierung der über die Leitung gesendeten Byte um 35% hin. Bei einem höheren Volumen ist der Leistungsunterschied bei der Nachrichtenübermittlung noch deutlicher. In diesem Test wurde für XHR eine Gesamtzeit von 3.500% länger als für WebSockets erfasst. Schließlich hat Ericsson Labs die Leistung von WebSockets untersucht und festgestellt, dass die Ping-Zeiten über HTTP aufgrund höherer Verarbeitungsanforderungen drei- bis fünfmal länger sind als über WebSockets. Sie kamen zu dem Schluss, dass das WebSocket-Protokoll für Echtzeitanwendungen deutlich besser geeignet ist.

Zusätzliche Ressourcen

Für Mess- und Leistungsempfehlungen sollten Sie unbedingt die Firefox-Erweiterungen Page Speed und YSlow verwenden. Außerdem bieten Speed Tracer für Chrome und DynaTrace Ajax für IE eine detailliertere Analyseprotokollierung.

Best Practices für eine schnellere Web-App mit HTML5 Mit Sammlungen den Überblick behalten Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.