Clemens H. Cap Bedarf an Zeit, Speicher, Netz und anderen Ressourcen

Transkript

1 Performance Bedarf an Zeit, Speicher, Netz und anderen Ressourcen

2 Lernziel Warum ist Performance bei Ajax so wichtig? Was sind die Fallen bei Ajax Programmierung? Welche Werkzeuge gibt es? Ausgewählte Beispiele 2

3 Bedeutung Bisher: Javascript Performanz egal Nur kleines Code Schnippsel für kleine Aufgabe Lebensdauer nur Lesedauer einer Web-Seite Neu: Javascript Performanz wichtig, denn Komplette Anwendung in Javascript (ganzes "Word"!) Höhere Verweildauer und Interaktionshäufigkeit des Users auf der Seite Verlust von hohem Datenbestand des Users Signifikante Rate von Transaktionen auf der Seite 3

4 Zeitmessung (1) Variante 1: Einfache Zeitmessung mit Date Objekt var start = new Date(); do some work var stop = new Date(); var diff = stop start; // ergibt Zeit in ms Variante 2: Kategoriell sortierte Zeitmessung Javascript Objekt, das zu unterschiedlichen IDs Zeitwerte nimmt start (id); // startet timer zur id stop (id); // stoppt timer zur id show (id); // gibt kumulierte Statistik aus Statistikti tik Anzahl Aufrufe Kumulierte Zeit Mittlere, maximal, minimal Zeit 4

5 Zeitmessung (2) Variante 3: Zeitmessung in Profiler Gutes Werkzeug: Venkman Debugger Bietet Möglichkeit, Profile Daten mitzuschreiben Anschließend unter "File" speichern Formate: XML, HTML, TXT, CVS Liefert hochdetailliertes Calling Profile 5

6 Zeitmessung (3) mit dem Venkman 6

7 Optimierung 1. Klassische Optimierung Wie bei allen anderen Sprachen auch Bei compilierten Sprachen vieles vom Compiler gemacht; hier: nichts vom Compiler gemacht Programmierer muß einspringen Bsp: Loop invarianten Code vor die Loop stellen Bsp: Loop Unrolling Bsp: Expression Minimization Bsp: Dot Minimization 2. Ajax spezifische Optimierung Late DOM Attachment Minimiere i i Anzahl Server-Calls Mögliche Ziele Space Optimierung Time Optimierung 7

8 Minimize DOT Notation Beachte: Jeder Zugriff erfolgt interpretiert var h = app.clock.hands.hour; var m = app.clock.hands.minute; var s = app.clock.hands.second; var hands = app.clock.hands; var h = hands.hour; var m = hands.minute; var s = hands.second; 8

9 Expression Minimization Cachen von shared subexpressions Normal: Compiler als Teil der Datenfluß-Analyse und Register-Allokation Hier: Interpretiert Keine Datenfluß-Analyse oder Register-Allokation Scripting Philosophie eines "kleinen" Scripts kollidiert mit größerer Ajax Anwendung var a = (b + c)*(b + c) + 3*(b + c); var x = b + c; var a = x * x + 3 * x; 9

10 Late DOM Attachment Jede Änderung der DOM bewirkt Anstoßen von Browser Layout Mechanismen Spezielle Probleme: Verschachtelte Strukturen Relativ positionierte Objekte Hinzuzufügende Attribute Lösung: Late DOM Attachment Neuen DOM Knoten vollständig aufbauen Late DOM Attachment t ist die Erst jetzt in document Objekt einbauen eine wesentliche Optimierung die jeder kennen & nutzen muß 10

11 Minimiere Anzahl Server Calls HTTP ist langsam da je HTTP eine TCP-Verbindung mit 3-way Handshake Aber: Auch stay-alive Verbindungen möglich Browser limitiert Anzahl paralleler Verbindungen jede einzelne Verbindung kann in Congestion hängenbleiben Ansatz: Minimiere Anzahl Server Calls Nur eine CSS Datei Nur eine JS Datei CSS und JS als HTML Inline-Konstrukt Aber: Dann kein Caching mehr möglich Merging von CSS in JS Bilder und Objekte via data: URL einbetten Aber: Dann keine Wiederverwendung einer Datei sondern replizierte Einbettung 11

12 DOM Node Leak (1) Frage: Wie entferne ich für den User einen Teil eines Dokuments Bsp: Kleines Info-Panel, das immer wieder ein- und ausgeblendet wird Antwort 1: Bsp: Via CSS Attribut Unsichtbar machen Removal by Hiding (=unlink on hide) Problem: Node bleibt in DOM bestehen (Node Leak) Anwendung erzeugt immer neue Nodes Gefahr multipler Nodes mit identischem ID Attribut Lösung: Nicht immer neu generieren, reuse sicherstellen Create Funktion in Create-if-not-exists-else-reuse Semantik 12

13 DOM Node Leak (2) Antwort 2: Aus DOM entfernen Removal by Detachment Bsp: Problem: Lösung: Besser: replacechild, removechild Funktionen der DOM API Hoffe, daß ein Garbage Collector sich darum kümmert Das tut er vermutlich auch Analoger Reuse Ansatz wie zuerst Dazu: Node statt in Dokument in DOM Node Pool "parken" Drip Tool von J. Webber für DOM Leak Messung bei Explorer 13

14 Zirkuläre Referenzen (1) Zirkuläre Referenzen sind klassisches Problem für manche Garbage Collectors Beispiel: Javascript DOM Zirkulärreferenz function MyOb (id) { this.id = id; this.front = document.createelement ("div"); this.front.backingobj = this; } Problem: Objekt nicht nur zirkuläre JS Objekt Referenz, auch Teil der DOM Hierarchie 14

15 Zirkuläre Referenzen (2) Lösen zirkulärer Referenzen über Finalizer Methoden Explizites Aufrufen durch Programmierer erforderlich MyOb.prototype.finalize = function () { this.front.backingobj = null; this.front = null; } Mark-and-Sweep and GC: Reference Counting: Räumt auch zyklischen Müll weg Probleme mit zyklischem Müll Unklar, wie jeweilige Implementierung aufgebaut ist Beides wird gefunden, teilweise auch mit diversen Bugs 15

16 Zirkuläre Referenzen (3) function AddFive(x) {return x + 5;} function AddTen(x) {return x + 10;} var MyFunc; if (whatever) {MyFunc = AddFive;} else {MyFunc = AddTen;} print(myfunc(123)); // Either 133 or 128 Beispiel für Closure Bildung function AdderFactory(y) {return function(x){return x + y;}} var MyFunc; if (whatever) {MyFunc = AdderFactory(5);} else {MyFunc = AdderFactory(10);} print(myfunc(123)); // Either 133 or

17 Zirkuläre Referenzen (4) <body> Beispiel <div class='menu-bar' id='mymenu'></div> für Closure Bildung <script language='javascript'> var menu = document.getelementbyid('mymenu'); function AttachEvent(element) { element.attachevent( "onmouseover", mousehandler); function mousehandler(){ /* whatever */ } } AttachEvent(menu); </script></body> div hat eine Referenz auf mousehandler mousehandler hat als closure Referenz auf Scope zu Definitionszeitpunkteitp nkt Dieser enthält menu menu verweist auf div Diese zirkuläre Referenz wird vom Explorer nicht aufgelöst 17