CSS正在减慢页面渲染速度

Question

我们有一个页面,用户可以浏览最多2000个配置文件,我们添加20个配置文件作为用户滚动到页面底部.在500个元素之后,添加配置文件变慢,在1000之后很难向下滚动.

我们首先认为这是DOM对象太多的结果,但经过调试后发现这CSS是实际问题,如果我们从页面滚动中删除CSS变得非常流畅,直到2000个配置文件.任何人都可以告诉我为什么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>

Answer 1

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

编辑：情况不完全相同，但似乎其他人也遇到了类似的 webkit 相关问题。我不知道 QT 是什么，但它似乎是一个非常相似的口吃滚动条问题。https://bugreports.qt-project.org/browse/QTWEBKIT-122