SlideShare ist ein Scribd-Unternehmen logo
1 von 38
Downloaden Sie, um offline zu lesen
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

Weitere ähnliche Inhalte

Was ist angesagt?

Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grailsschmichri
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...Peter Hecker
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSBjörn Wilmsmann
 
Webentwicklung für das IPhone
Webentwicklung für das IPhoneWebentwicklung für das IPhone
Webentwicklung für das IPhonereinhardh
 
Einführung in HTTP/2
Einführung in HTTP/2 Einführung in HTTP/2
Einführung in HTTP/2 RankSider
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft AG
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxSebastian Blum
 

Was ist angesagt? (10)

HTML5-Features
HTML5-FeaturesHTML5-Features
HTML5-Features
 
Informatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und GrailsInformatik Seminar Groovy Und Grails
Informatik Seminar Groovy Und Grails
 
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
JavaScript goes Enterprise - Node.js-Anwendungen mit Visual Studio und den No...
 
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJSAcceptance Testing - Automatisierte Web App Tests mit CasperJS
Acceptance Testing - Automatisierte Web App Tests mit CasperJS
 
Blank Template für Joomla!
Blank Template für Joomla!Blank Template für Joomla!
Blank Template für Joomla!
 
Webentwicklung für das IPhone
Webentwicklung für das IPhoneWebentwicklung für das IPhone
Webentwicklung für das IPhone
 
Einführung in HTTP/2
Einführung in HTTP/2 Einführung in HTTP/2
Einführung in HTTP/2
 
BizSpark goes Cloud
BizSpark goes CloudBizSpark goes Cloud
BizSpark goes Cloud
 
Creasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform AppsCreasoft-Akademie - Mobile Multiplattform Apps
Creasoft-Akademie - Mobile Multiplattform Apps
 
WordPress Professional – SEO Campixx
WordPress Professional – SEO CampixxWordPress Professional – SEO Campixx
WordPress Professional – SEO Campixx
 

Ähnlich wie HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)

Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Bastian Grimm
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersJan Berens
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPCNico Steiner
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsUlrich Schmidt
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Martin Kliehm
 
Tipps zur Performanceoptimierung für Liferay Portal
Tipps zur  Performanceoptimierung für Liferay PortalTipps zur  Performanceoptimierung für Liferay Portal
Tipps zur Performanceoptimierung für Liferay PortalStefan Hilpp
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftDavid Schneider
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkFabian Lange
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenMayflower GmbH
 
FMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam AugustinFMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam AugustinVerein FM Konferenz
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGapStefan Kolb
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittdominion
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009Felix Sasaki
 
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)NETWAYS
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro sessionVirttoo org
 
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenPimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenDavid Schneider
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der PraxisTobias Kraft
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionChristoph Reinartz
 
Django - The Web framework for perfectionists with deadlines
Django - The Web framework  for perfectionists with deadlinesDjango - The Web framework  for perfectionists with deadlines
Django - The Web framework for perfectionists with deadlinesMarkus Zapke-Gründemann
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebSebastian Springer
 

Ähnlich wie HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg) (20)

Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014Site Speed EXTREME - SEOkomm 2014
Site Speed EXTREME - SEOkomm 2014
 
Seo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for BeginnersSeo Campixx 2015 - Technical SEO for Beginners
Seo Campixx 2015 - Technical SEO for Beginners
 
Frontend-Performance @ IPC
Frontend-Performance @ IPCFrontend-Performance @ IPC
Frontend-Performance @ IPC
 
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebAppsHTML5 Offline - Fallstricke für mobile Webseiten und WebApps
HTML5 Offline - Fallstricke für mobile Webseiten und WebApps
 
Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)Web Performance Optimierung (WPO)
Web Performance Optimierung (WPO)
 
Tipps zur Performanceoptimierung für Liferay Portal
Tipps zur  Performanceoptimierung für Liferay PortalTipps zur  Performanceoptimierung für Liferay Portal
Tipps zur Performanceoptimierung für Liferay Portal
 
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die ZukunftSharePointCommunity.ch SharePoint Lösungen für die Zukunft
SharePointCommunity.ch SharePoint Lösungen für die Zukunft
 
