スマートフォンブラウザで jQuery Sizzleと filterAPIを合わせて使った時の速度計測をしました

##検証アイテム
ライブラリ：
jQuery 1.8

素材：
画像5枚

検証ブラウザ：
iPhone : moblie safari
android: 標準ブラウザ

検証端末：
iPhone5  SB
iPhone4s AU
GalaxyS2 Docomo

回線；
iPhone : 3G
android: LTE

##検証方法
画像を5枚用意して、画像のクラス名を取得してからdata属性の値を取得する
5回実行させ平均値を取得

```html

<div id="hoge">
    <div class="swipeItem">
        <p><img src="http://farm4.staticflickr.com/3325/4621591811_c9069cf272_z.jpg" data-resize="http://farm4.staticflickr.com/3325/4621591811_c9069cf272_z.jpg" class="userImg" />
        </p>
    </div>
    <div class="swipeItem">
        <p><img src="http://farm5.staticflickr.com/4016/4678552781_f714724cec_z.jpg" dataresize="http://farm5.staticflickr.com/4016/4678552781_f714724cec_z.jpg" class="userImg" />
        </p>
    </div>
    <div class="swipeItem">
        <p><img src="http://farm4.staticflickr.com/3432/3911751478_753f9bfcff_z.jpg" dataresize="http://farm4.staticflickr.com/3432/3911751478_753f9bfcff_z.jpg" class="userImg" />
        </p>
    </div>
    <div class="swipeItem">
        <p><img src="http://farm7.staticflickr.com/6183/6077778543_0357046ca7_z.jpg" dataresize="http://farm7.staticflickr.com/6183/6077778543_0357046ca7_z.jpg" class="userImg" />
        </p>
    </div>
    <div class="swipeItem">
        <p><img src="http://farm5.staticflickr.com/4014/4679185044_457327a19a_z.jpg" data-resize="http://farm5.staticflickr.com/4014/4679185044_457327a19a_z.jpg" class="userImg" />
        </p>
    </div>
    <div class="swipeItem">
        <p><img src="http://farm3.staticflickr.com/2003/2145680968_3e8b36eac5_z.jpg" data-resize="http://farm3.staticflickr.com/2003/2145680968_3e8b36eac5_z.jpg" class="userImg" />
        </p>
    </div>
</div>

```


##結果
###①imgのclassをSizzleで取得してfilterAPIでdata属性の値を取得

```
var timer = function (){
    var timerText1 = $('<p />')
    var start = +new Date()
    var testImage = $('img.userImg').filter('[data-resize = "http://farm4.staticflickr.com/3432/3911751478_753f9bfcff_z.jpg"]')
    var end = +new Date() - start
    var str = "timer1 \n imgをSizzleで取得してfilterAPIでdata属性の値を取得 \n 読み取れるまで" + end + "ms"
    $(timerText1).html(str)
    $('body').append(timerText1)
}
timer()
```
|回数  | iPhone4 3G | iPhone5 3G | Android 2.3 GalaxyS2 |
|:-----|:-----------|:-----------|:--------------------|
|1回目 | 12ms       | 4ms        | 1ms                 |
|2回目 | 12ms       | 5ms        | 1ms                 |
|3回目 | 42ms       | 1ms        | 1ms                 |
|4回目 | 12ms       | 2ms        | 1ms                 |
|5回目 | 22ms       | 3ms        | 1ms                 |
|平均値| 20ms       | 3ms        | 1ms                 |

###②imgのclassをスコープからfindAPIで取得、filterAPIでdata属性の値を取得

```
var timer2 = function (){
    var timerText2 = $('<p />')
    var start = +new Date()
    var testImage = $('#hoge').find('img.userImg').filter('[data-resize = "http://farm5.staticflickr.com/4016/4678552781_f714724cec_z.jpg"]')
    var end = +new Date() - start
    var str = "timer2 \n imgをIDスコープからfindAPIで取得、filterAPIでdata属性の値を取得 \n 読み取れるまで" + end  + "ms"
    $(timerText2).html(str)
    $('body').append(timerText2)
}
timer2()
```
|回数  | iPhone4 3G | iPhone5 3G | Android 2.3 GalaxyS2 |
|:-----|:-----------|:-----------|:---------------------|
|1回目 | 2ms        | 2ms        | 1ms                  |
|2回目 | 2ms        | 1ms        | 1ms                  |
|3回目 | 2ms        | 0ms        | 1ms                  |
|4回目 | 2ms        | 1ms        | 0ms                  |
|5回目 | 2ms        | 0ms        | 1ms                  |
|平均値| 2ms        | 0ms        | 0.8ms                |


###③imgのclassをgetElementsByClassNameで取得、filterAPIでdata属性の値を取得

```
var timer3 = function (){
    var timerText3 = $('<p />')
    var start = +new Date()
    var testImage = document.getElementsByClassName('userImg')
    var testImage = $(testImage).filter('[data-resize="http://farm3.staticflickr.com/2003/2145680968_3e8b36eac5_z.jpg"]')
    var end = +new Date() - start
    var str = "timer3 \n imgをgetElementsByClassNameで取得、filterAPIでdata属性の値を取得 \n 読み取れるまで" + end + "ms"
    $(timerText3).html(str)
    $('body').append(timerText3)
}
timer3()
```
|回数  | iPhone4 3G | iPhone5 3G | Android 2.3 GalaxyS2 |
|:-----|:-----------|:-----------|:---------------------|
|1回目 | 2ms        | 2ms        | 1ms                  |
|2回目 | 2ms        | 1ms        | 1ms                  |
|3回目 | 1ms        | 1ms        | 1ms                  |
|4回目 | 2ms        | 1ms        | 1ms                  |
|5回目 | 1ms        | 1ms        | 1ms                  |
|平均値| 1.6ms      | 1.2ms      | 1ms                  |


###④imgのclassをgetElementsByClassNameで取得、forで回してgetAttributeでdata属性の値を取得

```
var timer4 = function (){
    timerText4 = $('<p />')
    start = +new Date()
    testImage = document.getElementsByClassName('userImg')
    for(var i = 0, l = testImage.length; i < l; i++)
        if(testImage[i].getAttribute('data-resize') === "http://farm4.staticflickr.com/3325/4621591811_c9069cf272_z.jpg"){
			var end = +new Date() - start
        	var str = "timer4 \n imgをgetElementsByClassNameで取得、forで回してgetAttributeでdata属性の値を取得 \n 読み取れるまで" + end  + "ms"
    	    $(timerText4).html(str)
	        $('body').append(timerText4)
        	return;
        }
}
timer4()
```
|回数  | iPhone4 3G | iPhone5 3G | Android 2.3 GalaxyS2 |
|:-----|:-----------|:-----------|:---------------------|
|1回目 | 0ms        | 0ms        | 0ms                  |
|2回目 | 0ms        | 0ms        | 0ms                  |
|3回目 | 0ms        | 0ms        | 0ms                  |
|4回目 | 0ms        | 0ms        | 0ms                  |
|5回目 | 0ms        | 0ms        | 0ms                  |
|平均値| 0ms        | 0ms        | 0ms                  |