Performance

Performance
Bedarf an Zeit, Speicher, Netz
und anderen Ressourcen
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
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
Statistik
O Anzahl Aufrufe
O Kumulierte Zeit
O Mittlere, maximal, minimal Zeit
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
2
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
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
3
Bedeutung
Bisher: Javascript Performanz egal
O Nur kleines Code Schnippsel für kleine Aufgabe
O Lebensdauer nur Lesedauer einer Web-Seite
Neu: Javascript Performanz wichtig, denn
O Komplette Anwendung in Javascript
O Höhere Verweildauer des Users auf der Seite
O Verlust von hohem Datenbestand des Users
O Signifikante Rate von Transaktionen auf der Seite
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
4
Zeitmessung (3)
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
5
Optimierung
Klassische Optimierung
wie bei allen anderen Sprachen auch
O Bei compilierten Sprachen vieles vom Compiler gemacht;
hier: nichts vom Compiler gemacht – Programmierer muß einspringen
O Loop invarianten Code vor die Loop stellen
O Loop Unrolling
O Expression Minimization
O Dot Minimization
Ajax spezifische Optimierung
O Late DOM Attachment
O Minimiere Anzahl Server-Calls
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
6
Late DOM Attachment
Jede Änderung der DOM bewirkt Anstoßen von Browser Layout Mechanismen
Spezielle Probleme:
O Verschachtelte Strukturen
O Relativ positionierte Objekte
O Hinzuzufügende Attribute
Lösung:
Late DOM Attachment
O Neuen DOM Knoten vollständig aufbauen
O Erst jetzt in document Objekt einbauen
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
7
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
var
var
var
hands = app.clock.hands;
h = hands.hour;
m = hands.minute;
s = hands.second;
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
8
Expression Minimization
Cachen von shared subexpressions
Normal: Compiler als Teil der Datenfluß-Analyse und Register-Allokation
Hier:
O Interpretiert
O Keine Datenfluß-Analyse oder Register-Allokation
O 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;
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
9
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:
O Bsp:
O Problem:
O
Lösung:
Unsichtbar machen – Removal by Hiding (=unlink on hide)
Via CSS Attribut
Node bleibt in DOM bestehen (Node Leak)
Anwendung erzeugt immer neue Nodes
Gefahr multipler Nodes mit identischem ID Attribut
Nicht immer neu generieren, reuse sicherstellen
Create Funktion in Create-if-not-exists-else-reuse Semantik
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
10
DOM Node Leak (1)
Antwort 2:
Bsp:
Problem:
Lösung:
Besser:
Aus DOM entfernen – Removal by Detachment
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
http://outofhanwell.com/ieleak/index.php?title=Main_Page
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
11
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:
O Objekt nicht nur zirkuläre JS Objekt Referenz, auch Teil der DOM Hierarchie
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
12
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 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
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
13
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 128.
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
14
Zirkuläre Referenzen (3)
<body>
Beispiel
für Closure Bildung
<div class='menu-bar' id='myMenu'></div>
<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 Definitionszeitpunkt
Dieser enthält menu
menu verweist auf div
Diese zirkuläre Referenz
wird vom Explorer nicht aufgelöst
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
15