2

どちらが速くレンダリングされますか？

// Just HTML
<div id="holder">
    <div style="float:left;">test1</div>
    <div style="float:left;">test2</div>
    <div style="float:left;">test3</div>
</div>

また

// CSS
#holder div{
    float:left;
}

// HTML
<div id="holder">
    <div>test1</div>
    <div>test2</div>
    <div>test3</div>
</div>
4

4 に答える 4

6

実際にコンテンツを表示するという点では、コードの2つのセクション間の速度の違いはごくわずかです。ブラウザが異なれば、Webページをレンダリングするための実装も異なる可能性が高いため、あるブラウザで得られるわずかな速度の向上が、必ずしも別のブラウザに反映されるとは限りません。

読み込み時間に関しては、別の話です。はい。インラインスタイルは、ページの上部で行うリクエストが1つ少ないため、技術的には外部スタイルシートよりも高速ですが、コードの保守性のために外部スタイルシートを使用することをお勧めします。新しいスタイルシートを参照するたびにブラウザが別のリクエストを送信する必要があるため、パフォーマンスが問題になり始めるのは、複数のスタイルシートをロードしている場合のみです。ソリューション？スタイルシートを1つに連結するだけです。

于 2011-03-07T19:20:34.467 に答える
1

（HTTPリクエストが関係しているため）外部CSSは遅くなると思いますが、インラインスタイルは保守性にとって恐ろしく、色とレイアウトの値を一元化するというCSSの全体的なポイントを否定するため、反復する必要はありません。スタイルを変更するすべての要素。

こちらもご覧ください

于 2011-03-07T18:52:32.313 に答える
1

外部スタイルシートを使用したくないと想定している場合でも、要素のクラスを含む<head>でスタイルタグを使用すると、後でサーバー側のプログラミング言語で自動的に含めることが容易になります。インラインスタイル。些細な数のスタイルがない限り、合計バイト数も少なくなります。

Googleの新しい404ページをチェックしてください：彼らはスタイルタグに画像さえ持っています：

http://www.google.com/123412312

于 2011-03-07T19:06:13.160 に答える
0

ブラウジングに関しては、ブラウザの開発者ツールでこれをテストできることに違いはありません。他の回答ですでに述べたコードの保守性とは別に、インラインルールの特異性の問題もあります。それらは最高の特異性（1,0,0,0）を持っているため、他のすべてのカスケードをオーバーライドします。したがって、パフォーマンス基準に基づいて決定を下すのではなく、ユースケースを慎重に検討する必要があります

于 2019-06-02T20:59:01.263 に答える