6

我们有一个页面，用户最多可以浏览 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>
4

3 回答 3

2

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

这篇文章很好地解释了如何有效地使用 EM，并且还讨论了 REM。

于 2012-06-28T16:28:43.130 回答
2

您的目标是哪种布局，因为浮动似乎过多，尤其是没有清除的迹象。浏览器可能会在处理所有这些浮动定位计算时做噩梦。

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

于 2012-06-28T16:37:31.660 回答
1

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

于 2012-06-28T16:29:03.833 回答