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

検証アイテム

ライブラリ：
jQuery 1.8

素材：
画像5枚

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

検証端末：
iPhone5 SB
iPhone4s AU
GalaxyS2 Docomo

回線；
iPhone : 3G
android: LTE

検証方法

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

<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