人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSの表示速度の差について教えてください。

「HTMLファイル」に“直接書き込んだCSS“を使ってページを表示する場合と、
「HTMLファイル」で“CSSファイルを読み込んで”読み込んだCSSを使用してページを表示する場合とでは
どちらの方がページの表示が軽くなのでしょうか?


【コンピュータ処理イメージ】

■HTMLにCSS直書きの場合
HTMLファイル読む → 上から探していきCSSの定義を読み込み → 続いてHTMLファイルの記述を読む → CSS適用箇所があればCSSをそこに適応する

■CSSを読み込む場合
HTMLファイル読む → 上から探していくとCSS読み込みファイルを発見 → CSS読み込みファイルの中身を参照できるようにする → 続いてHTMLファイルの記述を読む → CSS適用箇所があれば適応


こう考えたところ、CSSを読み込んだ方が「CSS参照時間」が増えてしまうため、処理が重くなってしまうと考えています。
実際にはどちらの場合の方が表示処理は軽くなるのでしょうか?

●質問者: ThinkThink
●カテゴリ:コンピュータ インターネット
✍キーワード:CSS HTML イメージ コンピュータ ファイル
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● backupper
●20ポイント

小規模サイトの場合はどっちも似たり寄ったりですが、1ページ単位で厳密に考えるとイメージされている通りインラインで記述した方がリクエストのコストが減る分速くなると思います。

ただし、1ページの場合は体感上有意な差が出ない程度(webサーバのMaxClientsの設定等が適正な場合)ですが、規模が大きくなってcssを多くのファイルで共有している場合は、外部cssにしておくとキャッシュが効くのでパフォーマンスはインラインの場合よりも上がります。

管理上も別ファイルにしておくとなにかと便利なので、小規模でも別ファイルにしておいた方が良いと思います。インラインで書く場合は、ユーザーによるカスタマイズ部分ぐらいしかオススメするシーンが思い浮かばないです。

http://www.amazon.co.jp/dp/487311361X

◎質問者からの返答

ご回答ありがとうございます。

> ただし、1ページの場合は体感上有意な差が出ない程度(webサーバのMaxClientsの設定等が適正な場合)ですが、規模が大きくなってcssを多くのファイルで共有している場合は、外部cssにしておくとキャッシュが効くのでパフォーマンスはインラインの場合よりも上がります。


境界分けとして考えてみたのですが、

つまるところ 「キャッシュが効いてからは、CSSファイルを読み込んでレンダリングする方が早い」ということになるのですね。


>管理上も別ファイルにしておくとなにかと便利なので、小規模でも別ファイルにしておいた方が良いと思います。

アドバイスありがとうございます。


>ユーザーによるカスタマイズ部分ぐらいしかオススメするシーンが思い浮かばないです。

イメージ的には9割がたの大部分を、

CSSファイルで内で定義しているCSSを使用するが、

一部に関しては「インラインとして直接書いて、ある一部分だけをカスタマイズする」

(例えば ここだけピンポイントで文字サイズを変更したい、などの場合)

には、インラインで使用する用途も発生する、という考えで良いでしょうか。


2 ● goodvn
●20ポイント

HTMLファイル読む → 上から探していきCSSの定義を読み込み → 続いてHTMLファイルの記述を読む → CSS適用箇所があればCSSをそこに適応する

たぶん,実際の処理では,

・HTML を一気に読み込む

・CSS の定義を,並行して読み込む

・レンダリング

という流れになるので,上記のように,途中で CSS の定義を読むために HTML 関係の処理が止まったりしません

http://www.google.com/?q=スレッド

サーバ側の回線が極端に遅い場合などを除けば,別ファイルにしたからといって処理が遅くなる事はまず無いでしょう

試しに,数MB ある CSS を,直接書いた場合と,外部ファイルにした場合とで試しては如何でしょうか

◎質問者からの返答

ご回答ありがとうございます。

>という流れになるので,上記のように,途中で CSS の定義を読むために HTML 関係の処理が止まったりしません

処理はとまらないのですね(驚)


レンダリングについても

ある一定を読み込んで → レンダリング → 読み込んで → レンダリング ではなく

イメージとしては HTMLを一気に読み込む → CSSの定義も読み込む → レンダリング ということなのですね。


>試しに,数MB ある CSS を,直接書いた場合と,外部ファイルにした場合とで試しては如何でしょうか

ありがとうございます。

一度試してみようと思います。


3 ● hirorock
●20ポイント

クライアントのブラウザの設定にもよりますが、同一ファイルはキャッシュしますので、同一CSSファイルを異なるページで読み込ませる場合は外部CSSファイルを読み込ませる方が処理は軽くなります。

http://q.hatena.ne.jp/

◎質問者からの返答

ご回答ありがとうございます。


私にはキャッシュの考えを知らなかったのですが、そういう訳なのですね・・・

キャッシュを使用している場合、

