2014/10/17

jQuery.dataとhtml5のdata-でどちらが速いか試してみた

状態や何かしらの値を要素と関連づいた状態で保存したい時がある。
例えばアコーディオンUIで今開いてる状態か閉じてる状態か…など。
(アコーディオンの場合はクラス名で良さそうだけど)

思いついたのはjQueryのdataメソッドを使う方法とhtml5のdata-**を使う方法
どっちが速いのか試してみた
それぞれ1000回、値を入れた後、取得するというやり方でやってみた。
  1. /jQueryのdataの場合  
  2. $(要素).data('名前', 値);  
  3. //7ms  
  4.   
  5. //html5のdata-の場合  
  6. $(要素).attr('data-名前', 値);  
  7. //11ms  
  8.   
  9. ※chromeで測定  
測ってみたらdataを使う方が若干早かったけど、気にしなくてもいい程度だった。
html5の方がhtmlを変更する分、ずっと遅いのかと思っていたがそんなことなかった。

1 件のコメント: