2010-08-15 4 views
9

Hallo Ich habe mich gefragt, ob es eine Grenze für die Anzahl der divs gibt, die auf einer Webseite erlaubt sind?Maximale Anzahl von divs erlaubt in Web-Seite

Zum Beispiel beginnt Internet Explorer zu ersticken, wenn es eine Webseite mit tausend divs rendern muss?

+9

, wenn Sie eine solche Frage zu stellen haben, ist es wahrscheinlich, dass Sie etwas falsch ... –

+1

tun Wenn Sie haben eine Seite mit dieser Art von Design, Anzahl der zulässigen divs ist nicht dein größtes Problem –

+2

Ich stimme nicht zu, dass das Design falsch ist. Ich habe Suchanfragen geschrieben, die es Leuten erlauben, 100, 250 oder 1.000 Elemente aufzulisten und benötigte divs, um ihren Inhalt dynamisch zu ändern.Die Frage war, ob es eine Grenze gibt; Die Antwort ist nein, aber Realismus schlägt eine Kappe vor. –

Antwort

1

Es gibt zwei Dinge zu beachten. Speicher ist einer, bei dem DOM-Knoten sehr viel Platz einnehmen. Die andere ist die CPU-Zeit, die benötigt wird, um alle diese Knoten neu zu rendern, wenn sich etwas ändert. Der Schwellenwert für das reibungslose Rendern hängt vom verwendeten Modul ab. Meiner Erfahrung nach fällt der IE weit zurück und beginnt nach mehreren hundert zu ersticken. Firefox kann mehrere Tausend dauern, und es ist ungefähr dasselbe (und ein wenig besser) für WebKit-Browser wie Chrome.

+0

Danke für Ihre Eingabe! Es ist schwer, diese Art von Informationen online zu finden. – Sau

26

Ich weiß, das ist ein alter Beitrag, aber ich habe kürzlich einen Test gemacht, der direkt mit diesem Thema verbunden ist und ich wollte meine Ergebnisse teilen.

Ich erstellte ein einfaches PHP-Skript, das x Anzahl von 5px durch 5px Inline-Block divs ausspuckt, um die Browserstabilität und Seitenblättrigkeit zu testen.

Bei 1000 divs auf der Seite IE9, Firefox und Chrome haben überhaupt kein Problem und scheinen nicht zu scrollen beim Scrollen.

Bei 10.000 divs IE9 und Chrome sind in der Lage, mit einer kaum wahrnehmbaren Verzögerung zu scrollen, immer noch im "akzeptablen" Bereich in meinem Buch, aber Firefox beginnt deutlicher zu bemerken, bis zu dem Punkt, wo Sie die Bildlaufleiste fühlen eine halbe Sekunde später in Position springen, als es sollte.

Interessanterweise ist der Leistungsunterschied zwischen 10.000 Divs und 100.000 nicht so drastisch, wie Sie sich vorstellen. IE9 und Chrome funktionieren mit nur einer kaum wahrnehmbaren Verzögerung beim Scrollen (wobei Chrome das etwas glattere der beiden ist), und Firefox hat eine Verzögerung, die sehr auffällig ist und wahrscheinlich als störend empfunden wird, aber immer noch recht gut funktioniert (dh es funktioniert nicht t crashen).

Jetzt bei 500.000 divs auf der Seite begann es endlich interessant zu werden. IE9 Crashed und versuchte, sich neu zu starten (auf der gleichen Seite, natürlich) und stürzte erneut ab, an welchem ​​Punkt ich es richtig heruntergefahren, neu gestartet, und versuchte es noch einmal, um sicherzustellen, dass das gleiche Ergebnis wieder passieren würde. Es tat es.

Chrome blieb stabil, aber es wurde aufgrund der extremen Verzögerung fast unmöglich, die Seite zu scrollen.

Die große Überraschung war Firefox, der Browser, der bei 100.000 divs klobig war, ist bei 500,00 divs ungefähr gleich ... Scrollen ist nicht glatt, aber es ist viel besser als Chrome.

Erstaunlicherweise waren die Ergebnisse für 1.000.000 Divs auf einer Seite ziemlich gleich! Firefox behandelte sie ohne Absturz und blieb scrollbar, obwohl "klobig". IE9 stürzte ab. Und Chrome konnte die Seite laden, wurde aber so langsam, dass es praktisch nicht mehr verwendet werden konnte.

Ich weiß, das ist nicht gerade eine wissenschaftliche Studie, aber ich dachte, dass es für jemand anderen außer mir interessant sein könnte.

Tests wurden auf einem Dell-Workstation mit Dual-Xeon-Prozessoren und 4 GB RAM durchgeführt, mit Windows 7.

+3

coole Info, auch wenn in Ihrem Test etwas begrenzt. –

+0

+1 für die Auflistung der Testmaschine –

+0

Wie wäre es mit der Ladezeit? Wie viel Zeit hat es gekostet, diese Divs zu rendern? – Ismail

Verwandte Themen