Prestandaanalys av JavaScript

En presentation över ämnet: "Prestandaanalys av JavaScript"— Presentationens avskrift:

1 Prestandaanalys av JavaScript
Presentera dig. Säga något om varför examensarbetet gjordes hos Opera Software, vad det företaget sysslar med lite osv. Att hela arbetet förstås inte kan presenteras på ca 30 minuter utan att det blir en vald del av det. Berätta kort exakt vad du gjort. Du har jämfört C++ med Java Examensarbete utfört av Fredrik Smedberg

2 Prestandaanalys av JavaScript
Presentationens upplägg Vad är JavaScript? Varför är språket viktigt? Historisk utveckling Min frågeställning Avgränsningar Metod Resultat Slutsats Frågor? Berätta kort vad varje del kommer gå in på och förklara att frågor kan ställas under presentationen eller efteråt. 2 av 22

3 Prestandaanalys av JavaScript
Vad är JavaScript? – Språkets födelse Netscape anställde Brendan Eich, 1995 Mocha -> LiveScript -> JavaScript Microsoft JScript, Internet Explorer 3 ECMAScript AJAX Gmail Hitta.se Förklara historiken lite kort. Att Brendan Eich rekryterades till Netscape (senare Mozilla Foundation) för att designa ett scriptspråk för webben. Java var på uppgång under denna tid så man ville designa något eget. Språket döptes därför lite senare till 3 av 22

4 Prestandaanalys av JavaScript
Vad är JavaScript? – Design Multi-paradigm Prototype-baserat (avsaknad av klasser) Imperativt Funktionellt Scriptspråk Dynamiskt Likheter med C (syntaxen) Self och Scheme (designprinciper) Men även Java, Perl och Python Prototype-baserat innebär att klasser saknas och istället klonas objekt som får fungera som prototyp för det nya objektet. 4 av 22

