0

「グリッドまたはリスト」モード で表示できるアイテムのリストがあります。

これは、次のように HTML で実装されます。

<!-- List mode -->
<div class="items list">
    <ul></ul>
</div>
<!-- Grid mode -->
<div class="items grid">
    <ul></ul>
</div>

grid/listユーザーがボタンをクリックすると、 jQuery を使用して CSS クラスを切り替えるだけです。私のスタイルシートでは、.items.grid > ul/のスタイルを設定しており、次のようなモードで.items.list > ulサブ要素を非表示にすることがあります。grid

.items.grid .hidden-grid {
    display: none;
}

.items.grid ul li {
    float: left;
    display: inline-block;
    width: 80px;
    height: 80px;
}

リストに表示される要素の数はさまざまであり、残りの項目が存在するまで「無限スクロール」によって読み込まれます。

これはかなりうまく機能していますが、要素の数が増えると遅くなり始めます。これが瞬時に行われることを期待していましたが、ブラウザがブロックされます。

高速化するにはどうすればよいですか?

要素を再度レンダリングする必要があるブラウザに関連する外観。

これは CSS 構造に関連している可能性がありますか?

4

1 に答える 1

0

これは、実際には CSS セレクターと、ブラウザーがそれらを解析してページをレンダリングする方法、または要素を再度レンダリングする方法に関連していました。

ご存知の場合は非常に論理的ですが、ブラウザーは最終的にスタイルを設定する必要がある要素から始めて、CSS セレクターを right から left に評価します。CSS ID でさえ大きな違いはありません。これは、jQuery の考え方とは異なります。

効率的な CSS セレクターの作成

ブラウザのレンダリングを最適化する

ブラウザーが CSS セレクターを右から左に照合するのはなぜですか?

そこで、要素セレクターをクラス セレクターに置き換え、ディープ セレクターを削除しました。その違いは顕著です。

HTML

<div class="items">
    <ul class="grid">
        <li class="item>...</li>
    </ul>
</div>

CSS

.grid .item {
    ...
}

.grid .hidden-grid {
    display: none !important;
}

.list .item .description {
    ...
}
于 2012-11-17T10:26:19.680 に答える