網頁中允許的最大div數

Question

嗨，我想知道網頁上允許的div數量是否有限制？

例如，當Internet Explorer必須呈現具有一千個div的網頁時，它會開始窒息嗎？

Answer 1

我知道這是一個老帖子，但我最近做了一個與這個主題直接相關的測試，我想分享我的結果。

我創建了一個簡單的PHP腳本，它會掃出x個5px乘5px的內聯塊div來測試瀏覽器的穩定性和頁面滾動能力。

頁面上的1000 divs，IE9，Firefox和Chrome沒有任何問題，甚至在滾動時似乎沒有打嗝。

在10,000分的情況下，IE9和Chrome能夠以幾乎沒有明顯的延遲滾動，仍然在我書中的“可接受”范圍內，但Firefox開始明顯滯后，直到你感覺滾動條跳到位置a比應該晚了半秒。

有趣的是，10,000 div和100,000之間的性能差異並不像你想象的那么劇烈。 IE9和Chrome在滾動時幾乎沒有明顯的延遲（Chrome在兩者中稍微平滑一些），Firefox有一個非常明顯的延遲，可能會被認為是煩人的，但仍然運行得相當好（即它沒有'崩潰）。

現在頁面上有500,000個div，它終於開始變得有趣了。 IE9崩潰並試圖重新啟動（當然在同一頁面上）並再次崩潰，此時我正確關閉它，重新啟動它，並再試一次，以確保再次發生相同的結果。 它做了。

Chrome保持穩定，但由於極端延遲，幾乎不可能滾動頁面。

最令人驚訝的是Firefox，這個瀏覽器的重量達到100,000 div，大約相同，達到500,00 divs ...滾動不順暢，但它比Chrome還好。

令人驚訝的是，對於頁面上的1,000,000個div，結果幾乎相同！ Firefox處理它們時沒有崩潰，雖然“矮胖”但仍然可以滾動。 IE9崩潰了。 Chrome可以加載頁面，但變得非常慢，幾乎無法使用。

我知道這不是一項科學研究，但我認為除了我自己以外的其他人可能會感興趣。

測試是在帶有Dual-Xeon處理器和4台ram的戴爾工作站上運行的，運行Windows 7。

Answer 2

有兩件事需要考慮。 內存是一個，DOM節點占用大量空間。 另一個是在發生變化時重新渲染所有這些節點所需的CPU時間。 平滑渲染的閾值取決於所使用的引擎。 根據我的經驗，IE遠遠落后，幾百后開始窒息。 Firefox可能需要幾千個，而且對於像Chrome這樣的WebKit瀏覽器來說，它們大致相同（並且好一點）。