外部CSSファイルを読み込ませる方が処理は軽くなるということ、覚えておきます。


4 ● God_24
●20ポイント

初めて見るページだと、サーバに対してCSSファイルをリクエストする時間が省略されるので、「HTML直書き」の方が早いでしょう。

2回目の閲覧以降、自分のPC(またはプロキシ)にキャッシュが残っている場合は表示処理時間に違いが出ることはほとんど無いでしょう。

私はCSSファイルを外部に設置するメリットは表示処理時間の違いではなく、HTMLファイルとCSSファイルが独立しながらページのデザインの更新が一括で行えることにメリットがあると思います。

http://www.dspt.net/stylesheet_css/001/014.html

◎質問者からの返答

ご回答ありがとうございます。


>初めて見るページだと、サーバに対してCSSファイルをリクエストする時間が省略されるので、「HTML直書き」の方が早いでしょう。

つまり、初めて見るページの場合であれば

HTMLにCSS直書きの場合は「CSS内容読み込み時間」のみでレンダリング可能。

HTMLにCSSファイルを外部読み込みする場合は「CSSファイルの参照時間」+「CSS内容読み込み時間」が必要となる。

この為、キャッシュを使用しないでレンダリングする場合では、

HTMLにCSSファイルを外部読み込みすると「CSSファイルの参照時間」が発生してしまうため、

HTMLに直書きされているファイルの方が読み込み時間が早くなる、という風になるのですね。


【キャッシュを使用してレンダリングする場合】

恐らく 1ページだけであれば

HTML直書きの場合も、CSSファイル外部読み込みの場合のどちらでも、

「キャッシュを使用したCSS内容読み込み時間」だけで済むと思うのですけれども、

そこから、複数ページ(2ページ以上に渡る場合は)

CSSファイル外部読み込みした場合の方が早くなるということですよね。


HTMLにCSSが直書きされたHTMLファイルが複数ページある場合

「HTML読み込み時間」 + 「CSS内容を読み込んだ上で処理する時間」 が必要となってくる。

(※)直接書かれているCSSファイルの部分を、1ページ1ページで読み込む動作が必要となるため、遅くなる。

CSSファイルを外部読み込みしたHTMLファイルが複数ページある場合

「HTML読み込み時間」 + 「CSS内容を処理する時間」 が必要となってくる。

(※)一度読み込んだCSSファイルのCSSの記述部については、読み込みは一度で済むため、処理が早くなる。


ちょっと考えが長くなってしまい申し訳ありません・・・(汗)

この考えの理解で合っていますでしょうか。



[疑問]

もしよろしければ、少しお聞きしたいのですけども、

自分のPC(またはプロキシ)にキャッシュが残っている場合とありますが、

自分のPCはクライアントで、プロキシはサーバー側だと思っているのですが、

これは、両側のどちらかにキャッシュが残ってさえすればいいのでしょうか?


5 ● Quphondi
●20ポイント

コメントがつけられなかったので、回答にて

余談な回答なので、お気に召さなければ0ポイントで結構です


各ファイル(CSS,js等々)が読み込み・表示のタイミング、所要時間についてはFirebugで確認ができます。


Firebug

https://addons.mozilla.org/ja/firefox/addon/1843


Firefox限定なのが難点ですが、CSSのデバッグ(継承関係が見られるのは非常に便利)にも使える逸品です。


あと、こちらも余談ですが(苦笑)

クライアントが携帯電話 auでez-webの時。こちらもHTML(XHTML)とCSSが使えますが、CSSを別ファイルにすると

CSSの反映は最後の最後になります。


HTML上で記載されたデザインでまず一旦表示され、一呼吸、0.3?0.5秒程度(「間がある」と認識できる程度)の

間が空いて、CSSデザインが反映されます。


まだ、特定機種でしか検証できていないのですが、PCでもWebブラウザが異なる(例:Internet Explorer/Firebox/Safari/Chrome…)と表示のタイミングは変わるかもしれません。


# もし、これを検証しているサイトがあるようでしたら、私もみたいです(苦笑)

◎質問者からの返答

ご回答ありがとうございます。


質問者さんがおっしゃられている余談が、私には為になりました。

お詳しい検証を進められているのですね(驚汗)

私はWeb暦が短くて色々とわからないことが多い状態なので、

とても助かります。


>HTML上で記載されたデザインでまず一旦表示され、一呼吸、0.3?0.5秒程度(「間がある」と認識できる程度)の

間が空いて、CSSデザインが反映されます。

レンダリングについては他の回答者様も上げてくださっていました。

そして、時間のお話までして下さってありがとうございます。


>PCでもWebブラウザが異なる(例:Internet Explorer/Firebox/Safari/Chrome…)と表示のタイミングは変わるかもしれません。

ソフト上の組み込み方によって、ファイル内容の読み込み順序が変わる可能性があるからということですよね。

この辺りどうなんでしょうか・・・変わるような気はしますが、私もちょっと気になってきました。。。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