Etiketter - Optimering

Denna post innehåller en sammanfattning av sessionen ”Tips and Tricks for Building High Performance Web Applications and Sites” från Microsoft Tech Ed 2009 i Berlin.

Giorgio Sardo höll i sessionen som handlade om hur vi kan göra våra webb-2.0-applikationer och webbplatser snabbare. Fokuset låg helt på klientsidan och handlade till stor del om optimering av Javascript och DOM-operationer som står för 33% av CPU-förbrukningen för den genomsnittliga webbplatsen (övrig CPU går till rendering av innehållet).

Sessionen och talaren Giorgio Sardo, som är ”Technical Evangelist” på Microsoft Corporation, kanske var lite smått färgad av just Microsoft men framhöll ändå några intressanta synpunkter och fallgropar man bör tänka på när man utvecklar gränssnitt – oavsett plattform (oroa er inte, jag hade mina GOOGLES på mig).

Några vanliga fallgropar på klientsidan

• CSS - Långa selektorer drar prestanda. Håll dem korta och koncisa.
• CSS - Undvik CSS Expressions.
• JS - Undvik globala variabler om det går.
• JS - Undvik arv med prototyping. JS-motorn måste först leta igenom objektinstansens alla default-properties innan den kan söka vidare efter prototype-funktioner. Det drar prestanda.
• JS - Cacha get/set anropen till DOM genom temporär lagring i lokala variabler.
• JS - Precis som ovan så bör man även cacha återkommande funktionsanrop i lokala variabler.
• JS - Vid användning av setTimeout() bör funktionsanropet göras direkt och inte via en sträng. Strängar som skickas till setTimeout måste exekveras med eval() vilket leder till prestandaförluster.

  
  Exempel - vanligt förekommande:
  setTimeout(”testFunc()”,100);
function testFunc() {alert(’Hello world!’)}

  Exempel - rekommenderad användning:
  setTimeout(function(){testFunc()},100);
function testFunc() {alert(’Hello world!’)}

• JS - for-loopar blir snabbare om de utgår ifrån en lokal variabel med length-värdet istället för att gå direkt mot object.length.
• JS - Iterationer över DOM-element bör göras med while-loopar där nextSibling() styr iterationen. På detta sätt undviker man onödiga uppslagningar mot DOM-objekten.
• JS - IE 8 kommer med en native selector som (enligt Microsoft) går snabbare än jQuerys selector.
• JS - Konkatenering av strängar bör göras genom att pusha strängar till arrayer som i slutändan sammanfogas med join() istället för att addera (var1 + var2) strängar med varandra.

Några intressanta verktyg som togs upp under sessionen

Doloto

Doloto är ett verktyg för att optimera Javascript-filer, inte genom minifiering utan genom klustring av funktioner. Verktyget analyserar vilka funktioner som anropas i runtime och utifrån det resultatet så optimeras koden dels genom uteslutning av överflödig kod och dels genom lazy loading. Det huvudsakliga målet är att reducera väntetiden för en webbsida att laddas in.

Läs mer på http://msdn.microsoft.com/en-us/devlabs/ee423534.aspx

Expressions Web 3 + SuperPreview

Verktyg för att felsöka grafiska skillnader mellan olika versioner av IE(IE6  + IE7 eller IE8) och Firefox. Via en och samma vy kan man göra snabba visuella analyser över vad som skiljer sig åt mellan de olika webbläsarna.

Läs mer på http://blogs.msdn.com/xweb/