Daniel Walzenbach Developer Evangelist Microsoft Deutschland GmbH.

Präsentation zum Thema: "Daniel Walzenbach Developer Evangelist Microsoft Deutschland GmbH."—  Präsentation transkript:

1 Daniel Walzenbach Developer Evangelist Microsoft Deutschland GmbH

2 Und im Hintergrund? 72 Sessions Bytes Sent: 95.050 Bytes Received: 330.814

3 Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

4 DNS Lookups verringern Minify JavaScript Redirects vermeiden Doppelt referenzierte Skripte entfernen Etags vermeiden Ajax cachbar machen

5 Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

6

7 Verringern die Anzahl der HTTP Requests Praktisch allerdings nur einsetzbar für rechteckige Elemente Bilder müssen zusammenhängen

8

9 Verschiedene Bilder in einem Bild kombinieren Für Elemente die background-image unterstützen Weniger HTTP- Requests Kleinerer Download als einzelne Bilder Im Beispiel: Sprites Breite: 32px Höhe: 40px

10 <div style="background-image: url('a_lot_of_sprites.gif'); background-position: -65px -121px; width: 32px; height: 40px;">

11 Weiterer Trick: JavaScript- und CSS Dateien zusammenfassen # HTTP Requests zu verringern: Sehr wirksame Technik für first-time visitors

12 Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

13 Vorteile von Caching Kleinere Latenzzeit zwischen Request und Response Geringere Netzwerklast Serverlast wird verringert Arten von Web-Caches Browser Cache Proxy Caches Gateway Caches

14 Expires Header die Datei bis zum … verwenden the date/time after which the response is considered stale Expires: Thu, 15 Apr 2010 20:00:00 GMT Zeit zwischen Server und Client muss synchron sein http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html

15 Cache-Control als Alternative zu Expires (HTTP/1.1) Verwendet max-age um die Cachedauer zu setzen Cache-Control: max-age=86400 Cache-Control und Expires setzen Cache-Control überschreibt Expires

16 Alle Komponenten cachen, die selten geändert werden Skripte, Stylesheets, … Wie kommen Änderungen von Komponenten zum Client wenn diese gecacht sind? Versions# in Dateinamen In Buildprozess integrieren Vereinfacht Wartung/Debugging

17 Classic ASP (VBScript) Response.CacheControl = "public, max-age=3600" ASP.NET (VB.NET) Dim ts = New TimeSpan(1, 0, 0) Response.Cache.SetMaxAge(ts) Response.Cache.SetCacheability( HttpCacheability.Public) Response.Cache.SetExpires(Now.AddDays(2))

18 Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

19 Gzip gegenüber deflate vorziehen Alle Texte (HTLM, XML, JS, CSS, JSON, …) komprimieren Bereits komprimierte Inhalte NICHT erneut komprimieren (png, jpg, …) Erzeugt Last auf Server und Client HTTP Request Accept-Encoding: gzip, deflate HTTP Request Accept-Encoding: gzip, deflate HTTP Response Content-Encoding: gzip HTTP Response Content-Encoding: gzip

20 Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

21 Stylesheets am Ende einer Seite verhindern progressives Rendern (browserabhängig) Flash of Unstyled Content (FOUC) LINK gegenüber @import vorziehen Stylesheets mit einem Link Tag in den Document einfügen! http://stevesouders.com/hpws/css-fouc.php

22 Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

23 Reaktionszeit definiert sich durch die Anzahl der Komponenten pro Seite 1 Komponente = 1 HTTP Request HTTP/1.1 Empfehlung: Zwei parallele Downloads pro hostname http://yuiblog.com/blog/2007/04/11/performance-research-part-4/ Konfiguration IE: Registry FF: about:config

24 Komponenten auf zwei Hostnamen verteilen (CNAME(Alias auf DNS)) http://yuiblog.com/blog/2007/04/11/performance-research-part-4/

25 Leere HTML Datei mit 20 Bildern. Zeiten für gecachte Aliase und leerem Dateicache.

