検証

選択時に親要素のクラスに追加するか、直接選択要素を選択するか

ちょっと気になったので色々検証してみました。

簡単にいえばJavascript VS CSSみたいなもんです。

検証

1)親クラスに選択クラス名を追加して選択

https://www.coffee-break-designs.com/labs/css_vs_js/css_test/

  •  .wrap.i1.i2
    • .item.i1
    • .item.i2
    • …(10000個)

sass

// 同じクラス名を持つ親なら色が変わる
@for $i from 0 through 10000
  .i#{$i}
    .i#{$i}
      background-color: #003

coffee script

wrap.setAttribute("class",add_class_list) #add_class_listははじめに"i1 i2 i3 ... "を宣言してます。

2)JSで1つずつ選択

https://www.coffee-break-designs.com/labs/css_vs_js/js_test/

  • .wrap
    • .item.ac
    • .item.ac
    • …(10000個)

css

.item.ac{ background-color:#00F }

coffee script

 for i in items
   i.classList.add 'ac'

 

どちらが早いか調べてみました。

結果(Chrome調べ)

1)親クラスに選択クラス名を追加して選択

  • 2979.4 ms
  • 2.0 ms setAttribute

合計:2981.4ms

2)JSで1つずつ選択

  • 534.8 ms start
  • 93.9 ms program
  • 6.1 ms start
  • 1.1 ms

合計:635.9ms

JS圧勝

もう少し検証

1)の検証が実際にCSS処理はどれぐらいかわからないので下記の様なのも作りました。

1万個のクラス名を設定しているsetAttributeが時間かかってるかもしれないからそれを省いたバージョン

https://www.coffee-break-designs.com/labs/css_vs_js/simple_css_test/

  • .wrap.ac
    • .item
    • .item

css

.ac .item{ background-color:#00F }

coffee script

wrap.classList.add 'ac'

単純に親要素のクラスを変えてひっくり返すってやつです。

結果は

  • 144.1 ms

合計:144.1ms

さらにCSSにセレクトなしの純粋なJSのsetAttributeだけ

https://www.coffee-break-designs.com/labs/css_vs_js/simple_css_test2/

coffee script

wrap.setAttribute("class",add_class_list)

sass

//@for $i from 0 through 10000
//  .i#{$i}
//    .i#{$i}
//       background-color: #003
  • 67.2 ms program
  • 2.1 ms setAttribute

合計:69.3 ms

さらに検証

1つだけ選択して選ぶ場合

  •  .wrap.i123
    • .item.i1
    • .item.i2
    • .item.123

VS

  • .wrap
    • .item.i1
    • .item.i2
    • .item.i123.ac

まずは親要素にセレクトクラスを書き込むタイプ

https://www.coffee-break-designs.com/labs/css_vs_js/one_select_css/

coffee script

wrap.classList.add 'i1234'
  • 70.7ms
  • 1.0ms setAttribute

合計:71.7ms

次にJSで選ぶタイプ

https://www.coffee-break-designs.com/labs/css_vs_js/one_select_js/

coffee script

 i = wrap.getElementsByClassName('i123')[0].classList.add 'ac'

処理に 82.0 ms

合計:82.0 ms

 

1万個あるのにそんなに変わらず

結論

JSが早いし、親要素より子要素(ターゲット)を直接書き換えたほうが早い