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

将REM的使用情况更改为EM，您应该没问题。考虑到REM是一种CSS3功能，它没有得到广泛的支持，并且绝对没有广泛优化。

This article提供了有效使用EM的良好解释，并讨论了REM。

Answer 2

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

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

Answer 3

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

CSS正在减慢页面渲染速度

3 个答案: