Anzeige
Check these out next
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
23. Sep 2016•0 gefällt mir•538 Aufrufe
0 gefällt mir
Sei der Erste, dem dies gefällt
Mehr anzeigen
Aufrufe
Aufrufe insgesamt
0
Auf Slideshare
0
Aus Einbettungen
0
Anzahl der Einbettungen
0
Downloaden Sie, um offline zu lesen
Melden
Software
Morgens halb zehn in Deutschland: Der Puls Ihrer Anwender ist mittlerweile im dreistelligen Bereich und die ersten User denken ernsthaft darüber nach, den PC aus dem Fenster zu werfen. Ursache: Die von Ihnen entwickelte webbasierte App bremst die Nutzer stets an den entscheidenden Stellen aus. An produktives Arbeiten ist kaum noch zu denken und Überstunden stehen auf dem Tagesprogramm. Doch so weit muss es gar nicht kommen. Glückliche Anwender sind nur wenige Handgriffe entfernt. Und genau diese Handgriffe, wird Ihnen André Krämer in diesem Vortrag zeigen. Gemeinsam werden wir den Ursachen langsamer Web- und Mobile-Apps in den Bereichen JavaScript, CSS und Co. auf den Grund gehen und diese Schritt für Schritt eliminieren.
André KrämerFolgen
Senior Consultant - Windows Apps, ASP.NET, TFS, Xamarin. Infragistics MVP, Microsoft MVP, TX Text Control MVP um André Krämer - Software, Training & ConsultingAnzeige
Anzeige
Anzeige
Recomendados
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...Peter Hecker
SEO Day 2016: Perfekte Ladezeiten und SEO-Hosting für Speed-FreaksSEARCH ONE
Mobile Webentwicklung mit HTML5kkramhoeft
Frontend-Performance mit PHPFrank Kleine
PHP Kongress 2010 - Web-PerformanceNico Steiner
Startups in „Die Höhle der Löwen“ - SEODAY 2016Dennis Oderwald
HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)
- HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg) André Krämer Softwareentwickler, Trainer, Berater
- Warum ist JavaScript langsam? Foto: © pkruger | istockphoto.com
- Ist es nicht! Chakra, V8 & Co sind rasend schnell! Foto: © Rostislav Sedlacek | Fotolia.com
- Zusammenfassung • Moderne JavaScript Engines sind sehr performant • Die Laufzeitgeschwindigkeit von JavaScript ist heute kein Problem mehr
- Homepage andre@andrekraemer.de | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer Vielen Dank! Blog Xing Facebook Twitter Google+ 6
- Nicht so schnell ....
- Nutzer von Webanwendungen … Foto: © Romolo Tavani | Fotolia.com
- Warum sind Webanwendungen langsam? Foto: © pkruger | istockphoto.com
- Wann ist eine Webanwendung „langsam“? • Zu viel JavaScript? • Komplexes CSS? • Komplexes DOM? • DOM Manipulation? • Ajax? • IE6 • ...
- Langsam aus Sicht des Anwenders Foto: © Shakzu | Fotolia.com
- Antwortzeiten nach Jakob Nielsen • 0 – 100 ms: Das System antwortet unverzüglich Ich habe etwas gemacht • 101 ms – 1000 ms: Benutzer bemerkt Verzögerung, bleibt im Fluss Ich habe dem Computer befohlen etwas zu machen • 1 s – 10 s: Der Benutzer fokussiert sich noch auf die Aufgabe • > 10 Sekunden: Der Anwender bricht die Aufgabe ab • Zusatzinfo: Animationen auf dem Bildschirm werden bei 60 Frames pro Sekunde als flüssig wahrgenommen (1 Frame = 1000/60 = 16,6666 ms) Angelehnt an: https://www.nngroup.com/articles/response-times-3-important-limits/
- Muss jede Interaktion in weniger als 100ms abgeschlossen sein?
- NEIN!
- Interaktion < 100 msErste Darstellung < 1 s Lebenszyklus einer Webanwendung Seite und Ressourcen werden geladen Seite wird dargestellt Benutzer interagiert mit der Seite AJAX Anfrage DOM Manipulation
- Erste Darstellung
- Initiale Darstellung / Critical Rendering Path (CRP) Netzwerk HTML DOM JavaScript CSS CSSOM Render Tree Layout Paint
- Strategien zur Verbesserung des Netzwerkzugriffes (Serverseitig / Grundwissen) • Anzahl der übertragenen Bytes reduzieren • Reduzieren Sie das DOM • Verkleinern (Minify) der Dateien • Komprimieren der Dateien (gzip) • Nicht benötigte Styles / JavaScript entfernen • CDNs einbinden • Domains ohne Cookies für statische Inhalte nutzen • Cache Header setzen ... • Anzahl der Anfragen reduzieren • Kombinieren von Dateien
- Demo (Serverseitige Optimierung) Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo1/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo1/
- DOM Parsing (1) <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Rendering</title> <link href=“css/style.css“ rel=“stylesheet“/> </head> <body> <h1>Demo 2 Rendering</h1> <p>Paragraph 1</p> <p>Paragraph 2</p> <p>Paragraph 3</p> <p>Paragraph 4</p> </body> </html>
- DOM Parsing (2) html head meta meta title link body h1 Demo 2 p Paragrap h 1 p Paragrap h 2 p Paragrap h 3 p Paragrap h 4
- CSS Parsing (CSSOM) (1) body { font-size: 20px; } p { margin:20px; } p:nth-child(3) { display: none; }
- CSS Parsing (CSSOM) (2) body font-size: 20px p margin: 20px nth-child(3): display: none
- Render Tree body h1 Demo 2 p Paragraph 1 p Paragraph 3 p Paragraph 4
- CSS blockiert das Rendering! Netzwerk HTML DOM CSS CSSOM Render Tree
- JavaScript blockiert das DOM Parsing und kann erst ausgeführt werden, wenn das CSSOM vollständig ist Netzwerk HTML DOM JavaScript CSS CSSOM Render Tree
- Demo Critical Rendering Path (CRP) Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo2/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo2/
- Caching • Über Cache Header und ETags können Dateien im lokalen Browser Cache vorgehalten werden • Dieser kann jedoch durch den Benutzer (oder automatisch durch den Browser) gelöscht werden • Alternative, besonders für Single Page Applications: • Caching über den HTML 5 Offline Modus
- Demo Offline Caching Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo3/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo3/
- Laufzeitoptimierung
- Ajax Caching • Der Browser Cache cached GET Anfragen an Web Services • Alternative: LocalStorage
- Demo Offline Caching Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo4/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo4/
- Rendering / LayoutStorm Script Style Layout Paint Script Style Layout Style Layout Style Layout Paint
- Demo Layout Storm Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo5/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo5/
- Demo RequestAnimationFrame Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo6/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo6/
- Zusammenfassung • Verstehen Sie das Critical Path Rendering um die Zeit zur ersten Darstellung Ihrer Website zu optimieren • CSS und JavaScript blockieren das Rendering • Überdenken Sie Ihre Caching Strategien • Abstrahieren Sie Datenzugriffe um einfach Caching einbauen zu können • Liefern Sie nach Möglichkeit zunächst gecachte Inhalte und liefern Sie die „Live Daten“ anschließend nach • Rendern / Zeichnen Sie über Request-Animation Frame statt über SetTimeout
- Homepage andre@andrekraemer.de | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer Vielen Dank! Blog Xing Facebook Twitter Google+ 37
- Meine Dienstleistungen • Schulungen • ASP.NET / AngularJS / Aurelia • Xamarin • TX Text Control • Unit Testing • Team Foundation Server • .NET Datenzugriff (Entity Framework, NHibernate, Micro O/R Mapper) • Consulting • Durchführung von Technologieworkshops • Code- / Architekturreviews • Analyse von managed Memory Leaks / Performancereviews • Prototypenentwicklung • Remote Entwickler-Support • Projektbegleitendes Coaching • Softwareentwicklung • Mobile Apps (Android, iOS, Windows 10, Windows 8, Windows Phone) • Entwicklung von Web-Anwendungen mit ASP.NET und AngularJS oder Aurelia 38andre@andrekraemer.de | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer
Hinweis der Redaktion
- Demo Source Code: https://github.com/andrekraemer/Webperfdemo
- Selbständiger Softwareentwickler, Trainer und Berater Partner im IT-Visions Expertennetzwerk Microsoft MVP, TX Text Control MVP und Video Trainer bei video2brain
- Langsam bedeutet dass der Benutzer unzufrieden ist. Das mag zwar nun sehr subjektiv klingen, allerdings gibt es recht objektiv messbare Wartezeiten ab denen ein Benutzer unzufrieden wird.
- Beispiel: Sortieren einer Grid Spalte: Ich habe die Spalte sortiert Der Computer hat die Spalte sortiert Etwas ist
- Siehe auch GULP Tasks!
- chrome://appcache-internals/# !!!
- Achtung! In Demo im Cache Dateien verändern!!!!
Anzeige