Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Daniel Walzenbach Developer Evangelist Microsoft Deutschland GmbH.

Ähnliche Präsentationen


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: Bytes Received:

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


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 :00:00 GMT Zeit zwischen Server und Client muss synchron sein

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 vorziehen Stylesheets mit einem Link Tag in den Document einfügen!

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 Konfiguration IE: Registry FF: about:config

24 Komponenten auf zwei Hostnamen verteilen (CNAME(Alias auf DNS))

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

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 { "@context": "http://schema.org", "@type": "ImageObject", "contentUrl": "http://images.slideplayer.org/903427/3/slides/slide_38.jpg", "name": "function IterateWorkOverCollection() { var funcWork = Work; var length = myCollection.getItemCount(); for(var index = 0; 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: Bytes Received: html: Byte Nachfolgende Zugriffe Request Count: 3 Bytes Sent: Bytes Received: html: Byte

47 Performance issues with "String Concatenation" in JScript. 7/performance-issues-with-string- concatenation-in-jscript.aspx Eval is Evil, Part One 11/01/53329.aspx Using undefined variables in JScript 05/04/ aspx

48 IE + JavaScript Performance Recommendations aspx javascript-performance-recommendations-part- 2-javascript-code-inefficiencies.aspx -jscript-performance-recommendations-part-3- javascript-code-inefficiencies.aspx

49 ASP.NET AJAX Online Documentation efault.aspx Yahoo developer network: Best Practices for Speeding Up Your Web Site html 14 Rules for Faster-Loading Web Sites (Demos)

50 10 Tips for Writing High-Performance Web Applications 01/ASPNETPerformance/default.aspx CSS Sprites: Image Slicings Kiss of Death IIS 7.0: Optimize IIS Performance 08/en/library/d0de ec bcedacd15c71033.mspx?mfr=true

51 Caching in HTTP sec13.html Windows Script 5.7 released for Windows 2000, Windows XP and Windows 2003 Server 2/windows-script-5-7-released-for-windows windows-xp-and-windows server.aspx

52 How to Modify the Cache-Control HTTP Header When You Use IIS kb;en-us; How to cache in ASP.NET by using Visual C#.NET kb;en-us; How to configure Internet Explorer to have more than two download sessions

53 HTTP/1.1 Cache Control sec14.html#sec14.9 ASP.NET Caching us/library/xsbfdd8c.aspx Caching Portions of an ASP.NET Page us/library/h30h475z.aspx

54 High Performance Web Sites, Steve Souders, O'Reilly, ISBN-13: Building a Web 2.0 Portal with ASP.NET 3.5, Omar Al Zabir, O'Reilly, ISBN-13:

55 Fiddler Web Debugging Proxy Fiddler PowerToy - Part 2: HTTP Performance us/library/bb aspx Web Development Helper er.aspx Firebug

56 Internet Explorer Developer Toolbar px?familyid=E59C D-4511-BB3E- 2D5E1DB91038&displaylang=en YSlow JScript Performance Update for IE6 users (Windows Script 5.7) 9/jscript-performance-update-for-ie6- users.aspx

57 JSMin 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.


Herunterladen ppt "Daniel Walzenbach Developer Evangelist Microsoft Deutschland GmbH."

Ähnliche Präsentationen


Google-Anzeigen