1

私は今日OOCSSについて読んでいましたが、そのアプローチを使用することで2つの利点があると言われています

  1. CSSの短縮=パフォーマンスの向上
  2. 保守性の向上

2番目の点に同意しますが、最初の利点は、再利用性を高めるクラスをhtmlに追加することで、cssを短くすることです。ただし、Webサイト全体のCSSファイルはブラウザーにキャッシュできますが、各ページのHTMLは異なります。

私の質問は、CSSファイルを短くするとhtmlにバイト（クラス）を追加することでサイト全体のパフォーマンスを向上させることができるのに対し、cssは単一のファイルであり、キャッシュに一度にダウンロードされるということです。

4

3 に答える 3

5

CSSセレクターを簡素化し、プロパティをDRYに保ち、classHTMLで属性を使用することにより、リフローとリペイントは（理論的には）軽量になり、サイトのスムーズさと全体的なパフォーマンスが向上します。

ときにリフローして塗り直します

  • ウィンドウのサイズ変更
  • フォントの変更
  • スタイルシートの追加または削除
  • ユーザーが入力ボックスにテキストを入力するなど、コンテンツの変更
  • ：hoverなどのCSS疑似クラスのアクティブ化（IEでは兄弟の疑似クラスのアクティブ化）
  • クラス属性の操作
  • DOMを操作するスクリプト
  • offsetWidthとoffsetHeightの計算
  • style属性のプロパティを設定する

（上記のリストは、Reflows＆Repaints：CSS PerformanceがJavaScriptを遅くしていますか？ OOCSSの作成者であるNicole Sullivanによるものです）

また、このビデオを見て、リフローとリペイントの動作を確認してください：http ://www.youtube.com/watch?v=ZTnIxIA5KGw （約30秒の時間）

とは言うものの、簡単に解析できるCSSは、保守可能なコードの品質だけでなく、サイトの応答性（スムーズさなど）も向上させます。

于 2012-03-22T13:08:58.283 に答える
1

明らかに、これには意味のある答えはありません-高速の定義は何ですか？何バイトが多すぎますか？

簡単に言うと、HTMLを圧縮し、正しくキャッシュし、適切に再利用する場合、意味のある違いはありません。

CSSクラスを追加する必要がある場合は、すべての</li>s、''など、</body>およびyourとyourを削除してください</html>。また、単一の単語であり、問​​題のある文字が含まれていない属性の場合は、"それらを囲むものを削除します。これらの変更は、クラスの追加とバランスを取る必要があります。

（それが少し厄介に聞こえた場合、私は実際にあなたのキャッシングレイヤーでそれを行うことをお勧めします-このようなものが仕事をします：

$page_content = str_replace(array("</option>","</td>","</tr>","</th>","</dt>","</dd>","</li>","</body>","</html>"),"",$page_content);       
$page_content = preg_replace('/(href|src|id|class|name|type|rel|sizes|lang|title|itemtype|itemprop)=(\"|\')([^\"\'\`=<>\s]+)(\"|\')/i', '$1=$3', $page_content);                
$page_content = preg_replace('!\s+!', ' ', $page_content);

）。

于 2012-03-04T18:49:03.457 に答える
1

「短いcss」によるパフォーマンスの向上は2つあります。

  1. 小さいスタイルシート
  2. 短いセレクター

長いcssセレクターは非効率的です。Steve Souders（とりわけ）は、CSSセレクターのパフォーマンスについて幅広く書いています。より効率的なセレクターは、おそらく複数のクラスのいくつかの余分なバイトを相殺する以上のものです。

LESSやSassなどのCSSメタ言語を使用する。あなたが雇用する場合@extend、またはmixinsあなたにすべての世界の最高を与える場合。

于 2012-03-04T19:31:22.943 に答える