Web Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 TalkWeb Performance Optimization - Web Tech Conference 2011 Talk
Web Performance Optimization - Web Tech Conference 2011 Talk
 
HTML5 und node.js Grundlagen
HTML5 und node.js GrundlagenHTML5 und node.js Grundlagen
HTML5 und node.js Grundlagen
 
FMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam AugustinFMK2022 FileMaker und Javascript von Adam Augustin
FMK2022 FileMaker und Javascript von Adam Augustin
 
Sencha Touch & PhoneGap
Sencha Touch & PhoneGapSencha Touch & PhoneGap
Sencha Touch & PhoneGap
 
Ajax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schrittAjax in domino web-anwendungen - der nächste schritt
Ajax in domino web-anwendungen - der nächste schritt
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
Logstash: Open Source Log-Management (Webinar vom 20.02.2014)
 
Ruby on Rails in a metro session
Ruby on Rails in a metro sessionRuby on Rails in a metro session
Ruby on Rails in a metro session
 
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und behebenPimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
Pimp My SharePoint - Performanceprobleme vorbeugen, analysieren und beheben
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
Was nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended EditionWas nicht passt wird responsive gemacht - Extended Edition
Was nicht passt wird responsive gemacht - Extended Edition
 
Django - The Web framework for perfectionists with deadlines
Django - The Web framework  for perfectionists with deadlinesDjango - The Web framework  for perfectionists with deadlines
Django - The Web framework for perfectionists with deadlines
 
Von 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im WebVon 0 auf 100 - Performance im Web
Von 0 auf 100 - Performance im Web
 

Mehr von André Krämer

Xamarin.Forms App in einer Stunde
Xamarin.Forms App in einer StundeXamarin.Forms App in einer Stunde
Xamarin.Forms App in einer StundeAndré Krämer
 
Entwicklung von ASP.NET-Core- und SQL-Server-Anwendungen unter macOS in der P...
Entwicklung von ASP.NET-Core- und SQL-Server-Anwendungen unter macOS in der P...Entwicklung von ASP.NET-Core- und SQL-Server-Anwendungen unter macOS in der P...
Entwicklung von ASP.NET-Core- und SQL-Server-Anwendungen unter macOS in der P...André Krämer
 
Codewiederverwendung in Xamarin-Apps maximieren
Codewiederverwendung in Xamarin-Apps maximierenCodewiederverwendung in Xamarin-Apps maximieren
Codewiederverwendung in Xamarin-Apps maximierenAndré Krämer
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018André Krämer
 
Xamarin.Forms Workshop, DDC 2018
Xamarin.Forms Workshop, DDC 2018Xamarin.Forms Workshop, DDC 2018
Xamarin.Forms Workshop, DDC 2018André Krämer
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndré Krämer
 
Xamarin ohne Mac und Android SDK? - So weit kommen Sie mit dem Xamarin Live P...
Xamarin ohne Mac und Android SDK?- So weit kommen Sie mit dem Xamarin Live P...Xamarin ohne Mac und Android SDK?- So weit kommen Sie mit dem Xamarin Live P...
Xamarin ohne Mac und Android SDK? - So weit kommen Sie mit dem Xamarin Live P...André Krämer
 
Typische Sicherheitslücken in ASP.NET MVC und Web API Anwendungen
Typische Sicherheitslücken in ASP.NET MVC und Web API AnwendungenTypische Sicherheitslücken in ASP.NET MVC und Web API Anwendungen
Typische Sicherheitslücken in ASP.NET MVC und Web API AnwendungenAndré Krämer
 
Lokale Datenhaltung in Xamarin-Apps
Lokale Datenhaltung in Xamarin-AppsLokale Datenhaltung in Xamarin-Apps
Lokale Datenhaltung in Xamarin-AppsAndré Krämer
 
Entity Framework hinter den Kulissen
Entity Framework hinter den KulissenEntity Framework hinter den Kulissen
Entity Framework hinter den KulissenAndré Krämer
 
Performance trotz Entity Framwork
Performance trotz Entity FramworkPerformance trotz Entity Framwork
Performance trotz Entity FramworkAndré Krämer
 
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)André Krämer
 
