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类和更少的元素,并删除不必要的一切(如注释).虽然数据本质上是表格式的,但我发现使用s 创建像素完美的布局要容易得多<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 spriting也可能更快,而不是为图像添加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以获取相同的元素将破坏性能.

如果可能,还要删除<p>每个元素<div>.如果你有10个<div>元素,每个元素包含3 <p>秒,那么你真正使用至少40k元素.

这是很多DOM,宝贝.

如果您可以弄清楚如何<p>从每个布局中移除相同的布局,即使只有1或2 秒<div>,您也可以立即降低到20k或30k元素.