12

表示する準備ができるまで、ブラウザーが「隠し」HTML を解析してプリレンダリングまたはペイントする作業を行わないようにしたいので、最小限のコンテンツ セットをすばやく表示できます。目に見える部分をレンダリングします。

最初のページ読み込みの最大レンダリング/ペイント速度を探しています。

私の現在のHTML：

<div id="stuff">
    <div class="item">
        <div class="visible">
            <h1>Item 1</h1>
            <a class="details" href="javascript:void(0)">Show more</a>
        </div>
        <div class="invisible">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean elit mi, bibendum a imperdiet sed, imperdiet id leo. Mauris vulputate tellus id metus euismod, eget gravida libero ultricies.</p>
            <img src="/img/1.jpg" alt="" />
        </div>
    </div>
    <div class="item">
        <div class="visible">
            <h1>Item 2</h1>
            <a class="details" href="javascript:void(0)">Show more</a>
        </div>
        <div class="invisible">
            <p>Vestibulum tristique fermentum dui, et pretium elit. Ut purus lacus, mattis vitae leo vel, congue mollis mi. Aliquam erat volutpat. Vestibulum luctus, purus ut mattis ullamcorper, justo odio ultrices dolor, nec porta purus turpis sed orci. Aliquam orci sapien, dictum sed facilisis molestie, tempus in orci.</p>
            <img src="/img/2.jpg" alt="" />
        </div>
    </div>

    ... and so on...
</div>

実際の「見えない」コンテンツは、この例よりもはるかに重要であり、ページごとに 50 個の「アイテム」があります。

私の外部CSS:

.invisible {
    display: none;
}

display: none外部スタイルシートでは、ブラウザーが非表示のコンテンツを事前にレンダリングするのを防ぎますか?

私がやりたいことをするためのより良い方法はありますか？代わりに、インライン style="display:none" を div に配置する必要がありますか?

ありがとう！

4

2 に答える 2

15

display: noneブラウザがそのマークアップと関連するリソースを解析/ロードするのを妨げません (スティーブン・モーズリーによる編集: これをテストしたところ、display:none は実際にはブラウザが HTML を描画するのを防ぎます。つまり、非表示の div 内の要素に CSS を適用し、 HTML を解析して DOM を構築する作業のみを行うため、実際にはパフォーマンス上の利点が得られます)。display値が変更されるまで、ページ フローの一部としてレンダリングされません。一般的に言えばdisplay: none、visibility: hiddenページの読み込み時間にはほとんどまたはまったく影響しません。最適化/パフォーマンスの主な場所にdisplay: noneは、ページ コンテンツのリフロー/再レンダリングがトリガーされるため、いつ表示するかを選択的に選択することが含まれます。それでさえ、非常に複雑なアプリケーションを除いて、通常は無視できるほどの違いです。

必要になるまでコンテンツの読み込みを待ちたい場合は、コンテンツをまったく含めずに (または空の div プレースホルダーを含めて)、ページの読み込み後に必要になったら AJAX を使用してサーバーからコンテンツを取得し、ページに追加します。 JSで。jQuery は、組み込みの AJAX 関数を使用してこれを非常に簡単にします。

于 2013-10-03T14:36:39.997 に答える
1

そもそも、目に見えない HTML を作成することを避けることができますか? ある時点で設定し.invisible { display: block }ますか?。

display: noneあなたが期待するほどパフォーマンスが優れていないことがわかりました。無限スクロールまたはページネーションを使用して、ユーザーが必要なときにのみ余分な要素を画面に追加することをお勧めします。

ページが表示されない場合は、ページに HTML を配置することは避け、DOM 操作を最小限に抑えるために必要なものを一度に追加してください。

ユーザーが 1 ページあたり 50 項目すべてを見る可能性はありますか?

于 2013-10-03T14:34:00.907 に答える