mootools：如何在單個頁面中放置10,000個<div>標簽

Question

我已經在mootools中開發了一個應用程序。 但是它包含的標簽數量幾乎沒有變化，幾乎是10,000。 每個標簽的結構如下：

<div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
 <img src=""> <p>name</p> <p>Gender</p> <p>Mood</p> 
</div>

在以下容器中

<div id="tags_container" style="overflow: scroll;height: 700px;">
 <div style="float:left;padding:5px;margin: 6px;"> <!-- tag-1 -->
  <img src=""> <p>name</p> <p>Gender</p> <p>Mood</p> 
 </div>
 <!-- tag-2 -->
   .  
   .
   .
 <!-- all tags one after another -->
</div>

即時通訊以行和列格式顯示這些標簽（5列和2000行）。 id =“ tags_container” <div>具有垂直滾動條。 但是，當我嘗試在該部門中向下滾動以查看更多標簽時，滾動速度會變慢。

我該怎么辦？

我應該將實現方法從<div>標簽更改為<table>標簽嗎？

有什么選擇可以使其更快？

在以前的幾個問題中，建議我不要在一個文檔中使用那么多標簽，但是會有那么多標簽，所以我應該怎么做。

Answer 1

我以前做過這樣的事情 。 使用更多的CSS類和更少的元素，並刪除所有不必要的內容（例如注釋）。 盡管數據本質上是表格格式的，但我發現使用<div>創建像素完美的布局要容易得多 。

標記

<div class="cell">
 <img src=""> <p>name</p> <p>Gender</p> <p>Mood</p> 
</div>

的CSS

div.cell {
    float: left;
    padding: 5px;
    margin: 6px;
}

如果可能的話，它也可能會更快使用CSS拼合的圖片，而不是圖像10K 更多的元素。 就像是：

標記

<div class="cell" style="background-position: 0px 0px;">
    <p>name</p> <p>Gender</p> <p>Mood</p> 
</div>

的CSS

div.cell {
    float: left;
    padding: 5px;
    margin: 6px;
    background-image: url(path/to/sprite);
    background-repeat: no-repeat;
}

---

編輯如果您需要對這些元素進行任何形式的DOM操作，建議將它們全部加載到JS數組中一次 （然后），然后通過索引從數組中訪問它們。 重復查詢DOM中的相同元素會破壞性能。

如果可能，還要刪除每個<div>中的<p>元素。 如果您有10k個<div>元素，每個元素包含3個<p> ，那么您實際上正在使用最少40k個元素。

寶貝，那是很多DOM。

如果您能弄清楚如何從每個<div>僅刪除1或2個<p>來獲得相同的布局，那么您將立即減少到20k或30k元素。

Answer 2

為什么不使用桌子？ 看來您正在嘗試使用div建立表格。

Answer 3

對我來說，這聽起來像是一份表格文件。 為什么不使用桌子？

請注意，即使使用桌子，您也可能會遇到一些麻煩，但是我懷疑它會更快。

您還應該考慮使用類進行樣式設置，而不是手動對每一行進行設置。

Answer 4

這似乎是首先創建表的確切原因-表格樣式數據。 有沒有理由不使用表格？

Answer 5

如果將表格數據分解為多個單獨的實體並將表格布局設置為固定，則渲染速度最快。 將所有樣式信息保留在html之外，並保留在樣式元素或鏈接的樣式表中。

Answer 6

是否需要一次在頁面上顯示所有10,000行？ 也許您可以看看實現由David Walsh開發的ScrollSpy插件 。 這將允許您加載較小的初始記錄集，然后在需要時訪問更多記錄。