Performance

Performance
Bedarf an Zeit, Speicher, Netz
und anderen Ressourcen
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
Lernziel
O
Warum ist Performance bei Ajax so wichtig?
O
Was sind die Fallen bei Ajax Programmierung?
O
Welche Werkzeuge gibt es?
O
Ausgewählte Beispiele
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
2
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 (ganzes "Word" !)
O Höhere Verweildauer und Interaktionshäufigkeit 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
3
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
St
ti tik
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
4
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
5
Zeitmessung (3)
mit dem Venkman
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
6
Optimierung
1 Klassische Optimierung
1.
O Wie bei allen anderen Sprachen auch
O Bei compilierten Sprachen vieles vom Compiler gemacht;
hier: nichts vom Compiler gemacht – Programmierer muß einspringen
O Bsp: Loop invarianten Code vor die Loop stellen
O Bsp: Loop Unrolling
O Bsp: Expression Minimization
Mögliche Ziele
Space Optimierung
O Bsp: Dot Minimization
g
Time Optimierung
2. Ajax spezifische Optimierung
O Late DOM Attachment
O Minimiere
Mi i i
A
Anzahl
hl S
Server-Calls
C ll
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
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
Late
ate DOM
O Attachment
ttac
e t ist
st d
die
e
eine wesentliche Optimierung
die jeder kennen & nutzen muß
10
Minimiere Anzahl Server Calls
HTTP ist langsam da
O je HTTP eine TCP-Verbindung mit 3-way Handshake
Aber: Auch stay-alive Verbindungen möglich
O Browser limitiert Anzahl paralleler Verbindungen
O jede einzelne Verbindung kann in Congestion hängenbleiben
Ansatz: Minimiere Anzahl Server Calls
O Nur eine CSS Datei
O Nur eine JS Datei
O CSS und JS als HTML Inline-Konstrukt
Aber: Dann kein Caching mehr möglich
O Merging
M i von CSS iin JS
O Bilder und Objekte via data: URL einbetten
Aber: Dann keine Wiederverwendung einer Datei sondern replizierte Einbettung
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
11
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
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
12
DOM Node Leak (2)
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.
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
13
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
14
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:
Mark-and-Sweep
Reference Counting:
Räumt auch zyklischen Müll weg
Probleme mit zyklischem Müll
Unklar,
U
kl wie
i jeweilige
j
ili Implementierung
I
l
ti
aufgebaut
f b t ist
i t
Beides wird gefunden, teilweise auch mit diversen Bugs
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
15
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
l
{M
{MyFunc
F
= Add
AdderFactory(10);}
F t
(10) }
print(MyFunc(123)); // Either 133 or 128.
Clemens H. Cap
http://wwwiuk.informatik.uni-rostock.de
http://www.internet-prof.de
16
Zirkuläre Referenzen (4)
<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
H dl hat als closure
clos re Referenz
Referen a
auff Scope zu Definitions
Definitionszeitpunkt
eitp nkt
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
17