Ich baue eine meiner ersten Web-Apps mit HTML5, speziell für iPhones.
Da ich noch ziemlich neu bin, versuche ich, einige gute Programmiergewohnheiten zu entwickeln, Best Practices zu befolgen, die Leistung zu optimieren und die Belastung des ressourcenbeschränkten iPhone zu minimieren.
Eines der Dinge, die ich häufig machen muss ... Ich habe zahlreiche divs (von denen jedes eine eindeutige ID hat), die ich häufig aktualisiere (z. B. mit innerHTML) oder modifiziere (z. B. style-Attribute mit webkit) Übergänge und Transformationen).
Im Allgemeinen - sollte ich getElementByID jedes Mal verwenden, wenn ich ein Handle für ein div benötige, oder sollte ich Verweise auf jedes div, auf das ich in "globalen" Variablen am Anfang zugreife, speichern?
(Ich verwende "global" in Anführungszeichen, weil ich wirklich nur eine wirklich globale Variable habe - ein Objekt, das alle meine "globalen" Variablen als Eigenschaften speichert).
Ich nehme an, dass getElementByID jedes Mal einen Overhead benötigt, da die Funktion das DOM durchlaufen muss, um das div zu finden. Aber ich bin mir nicht sicher, wie diese Funktion zu besteuern oder effizient ist.
Die Verwendung von globalen Variablen zum Speichern von Handles für jedes Element muss etwas Speicher belegen, aber ich weiß nicht, ob diese Referenzen nur eine geringfügige Menge RAM oder mehr erfordern.
Also - was ist besser? Oder nehmen beide Optionen eine so geringe Menge an Ressourcen in Anspruch, dass ich mich nur darum kümmern muss, welche lesbareren, wartbaren Code erzeugt?
Vielen Dank im Voraus!
"Im Allgemeinen - verwende ich besser getElementByID, wenn ich ein Handle für ein div benötige, oder sollte ich Verweise auf jedes div speichern"
Wenn Sie getElementById aufrufen, bitten Sie ihn, eine Aufgabe auszuführen. Wenn Sie beim Aufruf derselben Methode mit dem gleichen Argument kein anderes Ergebnis erwarten, erscheint es sinnvoll, das Ergebnis zwischenzuspeichern.
"Ich nehme an, dass getElementByID jedes Mal einen Overhead haben muss, da die Funktion das DOM durchlaufen muss, um das div zu finden. Aber ich bin mir nicht sicher, wie effizient diese Funktion ist."
Besonders in modernen Browsern ist es sehr schnell, aber nicht so schnell wie das Nachschlagen einer Eigenschaft auf Ihrem globalen Objekt.
"Wenn globale Variablen zum Speichern von Handles für jedes Element verwendet werden, muss etwas Speicher belegt werden, aber ich weiß nicht, ob diese Referenzen nur eine geringfügige Menge an RAM oder mehr benötigen."
Trivial. Es ist nur ein Zeiger auf ein Objekt, das bereits existiert. Wenn Sie das Element aus dem DOM entfernen, ohne es noch einmal verwenden zu wollen, dann sollten Sie es natürlich loslassen.
"Also - was ist besser? Oder verbrauchen beide Optionen eine so geringe Menge an Ressourcen, dass ich mir nur Sorgen machen sollte, was lesbareren, wartbaren Code erzeugt?"
Kommt ganz auf die Situation an. Wenn Sie es nur ein paar Mal abrufen, ist es möglicherweise nicht sinnvoll, Ihr globales Objekt hinzuzufügen. Je mehr Sie das gleiche Element abrufen müssen, desto besser ist es, es zwischenzuspeichern.
Hier ist ein jsPerf-Test zum Vergleichen. Natürlich spielen die Größe Ihres DOMs sowie die Länge der Traversierung des Variablenbereichs und die Anzahl / Tiefe der Eigenschaften in Ihrem globalen Objekt eine Rolle.
Die Verwendung einer lokalen Variablen oder sogar einer Objekteigenschaft ist viel schneller als getElementById (). Beide sind jedoch so schnell, dass ihre Leistung im Allgemeinen irrelevant ist, verglichen mit anderen Operationen, die Sie möglicherweise ausführen, sobald Sie das Element haben. Das Ereignis, das eine einzelne Eigenschaft für das Element festlegt, ist um Größenordnungen langsamer als das Abrufen durch eine der beiden Methoden.
Der Hauptgrund, ein Element zwischenzuspeichern, besteht also darin, die ziemlich langatmige document.getElementById (... -Syntax zu vermeiden oder zu vermeiden, dass Element-ID-Strings überall im Code verstreut sind.
Tags und Links javascript html5