Optimierungsprobleme im Zusammenhang mit Javascript-Programmen

Optimierungsprobleme im Zusammenhang mit Javascript-Programmen

Dies sind einige meiner Erfahrungen beim Schreiben von Code. Es gibt keine Reihenfolge, in der ich sie geschrieben habe.

1 Vermeiden Sie die Verwendung globaler Variablen.
Zum Beispiel: 🎜> function test(){
var s = document.getElementById('aaa');
s.innerHTML = document.body.clientHeight;
}
Wechseln Sie zu
function test( ){
var d = document,
s = d.getElementById('aaa');
s.innerHTML = d.body.clientHeight;
}
Der Vorteil lokaler Variablen besteht darin, die Suche ohne Bereichskette zu reduzieren.
Ich empfehle die Verwendung lokaler Variablen, wenn es zwei Referenzen gibt.

2. Vermeiden Sie die Verwendung mit (ich denke, jeder auf der Welt weiß das).
Ich verstehe, dass der Grund dafür ist, dass mit ein eigener Bereich erstellt wird, wodurch die ursprüngliche Bereichskette verlängert wird und der im With-Block ausgeführte Code langsamer wird. Es scheint, dass der Code beim Schreiben gespeichert wird, aber tatsächlich wird der Zugriff immer länger umständlich und die Leistung nimmt ab.
Beispiel
Verwendung mit
clientHeight = '200px';
>}
Tatsächlich können Sie
Function Test () {
var ds = document.body;
ds.clientheight = '200px';
ds.Clientwidth = '200px'
                                                                                                                                                                              Länge einmal 🎜> Meine Methode wird nicht einmal verwendet
for(var i=0,ci;ci=as[i++];){}Wenn nodeList abgeschlossen ist, sind die
-Vorteile für FALSE vorbei und die Länge wird nicht berechnet . Es speichert den Wert im Zyklus und der Code ist noch kleiner im Urteil
(Hinweis: Diese Methode wird in der Knotenliste verwendet. Wenn Sie sie in einem Array verwenden, wird es Probleme geben. Es gibt eine 0 letzteres null oder etwas im Array)

4. Benutze nicht so viele VAR, man fügt ein Komma hinzu,
var a = 1;
var b = 1;
var c =1;
Langer Code, schlechte Leistung
Aufgeteilt in
var a=1,
b=1,
c=1 ;
              
5.innerHTML ist das Beste Wahl
Beim Hinzufügen von Elementen zu Elementen ist es am besten, innerHTML zu verwenden

RemoveChild von 6.ie ist nicht einfach zu verwenden
Im Allgemeinen löschen wir ein Element Wird verwendet
elm.removeChild(subElm)
Dies ist unter IE nicht einfach zu verwenden, da dadurch das Element nur vom Dom-Baum getrennt, aber nicht tatsächlich gelöscht wird. Es wird nun
Um den isolierten Knoten tatsächlich zu löschen, können Sie dies tun
var ryc = document.createElement('div');
div.appendChild(subElm);
div.innerHTML = '';
div = null;
Auf diese Weise können Sie den Effekt mit Ausnahme von IE erzielen.

7 Beim Definieren von Ereignissen müssen Sie nicht jedes einzelne binden, sondern binden Sie sie einfach an ihr übergeordnetes Element.
Beispiel:

sdf

sdf

sdf

sdf

sdf

   < /ul>
Möglicherweise müssen Sie für jedes Li einen Klick hinzufügen.
Für jedes Li hinzufügen kann umständlich sein und zum Überlauf neigen (z. B.)
Tatsächlich müssen Sie nur einen für ul hinzufügen, da das Ereignis in die Luft sprudelt
var ul = document.getElementById('a');
ul. onclick = function (e){
!e&&(e=event);
var target = e.srcElement| Sie sind alle mit c/c++ kompiliert und ihre Ausführung ist viel schneller als die in js geschriebene Methode

9 Wenn appendChild längere Zeit verwendet wird, achten Sie darauf, documentfragment
wie
für zu verwenden (var i=0;i<1000;i++){
var o = document.createElement('div');
document.body.appendChild(o);
}
Use documentFragment
var f = document.createDocumentFragment();
for(var i=0;i<1000;i++){
var o = document.createElement('div');
f.appendChild( o) ;
}
document.body.appendChild(f);

10. Wenn sonst >=3 verwendet wird, dann verwenden Sie switch, einfach zu lesen und gute Leistung

11. if<=3, nicht verwenden, sondern 3-Elemente-Ausdruck

12 if==1, if ändern in &&
if(a==1)a=2
Ändern Sie
in a==1&&(a=2);

13 Berechnen Sie die Position des Elements, while()offsetParent
Diese Methode ist die alte Methode, der aktuelle Browser ist ie6 oder höher, ff3 .1 oder höher, Chrome, Opera (ich habe nur die neueste Version getestet) unterstützen dies alle.
el.getBoundingClientRect gibt ein Objekt zurück, das die Werte von oben, links, rechts und unten darstellt

14. Die reguläre Suche ist nicht so schnell wie indexOf
var s= 'sdfsdfsdfAAAsdfdsfs';
for(var i=0;i<1000;i++){
s.indexOf( 'AAA')
}
Das geht schnell
var s= 'sdfsdfsdfAAAsdfdsfs';
for(var i=0;i<1000;i++){
/AAA/.test( s)
el.style.cssText +=";postion:absolute;"
(Achten Sie auf die Position vor der Position; Sie können nicht dorthin gehen, da IE dies nicht hat; wenn die Position nicht erkannt wird, andere Browser habe dieses Problem nicht)

17. In new stehen nach dem Funktionsnamen Klammern, wenn keine Parameter vorhanden sind. Sie können zu
new fn()==>new fnneues Bild()==>neues Bild


Denken Sie zuerst an so viel und kompensieren Sie es dann, wenn Sie darüber nachdenken. Ich denke, es ist falsch, es zu erwähnen, gern geschehen

Oben geht es um die Optimierungsprobleme von Javascript-Programmen. Weitere verwandte Artikel finden Sie auf der chinesischen PHP-Website (www.php.cn)!