.NET Datenzugriff einfach und performant mit Micro O/R Mappern
.NET Datenzugriff einfach und performant mit Micro O/R Mappern .NET Datenzugriff einfach und performant mit Micro O/R Mappern
.NET Datenzugriff einfach und performant mit Micro O/R Mappern André Krämer
 
Das Repository-Pattern und der O/R-Mapper: Geniale Kombination oder vergebene...
Das Repository-Pattern und der O/R-Mapper: Geniale Kombination oder vergebene...Das Repository-Pattern und der O/R-Mapper: Geniale Kombination oder vergebene...
Das Repository-Pattern und der O/R-Mapper: Geniale Kombination oder vergebene...André Krämer
 
Zentrale Dokumentengenerierung mit dem Open XML SDK
Zentrale Dokumentengenerierung mit dem Open XML SDKZentrale Dokumentengenerierung mit dem Open XML SDK
Zentrale Dokumentengenerierung mit dem Open XML SDKAndré Krämer
 

Mehr von André Krämer (15)

Xamarin.Forms App in einer Stunde
Xamarin.Forms App in einer StundeXamarin.Forms App in einer Stunde
Xamarin.Forms App in einer Stunde
 
Entwicklung von ASP.NET-Core- und SQL-Server-Anwendungen unter macOS in der P...
Entwicklung von ASP.NET-Core- und SQL-Server-Anwendungen unter macOS in der P...Entwicklung von ASP.NET-Core- und SQL-Server-Anwendungen unter macOS in der P...
Entwicklung von ASP.NET-Core- und SQL-Server-Anwendungen unter macOS in der P...
 
Codewiederverwendung in Xamarin-Apps maximieren
Codewiederverwendung in Xamarin-Apps maximierenCodewiederverwendung in Xamarin-Apps maximieren
Codewiederverwendung in Xamarin-Apps maximieren
 
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018Einstieg in Xamarin und Xamarin.Forms, DDC 2018
Einstieg in Xamarin und Xamarin.Forms, DDC 2018
 
Xamarin.Forms Workshop, DDC 2018
Xamarin.Forms Workshop, DDC 2018Xamarin.Forms Workshop, DDC 2018
Xamarin.Forms Workshop, DDC 2018
 
Android Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickelnAndroid Apps mit Xamarin entwickeln
Android Apps mit Xamarin entwickeln
 
Xamarin ohne Mac und Android SDK? - So weit kommen Sie mit dem Xamarin Live P...
Xamarin ohne Mac und Android SDK?- So weit kommen Sie mit dem Xamarin Live P...Xamarin ohne Mac und Android SDK?- So weit kommen Sie mit dem Xamarin Live P...
Xamarin ohne Mac und Android SDK? - So weit kommen Sie mit dem Xamarin Live P...
 
Typische Sicherheitslücken in ASP.NET MVC und Web API Anwendungen
Typische Sicherheitslücken in ASP.NET MVC und Web API AnwendungenTypische Sicherheitslücken in ASP.NET MVC und Web API Anwendungen
Typische Sicherheitslücken in ASP.NET MVC und Web API Anwendungen
 
Lokale Datenhaltung in Xamarin-Apps
Lokale Datenhaltung in Xamarin-AppsLokale Datenhaltung in Xamarin-Apps
Lokale Datenhaltung in Xamarin-Apps
 
Entity Framework hinter den Kulissen
Entity Framework hinter den KulissenEntity Framework hinter den Kulissen
Entity Framework hinter den Kulissen
 
Performance trotz Entity Framwork
Performance trotz Entity FramworkPerformance trotz Entity Framwork
Performance trotz Entity Framwork
 
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
Cross Plattform App Entwicklung mit Visual Studio 2015 (Xamarin und Cordova)
 
.NET Datenzugriff einfach und performant mit Micro O/R Mappern
.NET Datenzugriff einfach und performant mit Micro O/R Mappern .NET Datenzugriff einfach und performant mit Micro O/R Mappern
.NET Datenzugriff einfach und performant mit Micro O/R Mappern
 
