webサイトを構成する際、HTMLの中にcssとjavascriptのタグをインラインで組み込むことが多いと思う。
その際、cssは先に、javascriptはあとに書いた方がいいよというお話。
簡単に説明すると、
①ブラウザはダウンロードしてきたものから順次レンダリングしようとする
②cssはHTMLを表示するためのレイアウトを決定し、javascriptはHTML表示後の動きを決定する
ということがポイント。
HTMLが呼ばれた順番にブラウザ上ではページが表示されていく。よってページのレイアウトを決めるCSSが先に読み込まれていた方が表示は早い。再度レイアウトを変更する必要がないから。
また、javascriptはHTML構成後の動きを決定する部分で在るので、HTMLが完全に読み込まれた後でもいい。言ってみれば完全にブラウザ上でページが構成された後でもいい。
なので、cssは先に、javascriptはあとに書くことでHTMLの「体感速度」が向上するわけですね。
ちなみにcssとjavascriptをできるだけ外部コンポーネントとして構成してあげるとブラウザにページキャッシュとして保存されるのでより高速化するみたいですね。
ポイントは
①css、javascriptはできるだけ外部コンポーネント化
②どうしてもインラインに記述する場合はcssが先、javascriptが後。
参考：
http://www.onflow.jp/cyano/archives/143
http://www.inter-office.co.jp/contents/188/
0 件のコメント:
コメントを投稿