Javascript schneller machen?
0 0 0 0 
Felix Riesterer
0 Martin F.
0 
JürgenB
Javascript schneller machen?
StruppiHey zusammen,
ich verwende, damit ich mich in meinen Scripts auskenne, ausführliche und beschreibende Namen für Variablen und Funktionen. Jetzt könnte man natürlich, wenn man anstatt oImageUploadButton einfach oIUB schreibt, eine ganze Menge Platz sparen. Sicher ließe sich so die reine Textmenge eines Javascripts auf die Hälfte verringern. Meine Frage:
Wirkt sich die reine Textmenge eines umfangreichen Javascripts merklich auf die Ladezeit aus? Kann ich die Ladezeit relevant verkürzen, indem ich die Textmenge reduziere (auf Kosten der Verständlichkeit)?
Und überhaupt: Was muss man beachten, um Javascripts schneller zu machen?
Für alle Tips dankbar
Martin
-
Hi,
Und überhaupt: Was muss man beachten, um Javascripts schneller zu machen?
ich habe mal ein paar DHTML-Menüs analysiert. Da werden dann tatsächlich oft kürzeste Variablennamen genutzt und Zeilenumbrüche vermieden. Zudem wird angeregt bei der Auslieferung die Kommentare zu entfernen.
Im Zeitalter von Breitband und Pentium 4 würde ich aber nicht unbedingt zu diesem fine tuning raten. Es sei denn Du hast einen [b]guten[/b] Grund, also z.B. Kunden mit 8k-Leitung und grosse JS-files.
Loge
-
Danke Leute!
Noch ne Frage, vielleicht weiß das wer:
Wenn ich einen Haufen Buttons habe, die alle was tun, dann habe ich, wie mir scheint, 4 Möglichkeiten:
1:
-------------------<head>
<script>
function tuWas(){
tuDies();
tuDas();
tuNochwas();
}
</script>
</head><body>
<input type = "button" onClick = "tuWas()">
</body>--------------------
2:
--------------------
<head>
<script>window.onload = function(){
document.getElementById("idKnopf").onclick = tuWas;
}function tuWas(){
tuDies();
tuDas();
tuNochwas();
}</script>
</head><body>
<input type = "button" id="idKnopf">
</body>--------------------
3:
--------------------
<head>
<script>window.onload = function(){
document.getElementById("idKnopf").onclick = tuWas;function tuWas(){
tuDies();
tuDas();
tuNochwas();
}
}</script>
</head><body>
<input type = "button" id="idKnopf">
</body>--------------------
4:
--------------------
<head>
<script>window.onload = function(){
document.getElementById("idKnopf").onclick = function(){
tuDies();
tuDas();
tuNochwas();
}
}</script>
</head><body>
<input type = "button" id="idKnopf">
</body>--------------------
Gibt's da einen Unterschied in der Performance?
Gibt's einen Unterschied zwischen 2 und 3?
Wird in jedem Fall die ganze Funktion mit allen Unterfunktionen gleich in das Objekt geschrieben, wie das bei 4 der Fall sein müsste, oder wird etwa in 2 oder in 3 nur ein Verweis in das Objekt geschrieben und die Funktion erst geholt, wenn der Event eintritt?
Ist es so, dass 2 oder 3 schneller laden würde als 4, und dafür beim Anklicken des Buttons etwas länger brauchen würde, oder ist das wurscht?
Ich hoffe, ich kann mich verständlich machen.
Gruß
Martin
-
hi,
Gibt's da einen Unterschied in der Performance?
Ich würde auch hier wieder vermuten: Keinen, den irgendjemand bemerkt.
Gibt's einen Unterschied zwischen 2 und 3?
Ja.
function innerhalb von function ist logischerweise etwas anderes, als jede function einzeln.
Näheres im Feature-Artikel zum Objekt-Handling in JavaScript.Wird in jedem Fall die ganze Funktion mit allen Unterfunktionen gleich in das Objekt geschrieben, wie das bei 4 der Fall sein müsste, oder wird etwa in 2 oder in 3 nur ein Verweis in das Objekt geschrieben und die Funktion erst geholt, wenn der Event eintritt?
Die Funktion wird auf jeden Fall irgendwo als eigenes Objekt vorgehalten.
"Ins Objekt geschrieben" wird sie m.E. nicht - lediglich der Eventhandler des Objektes enthält die Referenz darauf.Ist es so, dass 2 oder 3 schneller laden würde als 4, und dafür beim Anklicken des Buttons etwas länger brauchen würde, oder ist das wurscht?
Ich denke immer noch, von der Performance her ist es "wurscht", welche der vier Möglichkeiten du wählst.
Event auslösen, und Handler-Funktion "suchen" und aufrufen dürfte in jedem Fall nur minimal Zeit kosten.
Falls dein Script einen Flaschenhals haben sollte, dann wäre der sicher eher innerhalb der Funktion bzw. dem, was sie tut, zu suchen.gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; } -
Gibt's da einen Unterschied in der Performance?
Wieviel Millisekunden willst du denn sparen?
Arbeitest du mit oder für 383'er Rechner? Da liesse sich u.U. noch etwas rausholen. Ansonsten ist das was du hier fabrizierst erstmal völlig belanglos (ausser dass du ungültiges HTML ausgibst)Hier http://homepage.mac.com/rue/JS_Optimization_Techniques/ findest du ein paar Tipps (auch wie du die Performance messen könntest)
Struppi.
-
Hi,
Gibt's da einen Unterschied in der Performance?
Wieviel Millisekunden willst du denn sparen?
Arbeitest du mit oder für 383'er Rechner?habe kürzlich noch einen auf einem 386er laufenden Webserver gesehen. Kann natürlich auch sein, dass er http://www.386er.de (mit entsprechender Klientel) betreut. Hmm, eher nicht, www.386er.de scheint noch frei zu sein. Sicherlich ein Schnäppchen!
MFG
Hans X-
Wieviel Millisekunden willst du denn sparen?
Arbeitest du mit oder für 383'er Rechner?habe kürzlich noch einen auf einem 386er laufenden Webserver gesehen.
ein Webserver braucht nicht unbedingt mehr Resourcen als ein Browser, der JS unterstützen soll.
Obwohl es durchaus Programme gab, auch mit GUI, mit denen man zumindest ab den 386ern arbeiten konnte. Meinen ersten Browser hab ich aber erst mit einem 486er benutzt und der konnte JS (Netscape 2), wobei ich mich nicht daran erinnere das es dort außergewöhnliche Performanceprobleme gab.
Struppi.
-
-
-
-
-
hi,
Wirkt sich die reine Textmenge eines umfangreichen Javascripts merklich auf die Ladezeit aus?
Definiere "merklich".
Dürfte wohl wesentlich auf das Verhältnis von "Overhead" (Kommentare, "lange" Variablenamen, ...) zu reinem "Scriptinhalt" ankommen.
In Zeiten von DSL vermutlich aber kaum relevant.Kann ich die Ladezeit relevant verkürzen, indem ich die Textmenge reduziere (auf Kosten der Verständlichkeit)?
Da dürfte es eher was bringen, wenn du deinem Server beibringst, auch Javascript-Dateien komprimiert auszuliefern - gzip z.B. kann bei reinen Textdateien m.W. schon mal das Datenvolument um gut ein Drittel bis die Hälfte verringern.
Kostet natürlich beim Packen auf dem Server und Wieder-Auspacken auf dem Client ebenfalls Rechenzeit - bei heutiger Technik aber ebenfalls zu vernachlässigen.Und überhaupt: Was muss man beachten, um Javascripts schneller zu machen?
Um die Abarbeitung zu beschleunigen: Performant Programmieren :-)
Lange Variablennamen etc. dürften sich dabei aber kaum negativ auswirken - das dürfte nicht mal messbar sein.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga.
Lange Variablennamen etc. dürften sich dabei aber kaum negativ auswirken - […]
Zudem machen sie den Code lesbarer, was auf jeden Fall dafür spricht.
Einen schönen Dienstag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
mathbr:del.icio.us/ mathbr:w00t/ -
Lieber wahsaga,
Da dürfte es eher was bringen, wenn du deinem Server beibringst, auch Javascript-Dateien komprimiert auszuliefern - gzip z.B.
nach meinen Erfahrungen mit dem gzip-Kompressor des TinyMCE bin ich etwas vorsichtig geworden, was die Komprimierung von Javascript-Files angeht, da anscheinend manche veraltete(tm) Browser damit ihre Probleme haben.
Liebe Grüße aus Ellwangen,
Felix Riesterer.
-
Moin,
gzip z.B. kann bei reinen Textdateien m.W. schon mal das Datenvolument um gut ein Drittel bis die Hälfte verringern.
Tschau,
Martin
-
-
Hallo Martin,
wenn es dir um Traffic bzw. Ladezeit geht, da gibt es Tools (z.B. http://www.download-tipp.de/shareware_und_freeware/11433.shtml, die die Scripte verkleinern, indem sie alle Kommentare, Leerzeichen und Umbrüche entfernen. Zusätzlich werden alle Variablen- und Funktionsnamen durch Kürzel ersetzt. Dieses hat gleichzeitig zur Folge, dass die Script unlesbar werden und so kaum "geklaut" werden können. Du behältst also dein gut strukturiertes Original, ausgeliefert wird aber ein einzeiliges Kauderwelsch.
Wenn es um Laufzeitoptimierung geht, wird die Sache schon schwieriger. Eine Regel ist, wenn möglich in Schleifen nicht auf Arrays, Objekte, DOM-Elemente o.Ä. zuzugreifen. Also z.B. statt:
for(i=0;i<document.getElementsByTagName("p");i++) x[i]=document.getElementByTagName("p")[i].firstChild.nodeValue;besser
p=document.getElementsByTagName("p"); l=p.length; for(i=0;i<l;i++) x[i]=p[i].firstChild.nodeValue;Am besten ist natürlich ein optimierter Algorithmus. Leider gibt es für Javascript keine hochoptimierenden Compiler oder Precompiler wie z.B. für Fortran oder C.
Gruß, Jürgen