6

ユーザーが最大 2000 個のプロファイルを参照できるページがあり、ユーザーがページの下部にスクロールすると、20 個のプロファイルが追加されます。500 個の要素を超えると、プロファイルの追加が遅くなり、1000 個を超えると、下にスクロールするのが非常に困難になります。最初は DOM オブジェクトが多すぎることが原因だと考えていましたが、デバッグ後に実際の問題で

あることが判明しました。ページ スクロールから CSS を削除すると、2000 プロファイルまで非常にスムーズになりました。CSSCSSがこれを行っている理由を誰か教えてもらえますか? 2000 のプロファイルを表示するように改善する方法。

私たちのプロフィールには画像が 1 つだけ含まれており、テキストは含まれていません。

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 に答える