パフォーマンス的観点から見た css プロパティの書く順

いつも css を書く際プロパティ順を気にせず書いているのですが、パフォーマンス的に css プロパティの書く順で適したものはあるのでしょうか。知見のある方、ご教示いただけますと幸いです。

行動規範の内容に同意します

回答3件

競合した内容でなければ人が認識できるほどの違いはないと思います

投稿2017/06/17 08:25

yambejp

総合スコア117630

ベストアンサー

これから書く内容は、「理論上は」という但し書きが付きます。

リフローとリペイント

レンダリングエンジンによって呼称が変わりますが、ブラウザにはリフロー、リペイントの機能が備わっており、リフロー回数/リペイント回数が少ない方がパフォーマンスの向上が期待できます。

リフロー … レイアウトを再構築する事。「レイアウト(Layout)」と呼ぶ実装もある。
リペイント … 再描画する事。「ペインティング(Painting)」と呼ぶ実装もある。

これらの概念はJavaScript + DOMで説明されることが多いですが、CSS にも関係しています。

レイアウトに影響するプロパティを先に書く

例えば、display: none が存在した場合、color: black や background-color: white はWebページへの描画に影響を与えず、無用の長物と化します。

CSS
1.foo {
2  display: none;
3  color: black; /* 前述のdisplay: noneによって機能しなくなる */
4  background-color: white; /* 前述のdisplay: noneによって機能しなくなる */
5}

そういう意味では display プロパティを先に書いておく方がパフォーマンス上都合が良いといえるかもしれません。

ブラウザはあるセレクタ上に存在するプロパティ全てを解析し、有効なプロパティだけを拾い、レイアウト/ペイントする事を試みるはずです。
仮にプロパティを1文ずつ拾い、後続の有効なプロパティを1文ずつ拾う実装があった場合、先に後続のプロパティに影響を与えるプロパティ(display)を書く方がわずかながらパフォーマンスが向上する事が期待できます。
逆に全てのプロパティを拾った後に有効なプロパティだけをリストアップする実装であれば、プロパティの順序はパフォーマンスに影響を与えません。
後はリフロー/リペイントのタイミングに依存します。

Re: theinternet さん

投稿2017/08/01 12:03