CSS正在减慢页面渲染速度。

Question

CSS正在减慢页面渲染速度。

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>

- maaz

你能否创建一个 http://jsfiddle.net/ 或者 http://jsbin.com/ 的测试用例？ - thirtydot

1

我正要说完全相同的话。REM是CSS3中的一个单位，我会在那里进行调查。 - Jezen Thomas

我也尝试过em，结果还是一样。我们使用rem是因为它是我们网页的一部分。由于页面内不同级别的字体大小在变化，我想使用rem来全局控制不同组件的大小。如果使用em，全局控制组件将会很麻烦。 - maaz

@thirtydot，你能指导一下如何编写测试用例吗？ - maaz

3个回答

2

你想要怎样的布局？因为浮动似乎过多，尤其没有清除标记。浏览器很可能会对所有这些浮动定位计算感到头疼。

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

- Hawxby

我们的目标是实现一个图片网格视图。 - maaz

嗯，也许从浮动改为内联块会更好，现在大多数浏览器都支持它了。无论如何，为了测试，先把浮动去掉看看效果如何？ - Hawxby

浮动左侧是问题，移除它修复了问题。谢谢。 - maaz

我基本上会将.profileCard设置为display: inline-block; 然后，因为Facebook个人资料图片是固定大小的，请明确指定宽度。如果您不知道图像的大小，我可能会使用jQuery来捕获图像加载，一旦图像加载完成，就显式地设置它一次，而不是重新计算，这样设置一次并保持不变比重新计算要少得多。如果这没有帮助，请发布线框图，我将解决CSS问题。 - Hawxby

1

这是一个非常有趣的问题。看了你的代码后，我认为如果你为你的100%元素设置明确的大小，就可以加快速度。我相信浏览器每次加载这些元素时都必须不断重新解析dom以确定100%的大小。尝试使用静态大小进行简单测试，以确定是否朝着正确的方向前进。

- colonelclick

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nathanael · Accepted Answer

改用EM替代REM，这样就没问题了。考虑到REM是CSS3的特性，它的支持范围并不广泛，而且优化程度也不如EM。这篇文章提供了一个很好的解释，介绍了如何有效地使用EM，并讨论了REM。