Das Repository-Pattern und der O/R-Mapper: Geniale Kombination oder vergebene...
Das Repository-Pattern und der O/R-Mapper: Geniale Kombination oder vergebene...Das Repository-Pattern und der O/R-Mapper: Geniale Kombination oder vergebene...
Das Repository-Pattern und der O/R-Mapper: Geniale Kombination oder vergebene...
 
Zentrale Dokumentengenerierung mit dem Open XML SDK
Zentrale Dokumentengenerierung mit dem Open XML SDKZentrale Dokumentengenerierung mit dem Open XML SDK
Zentrale Dokumentengenerierung mit dem Open XML SDK
 

HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg)

  • 1. HTML5-Performance: So rennt Ihre App und nicht Ihre Anwender (weg) André Krämer Softwareentwickler, Trainer, Berater
  • 2.
  • 3. Warum ist JavaScript langsam? Foto: © pkruger | istockphoto.com
  • 4. Ist es nicht! Chakra, V8 & Co sind rasend schnell! Foto: © Rostislav Sedlacek | Fotolia.com
  • 5. Zusammenfassung • Moderne JavaScript Engines sind sehr performant • Die Laufzeitgeschwindigkeit von JavaScript ist heute kein Problem mehr
  • 6. Homepage andre@andrekraemer.de | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer Vielen Dank! Blog Xing Facebook Twitter Google+ 6
  • 8. Nutzer von Webanwendungen … Foto: © Romolo Tavani | Fotolia.com
  • 9. Warum sind Webanwendungen langsam? Foto: © pkruger | istockphoto.com
  • 10. Wann ist eine Webanwendung „langsam“? • Zu viel JavaScript? • Komplexes CSS? • Komplexes DOM? • DOM Manipulation? • Ajax? • IE6 • ...
  • 11. Langsam aus Sicht des Anwenders Foto: © Shakzu | Fotolia.com
  • 12. 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/
  • 13. Muss jede Interaktion in weniger als 100ms abgeschlossen sein?
  • 14. NEIN!
  • 15. 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
  • 17. Initiale Darstellung / Critical Rendering Path (CRP) Netzwerk HTML DOM JavaScript CSS CSSOM Render Tree Layout Paint
  • 18. 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
  • 20. 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>
  • 21. 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
  • 22. CSS Parsing (CSSOM) (1) body { font-size: 20px; } p { margin:20px; } p:nth-child(3) { display: none; }
  • 23. CSS Parsing (CSSOM) (2) body font-size: 20px p margin: 20px nth-child(3): display: none
  • 24. Render Tree body h1 Demo 2 p Paragraph 1 p Paragraph 3 p Paragraph 4
  • 25. CSS blockiert das Rendering! Netzwerk HTML DOM CSS CSSOM Render Tree
  • 26. 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
  • 27. Demo Critical Rendering Path (CRP) Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo2/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo2/
  • 28. 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
  • 29. Demo Offline Caching Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo3/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo3/
  • 31. Ajax Caching • Der Browser Cache cached GET Anfragen an Web Services • Alternative: LocalStorage
  • 32. Demo Offline Caching Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo4/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo4/
  • 33. Rendering / LayoutStorm Script Style Layout Paint Script Style Layout Style Layout Style Layout Paint
  • 34. Demo Layout Storm Online Demo: http://andrekraemer.github.io/WebPerfDemo/Demo5/ Source Code: http://github.com/andrekraemer/WebPerfDemo/Demo5/
  • 36. 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
  • 37. Homepage andre@andrekraemer.de | http://andrekraemer.de | http://andrekraemer.de/blog | http://github.com/AndreKraemer Vielen Dank! Blog Xing Facebook Twitter Google+ 37
  • 38. 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

  1. Demo Source Code: https://github.com/andrekraemer/Webperfdemo
  2. Selbständiger Softwareentwickler, Trainer und Berater Partner im IT-Visions Expertennetzwerk Microsoft MVP, TX Text Control MVP und Video Trainer bei video2brain
  3. 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.
  4. Beispiel: Sortieren einer Grid Spalte: Ich habe die Spalte sortiert Der Computer hat die Spalte sortiert Etwas ist
  5. Siehe auch GULP Tasks!
  6. chrome://appcache-internals/# !!!
  7. Achtung! In Demo im Cache Dateien verändern!!!!