wird mit dem Kunden vereinbart, vorzugsweise am Monatsende
Ort:
In den Büroräumen von SpinTag oder vor Ort beim Kunden
Dauer:
2 bis 5 Tage
Kosten:
500 € pro Tag und Teilnehmer (bei mindestens zwei Teilnehmern) zuzüglich Spesen bei Schulungen vor Ort
Inhalt:
Indem mittels Javascript das DOM (Document Object Model) eines Browsers manipuliert wird (DHTML), sind signifikante Performance-Verbesserungen und erhebliche Usability-Steigerungen möglich.
Schwerpunkte:
DOM Manipulation
Client/Server Kommunikation
Performance Tuning
alternative Applikationsparadigmen
Voraus-setzungen:
Die Teilnehmer sollten mit Webtechnologien vertraut sein, mindestens
eine serverseitige Scriptsprache beherrschen und über Basiswissen in Javascript verfügen.
SpinTag hat einige allgemein wichtige und auf dieser
Website immer wieder auftauchende Fachbegriffe aus dem
Internet-Bereich für Sie aufgelistet und beschrieben.
Tabellenmanipulation in verschiedenen Optimierungsschritte
In diesem Artikel wird die schrittweise Optimierung einer Tabellenstrukur gezeigt.
Alle Implementierungsvarianten erfüllen die gleiche Spezifikation:
die Werte der beiden Input-Felder werden ausgelesen und eine Tabelle
der angeforderten Dimension erzeugt!
jede Tabellenzelle enthält die Zeilen- und Spaltenposition als Text mit der Syntax "Zeile:Spalte"
ein mouseover-Effekt soll die Hintergrundfarbe der Tabellenzelle unter dem Cursor einfärben
Tabelle ohne Optimierungen
Diese Version des Tabellengenerierungscodes setzt die Spezifikation relativ geradlinig um
und entspricht in etwa dem HTML-Code den eine serverseitige Implementierung generieren würde.
Zeilen: Spalten:
Tabelle mit Array/join()-Trick
Inbesondere der IE hat erhebliche Probleme beim Zusammenfügen von relativ großen Strings.
Deshalb wird in dieser Variante ein Array von vielen kleinen Stringfragmenten erzeugt. Aus diesem Array wird durch eine
join('')-Operation schließlich ein großer String erzeugt.
Zeilen: Spalten:
Tabelle mit Array/join()-Trick und style Property-Manipulation
In dieser Variante wird nicht die className-Property gesetzt, sondern der angestrebte
mouseover-Effekt durch das direkte Setzen der Hintergrundfarbe erreicht.
Zeilen: Spalten:
Tabelle mit Array/join()-Trick, style Property-Manipulation und Event-Bubbling-Trick
In dieser Variante kommen alle vorgenannten Modifikationen und der Event-Bubbling-Trick zum Einsatz.
Einige Events (u.a. onmouseover, onmouseout) werden an die Parent-Nodes weitergereicht, falls sie vorher
nicht abgefangen (konsummiert) werden. D.h. es ist ausreichend ein Eventhandler an das Rootelement zu binden
und dann beim Eventhandling das auslösende Element zu bestimmen. Dadurch kann die Komplexität des DOM Trees deutlich reduziert
werden. Das führt zu einer signifikanten Reduktion des Speicherbedarfes und letztendlich erneut zu einer
Performancesteigerung.
Zeilen: Spalten:
window["showDomTree"] = function (id)
{
getSTFC('domTreeWindow').show();
getById('inlineDomTree').innerHTML = "traversing DOM tree ...";
setTimeout("dumpWin(getById('"+id+"'),'Tree', 'inlineDomTree')", 1);
}
