CSSの短縮カラーコード(3桁)は遅いのか検証してみた
投稿日: 2017/11/06 更新日: 2018/05/31
CSS
目次
短縮カラーコードとは
CSSで色を指定するとき、16進数6桁で書くのが一般的です。#FF0000みたいな感じ。
ですが実はこれを3桁で書けるのをご存知ですか？#FFFみたいな感じ。
え？知ってます？
まぁ最近はありふれてますので、ご存知の方も多いはず。
6桁と3桁はどちらが良い？
これ、コーディングする人は一度は悩んだんじゃないかと思います。
え？私だけ？
はい、私は良く悩むんです。
一応、メリデメはあるのでケースバイケースバイと言えばそうかもしれません。
| タイプ量 | 色数 | 対応ブラウザ | |
| 6桁 | 多い | 多い | 全ブラウザ対応している |
| 3桁 | 少ない | 少ない | 対応していないブラウザあり |
6桁の場合は色数が多いので、デザインの幅が広がりますね。
一方、3桁は未対応ブラウザがある可能性があり、そもそも色がバグるかもしれません。
とまぁ、これだけ聞けば6桁で良い気がしてきます。
でも、私は画家じゃないし絶妙な色彩感覚もないので、私的には3桁で十分。
それに、未対応ブラウザはCSSだけでなくJavaScript も動かなかったりします。
過去の遺産を追いかけても仕方ないかなと思います。
※早くIEなくなればいいのに(笑)
というわけで私は基本的に3桁で書いてるんですが、もうひとつ気になる指標があることに気づいたのです。
もうそれが気になって夜も眠れなくなったので、検証してみました。
6桁と3桁はどちらが速い？
まずは予想してみる
私の予想は「6桁が速い」です。
3桁について未対応ブラウザがあるということは「3桁を6桁に変換する処理があるかも？」と予想するからです。
まぁでも16進数の変換なので、大差もない気もしてますが、、、
検証ブラウザ
- IE11
- Edge
- Firefox
- Chrome
- Chrome for Android
- iOS Safari
検証OS
- Windows10
- iOS11
- Android7
検証プログラム
今回は様々な環境で検証してみますので、検証しやすいように本ページにプログラムを埋め込んでみます。
みなさんも実際に試してみてください。
CPUやブラウザのバージョン違いにより結果は変わるかもしれませんので、あくまで一例として参考にしてくださいね。
function measurement(func, result) {
var start = new Date().getTime();
for (var i = 0; i > 10000; i++) {
func();
}
var li = document.createElement('li');
li.textContent = new Date().getTime() - start;
document.getElementById(result).appendChild(li);
}
function code6() {
document.getElementById('target').style = 'background-color:#FFFFFF; color: #000000';
document.getElementById('target').style = 'background-color:#000000; color: #FFFFFF';
}
function code3() {
document.getElementById('target').style = 'background-color:#FFF; color: #000';
document.getElementById('target').style = 'background-color:#000; color: #FFF';
}どちらが速いか？結果は
計測結果を表にします。
6桁計測結果
| 回数/ﾌﾞﾗｳｻﾞ | IE11 | Edge | Firefox | Chrome | Chrome for Android | iOS Safari |
|---|---|---|---|---|---|---|
| 1回目 | 42 | 78 | 110 | 57 | 233 | 155 |
| 2回目 | 37 | 76 | 105 | 43 | 223 | 151 |
| 3回目 | 41 | 74 | 94 | 45 | 233 | 154 |
| 4回目 | 45 | 77 | 86 | 54 | 231 | 152 |
| 5回目 | 42 | 83 | 95 | 48 | 218 | 152 |
| 6回目 | 43 | 78 | 112 | 48 | 228 | 148 |
| 7回目 | 43 | 75 | 99 | 49 | 208 | 126 |
| 8回目 | 40 | 79 | 92 | 50 | 208 | 144 |
| 9回目 | 43 | 83 | 90 | 44 | 210 | 153 |
| 10回目 | 42 | 83 | 87 | 56 | 225 | 153 |
| 平均 | 41.8 | 78.6 | 97.0 | 49.4 | 221.7 | 148.8 |
| 標準偏差 | 2.0 | 3.2 | 8.8 | 4.7 | 9.6 | 8.2 |
※単位はミリ秒
3桁計測結果
| 回数/ﾌﾞﾗｳｻﾞ | IE11 | Edge | Firefox | Chrome | Chrome for Android | iOS Safari |
|---|---|---|---|---|---|---|
| 1回目 | 44 | 88 | 114 | 50 | 226 | 146 |
| 2回目 | 43 | 90 | 106 | 47 | 211 | 146 |
| 3回目 | 42 | 82 | 106 | 72 | 210 | 154 |
| 4回目 | 45 | 90 | 142 | 46 | 210 | 149 |
| 5回目 | 40 | 76 | 115 | 42 | 226 | 145 |
| 6回目 | 38 | 79 | 100 | 52 | 209 | 151 |
| 7回目 | 43 | 89 | 125 | 40 | 207 | 152 |
| 8回目 | 43 | 86 | 124 | 39 | 216 | 153 |
| 9回目 | 44 | 91 | 112 | 50 | 208 | 151 |
| 10回目 | 42 | 91 | 102 | 43 | 216 | 150 |
| 平均 | 42.4 | 86.2 | 114.6 | 48.1 | 213.9 | 149.7 |
| 標準偏差 | 2.0 | 5.1 | 12.1 | 9.0 | 6.7 | 3.0 |
※単位はミリ秒
考察
各ブラウザとも、6桁と3桁で大きな差はないようです。
6桁のほうが微妙に早くも見えますが、誤差の範囲なので同じと考えて良いでしょう。
まとめ
特に変わらず、という測定結果でした。
6桁と3桁の比較以前に、そもそも速いので性能面は特に気にするところではないと言えますね。
ですので、普段は3桁を使って、色を細かく指定したいときは6桁を使うと良いでしょう。
性能とか気にしてないで配色とか気にしたほうが良いってことですかね(笑)
2018/5/31 追記
今回はCSS自体の描画に関して性能測定をしたので、速度は変わらないという結果が出ました。
ただし総合的には3桁のほうが確実に速くなります。
3桁のほうが単純にファイルサイズが小さくなるので、ネットワーク転送時間が短くなるためです。
最近はスマホの利用率がかなり高まり、ネットワーク転送量を気にしないといけなくなってきました。
多角的に検証して物事を判断したいものですね。