5 Prestandaanalys av JavaScript
Vad är JavaScript? – Design Körs i virtuell maskin Utseende /* Finds the lowest common multiple of two numbers */ function LCMCalculator(x, y) { // constructor function function checkInt(x) { // inner function // exception throwing if (x % 1 != 0) throw new TypeError(x + " is not an integer"); return x; } // semicolons are optional (but beware since this may cause // consecutive lines to be erroneously treated as a single // statement) this.a = checkInt(x) this.b = checkInt(y) Körs i virtuell maskin vilket innebär att koden inte är kompilerad. Den tolkas, görs om till bytecode och eventuell maskinkod vid körning. Nämn att koden du visar inte på något vis är komplett och att den enbart visar ett exempel på hur funktioner skapas, hur kommentarer ser ut, hur man helt rakt på kan skapa undervariabler som .a eller .b på ett objekt m m. 5 av 22

6 Prestandaanalys av JavaScript
Varför är språket viktigt? Ökad användning Internet har spridit sig Internetanvändningen uppgår idag till ungefär 1,7 miljarder användare (2009), enligt Milliwatts Marketing Group. Förutom ökad användning generellt så har accessen spridit sig från vanliga datorer till tv-spel, handdatorer, mobiltelefoner, tv-apparater m m. 6 av 22

7 Prestandaanalys av JavaScript
Varför är språket viktigt? Adobes Flash (ej standard) Suns (Oracles) Java (halvstandard) Microsofts Silverlight (ej standard) HTML5 (blivande standard) Förklara skillnaderna här, för det kan nog vara svårt att förstå för de som inte är insatta. Den poäng till föra fram är att Adobe, Sun och Microsoft helt själva kontrollerar sina teknologier medan HTML5 arbetas fram i standardiseringsgrupper. Förklara också att JavaScript är det som möjliggör all interaktivitet i webbläsaren mellan vektorgrafik (SVG), video- och ljudtaggarna i HTML5, CSS-effekter m m. Om HTML5 blir standard i alla webbläsare återstår att se, och mycket hänger på Microsoft här. Men med lite tur kanske irriterande Flash-banner-reklam snart är historia. 7 av 22

8 Prestandaanalys av JavaScript
Historisk utveckling Förklara lite snabbt vad som hänt hastighetsmässigt från 2001 till Att Apples iPhone förändrade prestandan dramatiskt och startade ett webbläsarkrig. Säg något kort om att alla versioner naturligtvis inte tagits med. 8 av 22

9 Prestandaanalys av JavaScript
Min frågeställning Har prestandan påverkats? Har koden blivit lättare att förstå? Rader kod Återanvändbarhet Minnesläckor Vilka utvecklingsverktyg finns och hur påverkas de utvecklingen? Var och när är det motiverat att använda JavaScript? Hur ofta används den kod jag skrivit om? Förtydliga återigen att det är C++ kod som skrivits om till JavaScript. Förklara lite kort om vad varje fråga i praktiken innebär. 9 av 22

10 Prestandaanalys av JavaScript
Avgränsningar Vad tittade jag på? Hur prestandan påverkas Mängd kod och hur den påverkar läsbarheten Minnesläckor Portabilitet och återanvändbarhet Översiktlig genomgång av utvecklingsverktyg Hur ofta skriven kod används Endast C++ och JavaScript jämfördes Exempel på vad jag inte tittade på Förtydliga vad som var rimligt att titta på, vad som inte hanns med m m. Prestandan: CPU, minne, responsivitet (C++ vs JS), parallellexekvering Exempel på vad jag inte tittade på: Mac OS X utvecklingsverktyg, produktivitet baserat på val av språk, optimal design av programvarorna som t ex att skriva programmen optimalt för respektive språk. Här krävs nog en viss förklaring varför. Dvs att anledningen var för att de flesta som kodar inte skriver optimalt, många är amatörer och deras kodstil måste JavaScript-motorer kunna hantera effektivt. 10 av 22

11 Prestandaanalys av JavaScript
Metod Litteratur och akademiska papper Identifierade lämpliga uppgifter att implementera GIF-dekoder XML-parser Elementära tester JPEG-encoder Industriella benchmarks Förklara lite kort om vad andra akademiska papper sagt. Speciellt Microsoft och Sun. 11 av 22

12 Prestandaanalys av JavaScript
Metod – GIF-dekoder Vad är en GIF-dekoder? En C++-version, fyra versioner skrivna i JavaScript Svårigheten med att implementera en GIF-dekoder i JavaScript Varför GIF-dekoder? Berätta att JavaScript saknar ByteArrayer så olika tekniker får användas för att hyfsat smärtfritt kunna porta C++ kod till språket, alternativt skriva en dekoder från scratch. Tekniker man kan använda beror på JavaScript-motorn och dess prestanda. Vissa motorer är hyfsat likvärdigt snabba på arrayer och strängar, medan andra är snabbast på strängar. En JPEG-encoder som jag jämförde med hade provat att även använda Canvas-objektet (objektet man kan rita i) för att lagra bilddata. Visade sig dock trögt pga overhead i och med hoppet mellan DOM-miljön (HTML) och JavaScript. En annan svårighet var faktumet att JavaScript inte kan läsa filer direkt från disk, så bilderna fick lagras på något vis i JavaScript-koden. Jag använde Base64. Berätta lite om bilderna och hur du nyttjade ASCII-art för att rita den till vänster. 12 av 22

13 Prestandaanalys av JavaScript
Metod – GIF-dekoder Dekoderns olika steg Rå data Header Färg-tabell LZW-block Förklara hur bildformatet ungefär hänger ihop. 13 av 22

14 Prestandaanalys av JavaScript
Metod – XML-parser Dekoda en slags XML C++-dekoder JavaScript-dekoder baserad på C++-versionen Skrev ny JavaScript-dekoder baserad på regular expressions Varför XML-parser? Förklara punkterna och framförallt att XML:en visade sig råsnabb att parsa när regular expressions användes. 14 av 22

15 Prestandaanalys av JavaScript
Metod – Elementära tester Varför elementära tester? Exempel Hashalgoritmer Sortering Matrisberäkningar Funktionsanrop Nästlade loopar Strängkonkatenering Berätta att testerna togs med för att kunna jämföra dom mot industriella benchmarks. Industriella benchmarks säger egentligen bara hur det står till med prestandan mellan olika webbläsare men inte hur det är jämfört mot t ex C++-program. 15 av 22

16 Prestandaanalys av JavaScript
Resultat – GIF-dekoder Berätta varför Internet Explorer ej togs med (saknade Canvas) och att prestandan mellan de fyra webbläsare som togs med var hyfsat likvärdig bortsett från Firefox. Förklara felmarginalerna. 16 av 22

17 Prestandaanalys av JavaScript
Resultat – Minnesanvändning Nämn vad Google Closure Compiler är och vad While-loop och Base64 är. Hur bilderna liksom har tvingats lagras. 17 av 22

18 Prestandaanalys av JavaScript
Resultat – XML-parser I detta test kunde IE tas med eftersom den har allt som behövdes. Förklara vad C++-testet innebär och hur felmarginalerna ska tolkas. 18 av 22

19 Prestandaanalys av JavaScript
Resultat – JPEG-encoder Poängtera hur snabb Opera visade sig vara här. 19 av 22

20 Prestandaanalys av JavaScript
Resultat – Annat Rader kod? Responsivitet? Industriella benchmarks? Internet Explorer? När ett program skrevs i JavaScript blev antalet rader kod runt 50-75% av C++-koden. Dvs hälften så mycket kod krävdes men i gengäld fick man ofta hälften av prestandan. 20 av 22

21 Prestandaanalys av JavaScript
Slutsats JavaScript är snabbt! Det går skapa de flesta program med fullgod prestanda En stor nackdel är minnesförbrukningen En kod kan köras på många platformar Kräver mindre rader kod Internet Explorer är en stor flaskhals Utvecklingsverktyg? Det är snabbt, ungefär 0.5x mot C++, men saknar än så länge 3D-möjligheter. Detta håller dock på att standardiseras i form av WebGL. Troligen är det dock långt kvar innan användning av joysticks och andra extraverktyg till datorn möjligen kan stödjas av JavaScript. Förklara extratydligt varför det är så bra med en kod som går köra överallt. Att man inte behöver bry sig om operativsystem m m. 21 av 22

22 Prestandaanalys av JavaScript
Frågor? 22 av 22