1

CSS セレクターのパフォーマンスは非常に強調されており、次のような推奨事項があります。

  1. 効率的なセレクターを使用します。
  2. 未使用の CSS ルールを削除します。
  3. 現在のページで使用されていない CSS を含むインライン スタイル ブロックを削除します。

ただし、DOM で不要な ID を回避するための具体的な参照は行われていません (Wordpress が行う傾向があるすべての ID のため)。次のようなかなり太ったメニューなど:

    <div id="nav">
      <ul id="menu-main-navigation" class="menu genesis-nav-menu menu-primary">
        <li id="menu-item-22" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-22"></li>
        <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"></li>
        <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-30"></li>
        <li id="menu-item-118" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-118"></li>
      </ul>
   </div>

存在しない css ID ルールを見つけるために、多くの不必要な HTML の解析と照合を行っているように感じます。すべてのページに一定の不要なバイトがダウンロードされます。1 つのキャッシュされた css ファイル内の未使用の css ルールが 1 回だけダウンロードされると、さらに悪い結果になる可能性があります。または、さらに悪いことに、回避を推奨するほど重要ではないでしょうか?

または、次のような Modernizr 膨張ケース:

<html data-env="production" lang="en" xml:lang="en" style="" class=" js flexbox flexboxlegacy canvas canvastext no-touch postmessage hashchange history websockets rgba hsla multiplebgs backgroundsize borderimage cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache overthrow-enabled">

これに関するブラウザーの専門家の見解、および未使用の外部ルールと比較してパフォーマンスがどれほど悪いか。

4

2 に答える 2

2

私が間違っていなければ、最近のブラウザーは、CSS の解析中に CSS ID とクラス セレクターを独自のハッシュ マップに追加します。次に、ID を持つ HTML 要素に CSS を適用すると、ID ハッシュ マップで ID (O(1)またはO(lg N)ブラウザーの実装によっては複雑さ) が検索されます。(クラスも同じように機能します。)したがって、ID またはクラスに関連付けられたスタイルがあるかどうかを実際に確認するのは非常に高速です (定数時間または対数時間)。

これが実際に当てはまる場合、一連の「未定義」の ID とクラスを調べるのに費やされる時間は、(私の意見では) そのような場合にはほとんど無視できます。これがおそらく、「未定義」の ID とクラスの使用法について誰も言及していない理由です。

これについて言及しているウェブサイトがあります。(ページで検索hash map)

これらの「未定義」の ID とクラスのためにダウンロードされる余分なバイト数は、それ自体が議論の余地があると思います。Web ページのサーバー側で圧縮が行われていなかったら、もっと心配です。

于 2013-10-18T06:04:10.883 に答える
0

これは興味深い質問です。Web 開発者は、さまざまな理由から Web サイトをできる限り軽量かつ高速にする必要があることを知っています。

画像サイズ、js の最小化、css の最小化、要素のキャッシュなど、Web サイトには最適化できる (すべき) 要素がたくさんあります。

しかし、少なくとも次の 2 つの場合は分けるべきだと思います。

  1. プログラマー以外でもすぐに使えるが、カスタマイズ可能である必要がある CMS/フレームワーク:

    • あなたの例のように: ワードプレス: ワードプレスのテーマには多くの css 要素が含まれる傾向がありますが、コードが可能な限り最適化されていれば、簡単に実行できる高度なカスタマイズ レベルを提供します。

    • テーマを基本的なフォームと見なすことができます。開発者であれば、任意のテーマから開始し、子テーマを作成して最適化できます。

  2. webapp を機能させるためにプログラマーが取り組まなければならないその他すべてのこと:

    • これは上記の 2 番目のケースと同様で、開発者が何かをコーディングできる場合は、必要なだけ最適化できます。

わかりました、それは質問のトピックから少し外れましたが、言及する価値はあったと思います.

css の重みに戻る:

css ファイル: 大きな css ファイルはおそらく約 20kb であり、これによりサイトの重量が増加します。これはキャッシュすることができ、これを画像サイズと比較することは大きな重量のようには感じませんが、ウェブサイトを高速化するために最善を尽くしている場合は、すべてをできるだけ小さくする必要があります.

インライン css の重みについて: 大きな css ファイルが約 20kb の場合、理由もなくインライン/追加された css (一致しない) は余分な kb をもたらしますが、複雑な html では無視できると思います。また、画像と js と jquery を使用します。css は、おそらく kb での重量として 5% 未満になります。私は最大値であると信じていますが、実際の値は異なる場合があります: 調査が必要です...)

ブラウザによって行われる CSS マッチング:

  • css が減り、一致するコードが少なくなり、ページが速くなります...しかし、js と jquery について考えてみましょう。多くの一致と、操作さえも非常に迅速に行われます。これは、コードを最適化することはできますが、他のもの (画像、js、クエリなど) の最適化に時間を費やすほどにはカウントされないことを示しています。

ウェブサイトの最適化を試みたときに学んだことは次のとおりです。

  • インライン css の最適化に時間を費やし、それを可能な限り削減することは、その時間を他の最適化に費やすことほど多くはありません。ただし、Web ページでより最適化された CSS コードを使用すると、違い (速度が小さいか検出できない場合さえあります) が常に発生します。
于 2013-10-18T06:07:07.133 に答える