2017/11/06

CSSの短縮カラーコード(3桁)は遅いのか検証してみた

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桁計測結果

    3桁計測結果

      ボタンをクリックすると、計測をします。(ミリ秒)


      どちらが速いか?結果は

      計測結果を表にします。


      6桁計測結果

      回数/ブラウザ IE11 Edge Firefox Chrome Chrome for Android iOS Safari
      1回目427811057233155
      2回目377610543223151
      3回目41749445233154
      4回目45778654231152
      5回目42839548218152
      6回目437811248228148
      7回目43759949208126
      8回目40799250208144
      9回目43839044210153
      10回目42838756225153
      平均41.878.697.049.4221.7148.8
      標準偏差2.03.28.84.79.68.2

      ※単位はミリ秒


      3桁計測結果

      回数/ブラウザ IE11 Edge Firefox Chrome Chrome for Android iOS Safari
      1回目448811450226146
      2回目439010647211146
      3回目428210672210154
      4回目459014246210149
      5回目407611542226145
      6回目387910052209151
      7回目438912540207152
      8回目438612439216153
      9回目449111250208151
      10回目429110243216150
      平均42.486.2114.648.1213.9149.7
      標準偏差2.05.112.19.06.73.0

      ※単位はミリ秒


      考察

      各ブラウザとも、6桁と3桁で大きな差はないようです

      6桁のほうが微妙に早くも見えますが、誤差の範囲なので同じと考えて良いでしょう。


      まとめ

      特に変わらず、という測定結果でした。

      6桁と3桁の比較以前に、そもそも速いので性能面は特に気にするところではないと言えますね。


      ですので、普段は3桁を使って、色を細かく指定したいときは6桁を使うと良いでしょう。


      性能とか気にしてないで配色とか気にしたほうが良いってことですかね(笑)



      このエントリーをはてなブックマークに追加