Seit der Veröffentlichung meines MzTreeView1.0-Baumsteuerelements habe ich viele Rückmeldungen von Internetnutzern erhalten, die mir viele relevante Vorschläge gemacht und auf viele Fehler und Mängel in diesem Steuerelement hingewiesen haben, daher plane ich, eine neue Version zu schreiben. Tree, der alle Vorschläge in die Umsetzung integriert. Ich habe in diesen Tagen eine neue Version des Baums geschrieben. Das Wichtigste an der Baumsteuerung ist die Effizienz, insbesondere wenn die Anzahl der Knoten groß ist Beim Baum besteht meine erste Priorität darin, die Effizienz zu verbessern, z. B. das Hinzufügen von Unterstützung für das asynchrone Laden von Daten usw. Darüber hinaus habe ich auch die Idee, die vertikalen Linien der Baumstruktur mithilfe eines Stylesheets (Hintergrundbild) zu implementieren. Das Stylesheet-Hintergrundbild muss nur einmal geladen werden, und jetzt verfügt dieser Modus (unter Verwendung mehrerer <img>)-Bilder über einen Caching-Mechanismus, es ist jedoch immer noch möglich, den Server einmal für jedes kleine Bild anzufordern, also dachte ich, wie gut das ist Es wäre, ein Stylesheet zu verwenden, um dies zu erreichen. Der Code ist rationalisiert, die Struktur ist klar und der Effekt ist großartig, aber nach fast einer Woche des Testens ist meine Idee völlig gescheitert Das Stylesheet ist zu schlecht. Die neue Idee konnte nicht umgesetzt werden und ich war ein wenig frustriert, aber ich dachte, ich sollte die Testergebnisse mit allen teilen.
Hier erkläre ich die vertikalen Linien auf der linken Seite des Baums. In meiner Version 1.0 habe ich kleine, nacheinander gestapelte Bilder verwendet Art der Verwendung Das Stylesheet wird mit Code wie <div class="l2"></div> implementiert und das Stylesheet ist für das Ausfüllen des Hintergrundbilds verantwortlich.
#mtvroot div td{width:20px;height:20px;}
#mtvroot .l0{background:url(line0.gif) no-repeat center}
#mtvroot .l1{background:url(line1.gif) no-repeat center}
#mtvroot .l2{background:url(line2.gif) no-repeat center}
#mtvroot .l3{background:url(line3.gif) no-repeat center}
#mtvroot .l4{background:url(line4.gif) no-repeat center}
#mtvroot .ll{background:url(line5.gif) no-repeat center}
#mtvroot .pm0{background:url(plus0.gif) no-repeat center}
#mtvroot .pm1{background:url(plus1.gif) no-repeat center}
#mtvroot .pm2{background:url(plus2.gif) no-repeat center}
#mtvroot .pm3{background:url(plus3.gif) no-repeat center}
#mtvroot .expand .pm0{background:url(minus0.gif) no-repeat center}
#mtvroot .expand .pm1{background:url(minus1.gif) no-repeat center}
#mtvroot .expand .pm2{background:url(minus2.gif) no-repeat center}
#mtvroot .expand .pm3{background:url(minus3.gif) no-repeat center}
Das obige CSS ist ein Fragment des Stils, den ich dynamisch im Skript generiert habe, um es später bei der Erklärung zu unterstützen. Nachdem ich das Stylesheet verwendet hatte, war es wirklich rationalisiert und die Generierung jedes Knotens war schnell genug. Ich stellte jedoch fest, dass die Effizienz der Knotengenerierung keinen Einfluss hatte, wenn die Anzahl meiner Baumknoten beispielsweise 300–500 Knoten erreichte , aber jedes Mal Die Erweiterung/Verkleinerung eines Knotens ist sehr langsam und dauert mehr als ein paar Sekunden oder sogar 10 Sekunden, und die CPU-Auslastung beträgt in diesem Zeitraum 100 %. Zur Erläuterung: Die Erweiterung/Verkleinerung des Baums wird durch die Einstellung style.display = none|block des übergeordneten Knotens erreicht. Die Konfiguration meines Computers lautet: AMD2800+ 1GDDR400-Speicher, die Konfiguration ist nicht schlecht.
Meine erste Reaktion war: Hat die Verwendung zu vieler <table>s die Effizienz beeinträchtigt? Da ich für jeden Knoten eine <Tabelle> verwende, die <Tabelle> jedoch durch <div>, <span> usw. ersetzt habe, gibt es keine Verbesserung der Effizienz, was bedeutet, dass das Problem einer 100%igen CPU-Auslastung nicht besteht ein Problem von HTML-Tags, dann ist das verbleibende Problem hier die Verwendung von Stylesheets.
Nehmen wir als Beispiel die Anzahl von 500 Knoten, so werden in 1.0 auf der linken Seite etwa 2.000 kleine Bilder gestapelt sein. In diesem Fall wird es ein großes Problem geben, wenn der Browser so eingestellt ist, dass er nicht lokal zwischenspeichert. Das Laden dieser vielen kleinen Bilder nimmt viel Zeit und Serverressourcen in Anspruch. Deshalb habe ich jetzt dieses neue Stylesheet verwendet die Stylesheet-Methode, was bedeutet, dass es etwa 2.000 Stellen gibt, an denen Stylesheets zum Rendern von Hintergrundbildern benötigt werden. Ich habe verschiedene Situationen getestet und mit dem Code der Version 1.0 verglichen und bin zu dem Schluss gekommen, dass die CPU-Auslastung so hoch ist. Der einzige Grund ist das zeitaufwändige Rendern. Die Überprüfung ist auch sehr einfach. Ich habe den #mtvroot-Teil auf der linken Seite des Stylesheets entfernt, was bedeutet, dass die Abhängigkeitsbeziehung des Stylesheets entfernt wurde. Die Testergebnisse haben ergeben, dass sich die Effizienz erheblich verbessert hat, aber der Zeitaufwand ist immer noch beträchtlich, 3-5 Sekunden.
Außerdem habe ich auf andere Browser umgestellt, und die Testergebnisse sind auch unterschiedlich. Wenn ich beispielsweise 500 untergeordnete Knoten auf einem bestimmten Knoten habe, schließe ich ihn (CPU 100 %, warte 3). -5 Sekunden), das heißt, display="none". Wenn ich zu diesem Zeitpunkt den übergeordneten Knoten dieses Knotens reduziere (dieser Knoten hat keine anderen Geschwisterknoten, das heißt, sein übergeordneter Knoten hat nur einen ähnlichen untergeordneten Knoten) Es liegt auf der Hand, dass es nur einen Knoten gibt. Der Zusammenbruch sollte eine sofortige Sache sein, aber das Ergebnis ist 100 % CPU für 3-5 Sekunden. Mit anderen Worten, selbst wenn Das HTML-Objekt wird durch display="none", sein übergeordnetes Objekt, ausgeblendet. Wenn auf dieser Ebene eine Operation ausgeführt wird, rendert der IE diese ausgeblendeten Objekte mithilfe von Stylesheets neu. Ich verstehe wirklich nicht, was die Entwickler des IE gedacht haben.
Ich bin zu FIREFOX gegangen, um es noch einmal zu testen (Anzeige = keine), und ich kann sicher sein, dass FF beim Umgang mit versteckten Objekten keine Energie mehr verbraucht. Natürlich sind beim Erweitern alle Browser gleich: 3-5 Sekunden CPU 100 %, aber FF ist etwas schneller.
Aufgrund der oben genannten Phänomene bin ich zu dem Schluss gekommen, dass Stylesheets beim dynamischen Rendern nicht effizient sind. Wenn der übergeordnete Container eine Statusänderung erkennt, werden die Stylesheets aller seiner Nachkommenobjekte neu gerendert noneHidden-Objekte werden nicht erneut gerendert, der IE jedoch.
Warum wurde dieses Problem der Stylesheet-Rendering-Effizienz noch nicht entdeckt? Hey, wenn man Webseiten erstellt, geht man selten zu solchen Extremen. Es gibt Tausende von Hintergrundbildern auf einer Seite, die Stylesheets zum Rendern von Hintergrundbildern erfordern. Normalerweise gibt es nur wenige oder Dutzende Orte, sodass Sie weder die Effizienz des Renderings noch den Unterschied zwischen verschiedenen Browsern in dieser Hinsicht spüren können. Bei der Erstellung von Steuerelementen wie Bäumen treten jedoch auf jeden Fall verschiedene extreme Probleme auf, z. B. große Datenarrays, die Anzahl der generierten HTML-Objekte usw. Der Unterschied in der Rendereffizienz ist nur eines der Probleme, wenn ich JS-Skripte schreibe angetroffen. Heute teile ich dieses Testergebnis in der Hoffnung, dass es in Zukunft allen beim Schreiben von Programmen hilfreich sein wird und dass man es beim Design berücksichtigen kann.
Abschließend möchte ich Ihnen allen für Ihre Bestätigung und Unterstützung für die von mir geschriebene Kontrolle danken, vielen Dank!