Html CSS正在减慢页面呈现速度

我们有一个页面，用户最多可以浏览2000个配置文件，当用户滚动到页面底部时，我们会添加20个配置文件。500个元素之后，配置文件的添加速度变慢，1000个元素之后，很难向下滚动

我们最初认为这是太多DOM对象的结果，但调试后发现，如果我们从页面滚动中删除CSS，直到2000个概要文件之前，实际问题是

CSS

。有人能告诉我为什么CSS会这样做吗？以及我们如何改进它以显示2000个配置文件

我们的配置文件只包含一个图像，没有文本

CSS如下所示

.profileCard {
  width: 25rem;
  height: 10rem;
  float: left;
}
.profileCard .imageHolder {
  width: 9.9rem;
  height: 9.9rem;
  float: left;
}
.profileCard .imageHolderSecondary {
  height: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.profileCard .imageHolderSecondaryTwo {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.imageCard .profileCard {
   width: 18.75rem;
   height: 18.75rem;
   background-color: white;
}
.imageCard .profileCard .imageHolder {
   width: 100%;
   height: 100%;
 }
.imageCard .profileCard .imageHolder .profileImage {
   min-width: 18.75rem;
   min-height: 18.75rem;
 }

HTML：

<div class="profileCard">
  <div class="imageHolder">
    <div class="imageHolderSecondary">
      <div class="imageHolderSecondaryTwo"> 
        <div class="profileImageContainer"> 
          <img id="imageUrl" class="profileImage" src="http://graph.facebook.com/xyz/picture?type=large" title="undefined"></img> 
        </div> 
       </div> 
      </div>
    </div>
  </div>
</div>

---

将REM的用法更改为EM，您应该会没事的。考虑到REM是CSS3的一个特性，它没有得到广泛的支持，也没有得到广泛的优化

---

为如何有效使用EMs提供了一个很好的解释，并讨论了REMs。

这是一个非常有趣的问题。在查看代码之后，我认为如果为100%元素设置显式大小，可以加快速度。我相信每次加载其中一个元素时，浏览器必须不断地重新解析dom，以计算出100%的大小。尝试静态大小是一个简单的测试，看看这是否是正确的方向。

你的目标是什么样的布局，因为浮动似乎过多，尤其是没有清除的迹象。浏览器可能会有一场噩梦，处理所有这些浮动定位计算

---

编辑：不完全相同的情况，但似乎其他人也有类似的webkit相关问题。我不知道QT是什么，但它似乎是一个非常类似的口吃滚动条问题

你能做一个测试用例吗？我想说完全一样的话。REM是CSS3。我会在那里调查。我也试过em，结果还是一样的。我们使用rem，因为这是我们网页的一部分。因为在页面中，字体大小在不同的级别上发生变化，所以我想使用rem全局控制不同组件的大小。如果我使用em，全局控制组件将是一件令人头痛的事情。@thirtydot您能否指导如何使测试用例仍然保持相同的结果：（在您提供的HTML中，您有一个太多的

标记。这是否相关？您能否提供一个我们可以访问和修补的示例？可能是一个包含所有2000个条目的静态HTML页面，或类似的页面？我们的目标是图像网格视图。嗯，可能从浮动块切换到内联块，大多数浏览器现在都支持它。无论如何，f或者测试一下删除浮动，看看它能做什么？向左浮动是个问题，删除它就解决了问题。谢谢。我基本上设置了。profileCard显示：inline block；然后因为facebook个人资料图像是固定大小，所以显式指定宽度。如果你不知道图像的大小，我可能会使用jQuery来捕捉图像加载后，显式地将其设置一次，设置一次并保留它将比重新计算的强度小得多。如果这没有帮助，请发布一个连线布局，我会找出css