CSS 正在减慢页面渲染速度答案

【问题标题】：CSS is slowing down the page renderingCSS 正在减慢页面渲染速度
【发布时间】：2012-06-30 05:24:50
【问题描述】：

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

【问题讨论】：

你能做一个jsfiddle.net / jsbin.com 测试用例吗？
我正要说同样的话。 REM 是 CSS3。我会在那里调查。
我也试过了，结果还是一样。我们使用 rem 因为这是我们网页的一部分。由于在页面内，字体大小在不同级别发生变化，我想使用 rem 全局控制不同组件的大小。如果我用em，全局控制组件会很头疼。
@thirtydot 能否指导一下如何制作测试用例

标签： html dom css

【解决方案1】：

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

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

【讨论】：

我们的目标是图像网格视图。
嗯，也许从浮动切换到内联块，大多数浏览器现在都支持它。在任何情况下，为了测试如何删除浮动并查看它的作用？
向左浮动是问题，删除它可以解决问题。谢谢sss
我基本上将 .profileCard 设置为 display: inline-block;然后因为 facebook 个人资料图像是固定大小的，所以明确指定宽度。如果您不知道图像的大小，我可能会使用 jQuery 来捕获图像，在图像加载后显式加载设置一次，设置一次并离开它比重新计算要少得多。如果那没有帮助，请发布线路布局，我会找出 css

【解决方案2】：

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

This article 很好地解释了如何有效地使用 EM，并且还讨论了 REM。

【讨论】：

试过还是一样的结果:(
在您提供的 HTML 中，</div> 标签过多。这相关吗？
您能否提供一个我们可以访问和修改的示例？可能是一个包含所有 2000 个条目的静态 HTML 页面，还是类似的？

【解决方案3】：

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

【讨论】：