26 Skriptdownload verhindert einen weiteren, parallelen Download Skript könnte die Seite ändern ( document.write ) Ausführungsreihenfolge der Skripte High Performance Web Sites, 8.3. Scripts Block Downloads

27 Rendern von Inhalten unterhalb eines Skriptblocks wird blockiert Download von Komponenten unterhalb eines Skriptblocks wird blockiert High Performance Web Sites, 8.3. Scripts Block Downloads

28 Anzahl der HTTP Requests verringern Verwenden eines Content Delivery Networks Cachen, cachen, cachen Inhalte Gzip komprimieren Stylesheets an den Anfang der Seite stellen Skripte an das Ende der Seite stellen CSS Expressions vermeiden JavaScript und CSS auslagern

29 CSS Properties dynamisch setzen Werden bei Größenänderungen der Seite, Mausbewegungen, Scrollen, … ausgewertet Im Hintergrund wird Skript ausgeführt (Zugriff auf DOM Elemente) Mit Bedacht verwenden Alternative EventHandler One-Time Expressions http://msdn2.microsoft.com/en-us/library/ms537634.aspx

30 { Ajax Performance} Sprite Maps Vorausschauend cachen, Feed the cache

31 LocalLocal GlobalGlobal DOMDOM ExpandoExpando

32 function WorkOnLocalVariable() { local_var = GetValueFromDOM(); return (local_var + 1); }

33 function WorkOnLocalVariable() { var local_var = GetValueFromDOM(); return (local_var + 1); }

