Die meisten Front-End-Entwickler kennen zumindest einige der verfügbaren Optionen, um die Front-End-Leistung zu verbessern. Leistung in diesem Sinne bezieht sich nicht auf die Geschwindigkeit, mit der eine bestimmte Seite geladen wird, sondern wie reibungslos und reaktionsschnell sie sich anfühlt, wenn ein Benutzer damit interagiert. Ein spezielles Beispiel wäre die Framerate, die ein Benutzer beim Scrollen Ihrer Homepage erfährt. Wenn es konstant hoch ist, gilt die Leistung als gut.
Es besteht die Möglichkeit, dass Sie zuvor keine Notwendigkeit gehabt haben, Leistungsprobleme zu beheben. Möglicherweise haben Sie noch nicht an einer Website gearbeitet, die unter solchen Problemen gelitten hat, oder das Entfernen einer kleinen Verzögerung oder das Wiederherstellen dieser ausgelassenen Frames ist nicht ganz oben auf Ihrer Prioritätenliste. Mit der zunehmenden Anzahl von Animationen und komplexen Stilen, die in moderne Websites integriert sind, und der Anpassung anpassungsfähiges Design, besteht eine hohe Chance, dass Sie irgendwann auf träge mobile Leistung stoßen werden. In diesem Artikel werden einige Aspekte beschrieben, die bei der Arbeit mit Websites und Web-Apps zu berücksichtigen sind, die bei der Ausführung auf weniger leistungsfähigen mobilen Geräten Komplexität und Leistung ausgleichen müssen.
Es läuft reibungslos auf meinem iPhone 5?
Tut es wirklich? Das ist großartig! Hier einige aktuelle Statistiken der W3Schools (nicht zu verwechseln mit dem W3C), die die aktivsten mobilen Betriebssysteme veranschaulichen.
Natürlich ist unsere Verwendung dieser Daten begrenzt. Es geht nur explizit um zwei Betriebssysteme; iOS und Android. Dadurch werden Windows Phone, Blackberry und andere, noch weniger beliebte mobile Betriebssysteme außer Sicht.
Was wir sehen können ist, dass der Marktanteil von Android etwas größer ist als der von iOS. Auch hier fehlen noch weitere Details wie Versionsnummern und Gerätenamen. Dies ist jedoch ein guter Anfang, um festzustellen, wo unsere Unterstützung am dringendsten benötigt wird.
Android hat nicht nur den höchsten Marktanteil der aktiven Geräte, sondern auch die Fragmentierung der Geräte. Jüngste Daten zeigen, dass allein im Jahr 2013 11.868 verschiedene Android-Geräte in freier Wildbahn entdeckt wurden (mit einer Stichprobengröße von 682.000 Geräten). Auf diesen Geräten wurden acht verschiedene Versionen des Android-Betriebssystems verwendet.
Der Punkt ist, dass, wenn es darum geht, die Leistung Ihres Standortes zu beurteilen, Sie auf einer geeigneten Reihe von Geräten testen müssen. Welche Geräte genau festgelegt werden können, kann nur für jede Website festgelegt werden und sollte sich auf reale Besucherdaten beziehen (sofern Sie auf diese zugreifen können), die sich auf Ihre Zielgruppe beziehen.
In einer perfekten Welt würden unsere Standorte auf jedem einzelnen Gerät reibungslos laufen. In der Realität ist dies aufgrund der üblichen zeitlichen und finanziellen Zwänge nicht möglich. Es liegt an Ihnen, zu entscheiden, wo die Linie gezogen werden soll, und zu entscheiden, was akzeptabel ist.
Häufige Ursachen für schlechte Leistung
Hier sind einige Punkte, auf die Sie beim Debuggen von Leistungsproblemen auf mobilen Geräten achten sollten.
1. Große, komplexe CSS-Deklarationen
Bei all der Schönheit, die CSS3 in die Welt der Frontend-Entwicklung einbringt, zwingen alle diese ausgefallenen Deklarationen im neuen Stil unsere CPUs dazu, härter als je zuvor zu arbeiten. Juriy Zaytsev hat einen großartigen Artikel über CSS-Profilerstellung und -Optimierung geschrieben, der dies gut abdeckt. Beachten Sie jedoch, dass dieser Artikel im Januar 2012 veröffentlicht wurde.
Der von Juriy verwendete Profiler ist der Profiler von Opera Dragonfly. Sie können jetzt Ihre Stile mit Chrome DevTools einfacher profilieren, indem Sie einfach Profile in der DevTools-Navigation aufrufen und Ihre bevorzugte Option auswählen.
Um die Auswirkungen von CSS für sich selbst zu sehen, führen Sie eine große, ausgefallene Website durch den DevTools Profiler (wenn Sie Zeit haben, legen Sie auch Ihre Malzeiten fest), und Sie werden die Leistungsprobleme sehen, über die ich spreche. Schauen wir uns ein Beispiel an.
Ich kann Battlefield 3 mit Ultra-Einstellungen (einem sehr großen Bild) ausführen, aber die Startseite des Green Man Festival läuft mit 24 Bildern pro Sekunde. Was ist damit??
Was ist los damit?
So schön die Website aussieht, mussten die Entwickler die Leistung etwas opfern, um das visuelle Erscheinungsbild und das Gefühl zu erreichen, das sie wollten. Der Leistungsverlust ist gering. Wenn jedoch eine solche Site die Leistung auf einem leistungsstarken Desktop-Computer beeinträchtigen kann, was können wir dann auf einem Mobiltelefon erwarten, das auf einem 1-GHz-Prozessor läuft?
Natürlich bieten die meisten Sites mit ausgefallenen Desktopfunktionen zu Recht eine vereinfachte Darstellung, wenn sie auf mobilen Geräten angezeigt werden.
Im Fall von Green Man haben mobile Browser kleinere Bilder, weniger oder mehr vereinfachte Animationen und weniger dynamischen Inhalt. Dadurch läuft es perfekt glatt und sieht gut aus.
Wenn sich Ihre Website auf mobilen Geräten als träge anfühlt, sollten Sie zuerst Ihre CSS-Deklarationen betrachten. Im Hinblick auf das Auffinden der Schuldigen können Kombinationen von Textschatten, Rahmenschatten, Grenzradius, Verläufen, Transparenz und anderen ähnlichen Eigenschaften, die mehrere Elemente auf einer Seite umfassen, die Anzahl der Neufarbungen erhöhen, die der Browser ausführen muss Das Ergebnis macht die Benutzeroberfläche Ihrer Website träge und reagiert nicht. Diese Neulackierungen werden auf dem Handy sicherlich deutlicher.
Es liegt an Ihnen zu bestimmen, welche Stile Sie behalten möchten und welche Sie bequem ablegen können. Es kommt darauf an, ob die Leistungssteigerung ausreicht, um eine leichte Vereinfachung der visuellen Stile zu gewährleisten. In den meisten Fällen kann das Absetzen leistungsabhängiger Deklarationen die allgemeine Benutzererfahrung Ihrer Benutzer verbessern.
2. Komplexe JavaScript-Animationen
jQuery ist jetzt eine Standardbibliothek, die von vielen Entwicklern verwendet wird, die Animationen in ihre Designs integrieren möchten. Der Hauptgrund ist, dass es so einfach zu bedienen ist. Sie müssen JavaScript nicht wirklich kennen, um jQuery verwenden zu können. Es ist natürlich klar, warum dies zu Problemen führen kann.Schlechtes JavaScript kann eine Ursache für gezackte Animationen sein. Aus diesem Grund müssen Sie sicherstellen, dass Ihre Skripts so optimiert wie möglich sind.
Wenn Sie mit JavaScript nicht die gewünschten Ergebnisse erzielen, sollten Sie sich CSS-3D-Transformationen zuwenden, deren Unterstützung auf dem Mobilfunkmarkt bereits recht gut ist.
Die Verwendung von 3D-Transformationen ermöglicht glatte Übergänge, die von Bibliotheken wie jQuery nicht immer möglich sind. Warum? Dadurch können Sie hardwarebeschleunigtes Rendering auslösen, das zwar keine magische Lösung für alle Ihre Animationsprobleme ist, jedoch in bestimmten Szenarien mit Erfolg eingesetzt werden kann. Schauen Sie sich diese Vergleichs-Demo an, um zu sehen, wie stark die Leistung zwischen den beiden sein kann.
Für jeden, der noch keine 3D-Transformationen verwendet hat, werfen wir einen Blick auf ein Codebeispiel, um den Einstieg zu erleichtern. Hier einige grundlegende CSS-Anweisungen, mit denen Sie die vertikale Position eines Elements im Hover animieren können.
CSS-Beispiel
Ich habe auf CSSDesk eine Live-Demo mit allen Herstellerpräfixen eingerichtet. Bitte beachten Sie, dass einige Präfixe zum Zeitpunkt des Lesens möglicherweise nicht mehr erforderlich sind. Wenn Sie Zeit haben, enthält der Dev-Blog von Flickr eine großartige Fallstudie zu diesem Thema und ist eine Lektüre wert.
3. Progressive Enhancement Vs. Anmutige Degradation
Hier haben wir zwei, nicht so neu? Terms (progressive Enhancement feiert nach seiner Prägung im Jahr 2003 derzeit sein 10-jähriges Bestehen), die auch heute noch viel Bedeutung haben. Beide Konzepte sind besonders wichtig für die Entwicklung responsiver Websites. Da die Anzahl der verfügbaren Geräte und Betriebssysteme ständig steigt, ist insbesondere die fortschreitende Verbesserung bei vielen Projekten ein Muss.
Sind sie nicht beide dasselbe?
Fast. Der Hauptunterschied hier ist die Reihenfolge, in der Sie sich Ihrem Design nähern. Das Planen von Funktionen für alle Geräte und das Hinzufügen einiger Funken für diejenigen, die damit umgehen können, ist ein Beispiel für fortschreitende Verbesserungen. Erstellen Sie ein ausgefallenes JavaScript-Feature und fahren Sie fort mit a Alternative am Ende; anmutige Erniedrigung.
Welche Methode solltest du anwenden? Nach meiner Erfahrung führt progressive Verbesserung fast immer zu einer besseren und saubereren Lösung. Chris Heilmann hat dazu eine ziemlich gute Zusammenfassung geschrieben, die jetzt bei Web Platform Docs sitzt.
Was als nächstes?
Die Ideen in diesem Artikel sind grundlegend, bringen Sie jedoch auf den richtigen Weg, wenn es darum geht, die Ursachen schlechter Leistung herauszufinden.
Wenn Sie mehr erfahren möchten, sollten Sie am besten wissen, wie ein Webbrowser technisch funktioniert. Immerhin ist es der Browser, der den von Ihnen geschriebenen Code analysiert. Wenn Sie verstehen, was für einen reibungslosen Betrieb Ihrer Website erforderlich ist, können Sie Ihren Code so einstellen, dass er damit arbeitet.
Funktionsweise von Browsern: Hinter den Kulissen moderner Webbrowser steht ein fantastischer und umfassender Artikel, der ausführlich auf dieses Thema eingeht. Viel Glück!