34 function BuildUI() { var baseElement = document.getElementById('target'); baseElement.innerHTML = ''; //Clear out previous baseElement.innerHTML += BuildTitle(); baseElement.innerHTML += BuildBody(); baseElement.innerHTML += BuildFooter(); }

35 function BuildUI() { var elementText = BuildTitle() + BuildBody() + BuildFooter(); document.getElementById('target').innerHTML = elementText; }

36 function CalculateSum() { var lSide = document.body.all.lSide.value; var rSide = document.body.all.rSide.value; document.body.all.result.value = lSide + rSide; }

37 function CalculateSum() { // Cache document.body.all var elemCollection = document.body.all; var lSide = elemCollection.lSide.value; var rSide = elemCollection.rSide.value; elemCollection.result.value = lSide + rSide; }

38 function IterateWorkOverCollection() { var length = myCollection.getItemCount(); for(var index = 0; index < length; index++) { Work(myCollection[index]); } }

39 function IterateWorkOverCollection() { var funcWork = Work; var length = myCollection.getItemCount(); for(var index = 0; index<length; index++) { funcWork(myCollection[index]); } }

40 function IterateWorkOverCollection() { var parentElement = document.getElementById('target'); var length = myCollection.getItemCount(); for(var i = 0; i < length; i++) { parentElement.appendChild(myCollection[i]); } }

41 function IterateWorkOverCollection() { var funcAppendChild = document.getElementById('target').appendChild; var length = myCollection.getItemCount(); for(var i = 0; i < length; i++) { funcAppendChild(myCollection[i]); } }

42 var smallerStrings = new Array(); var myRatherLargeString = ''; var length = smallerStrings.length; for(var index = 0; index < length; index++) { myRatherLargeString += smallerStrings[index]; }

43 var smallerStrings = new Array(); smallerStrings.push(" "); smallerStrings.push("sampleText"); smallerStrings.push(" "); … var myRatherLargeString = smallerStrings.join('');

44 UpdatePanel?

45 { Ajax Perfoemance } UpdatePanel Alternativen zum UpdatePanel

46 Erster Zugriff Request Count: 72 Bytes Sent: 95.050 Bytes Received: 330.814 html: 29.516 Byte Nachfolgende Zugriffe Request Count: 3 Bytes Sent: 4.865 Bytes Received: 14.592 html: 13.451 Byte

47 Performance issues with "String Concatenation" in JScript. http://blogs.msdn.com/jscript/archive/2007/10/1 7/performance-issues-with-string- concatenation-in-jscript.aspx Eval is Evil, Part One http://blogs.msdn.com/ericlippert/archive/2003/ 11/01/53329.aspx Using undefined variables in JScript http://blogs.msdn.com/ericlippert/archive/2006/ 05/04/590030.aspx

48 IE + JavaScript Performance Recommendations http://blogs.msdn.com/ie/archive/2006/08/28/7 28654.aspx http://blogs.msdn.com/ie/archive/2006/11/16/ie- javascript-performance-recommendations-part- 2-javascript-code-inefficiencies.aspx http://blogs.msdn.com/ie/archive/2007/01/04/ie -jscript-performance-recommendations-part-3- javascript-code-inefficiencies.aspx

49 ASP.NET AJAX Online Documentation http://www.asp.net/AJAX/Documentation/Live/d efault.aspx Yahoo developer network: Best Practices for Speeding Up Your Web Site http://developer.yahoo.com/performance/rules. html 14 Rules for Faster-Loading Web Sites (Demos) http://stevesouders.com/hpws

50 10 Tips for Writing High-Performance Web Applications http://msdn.microsoft.com/msdnmag/issues/05/ 01/ASPNETPerformance/default.aspx CSS Sprites: Image Slicings Kiss of Death http://www.alistapart.com/articles/sprites/ IIS 7.0: Optimize IIS Performance http://technet2.microsoft.com/windowsserver20 08/en/library/d0de9475-0439-4ec1-8337- 2bcedacd15c71033.mspx?mfr=true

51 Caching in HTTP http://www.w3.org/Protocols/rfc2616/rfc2616- sec13.html Windows Script 5.7 released for Windows 2000, Windows XP and Windows 2003 Server http://blogs.msdn.com/jscript/archive/2007/08/1 2/windows-script-5-7-released-for-windows- 2000-windows-xp-and-windows-2003- server.aspx

52 How to Modify the Cache-Control HTTP Header When You Use IIS http://support.microsoft.com/default.aspx?scid= kb;en-us;247404 How to cache in ASP.NET by using Visual C#.NET http://support.microsoft.com/default.aspx?scid= kb;en-us;323290 How to configure Internet Explorer to have more than two download sessions http://support.microsoft.com/kb/282402/en-us

53 HTTP/1.1 Cache Control http://www.w3.org/Protocols/rfc2616/rfc2616- sec14.html#sec14.9 ASP.NET Caching http://msdn2.microsoft.com/en- us/library/xsbfdd8c.aspx Caching Portions of an ASP.NET Page http://msdn2.microsoft.com/en- us/library/h30h475z.aspx

54 High Performance Web Sites, Steve Souders, O'Reilly, ISBN-13: 978-0-59- 652930-7 Building a Web 2.0 Portal with ASP.NET 3.5, Omar Al Zabir, O'Reilly, ISBN-13: 978-0-59- 651050-3

55 Fiddler Web Debugging Proxy http://www.fiddler2.com Fiddler PowerToy - Part 2: HTTP Performance http://msdn2.microsoft.com/en- us/library/bb250442.aspx Web Development Helper http://projects.nikhilk.net/Projects/WebDevHelp er.aspx Firebug http://www.getfirebug.com

56 Internet Explorer Developer Toolbar http://www.microsoft.com/downloads/details.as px?familyid=E59C3964-672D-4511-BB3E- 2D5E1DB91038&displaylang=en YSlow http://developer.yahoo.com/yslow/ JScript Performance Update for IE6 users (Windows Script 5.7) http://blogs.msdn.com/jscript/archive/2007/11/2 9/jscript-performance-update-for-ie6- users.aspx

57 JSMin http://crockford.com/javascript/jsmin.html ShrinkSafe http://dojotoolkit.org/docs/shrinksafe

58 © 2007 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.