jQueryはJavascriptでの直接DOMの操作より100倍遅いことが判明

よくjQueryは直接JavascriptでDOMを操作するより遅いと言われるので本当なのかどうか検証してみました。

検証した結果ではかなりの処理時間の差があり、やはりjQueryの方が100倍ほど遅いという結果になりました。

jQueryはJavascriptでの直接DOMの操作より100倍遅いのか？

検証したコードは以下の通りです。

<script>
    $(document).ready( function(){
        var    i = 0 ;
        var    j = 0 ;
        var    startTime = 0 ;
        var    str = "" ;

        //Javascript  DOM
        startTime = performance.now() ;
        var    obj = document.getElementById( "tbl1" );
        for( i = 0 ; i < obj.rows.length ; i++ ){
            for( j = 0 ; j < obj.rows&#91; i &#93;.cells.length ; j++ ){ str += obj.rows&#91; i &#93;.cells&#91; j &#93;.innerHTML ; } } console.log( "getElementById ExecTime&#91;" + ( performance.now() - startTime ) + "&#93;msec." ) ; //jQuery str = "" ; startTime = performance.now() ; var obj = $( "#tbl2 > tbody > tr" ) ;
        for( i = 0 ; i < obj.length ; i++ ){ var obj2 = $( "#tbl2 > tbody > tr:eq(" + i + ") > td" ) ;
            for( j = 0 ; j < obj2.length ; j++ ){
                str += obj2.eq( j ).text() ;
            }
        }
        console.log("JQuery ID      ExecTime&#91;" + ( performance.now() - startTime ) + "&#93;msec.");
    });
</script>

HTML本体には５つのセルで２０００行のTableタグを作ってあります。
（テーブルは２つ用意し、それぞれに「tbl1」、「tbl2」というIDを設定しています。）

以下が処理結果です。

//1回目
getElementById ExecTime[40.50000000279397]msec.
JQuery ID ExecTime[2776.0999999991327]msec.

//2回目
getElementById ExecTime[23.600000000442378]msec.
JQuery ID ExecTime[2750]msec.

//3回目
getElementById ExecTime[43.7000000019907]msec.
JQuery ID ExecTime[2748.9999999997963]msec.

//4回目
getElementById ExecTime[22.499999999126885]msec.
JQuery ID ExecTime[2708.699999999226]msec.

//5回目
getElementById ExecTime[22.89999999993597]msec.
JQuery ID ExecTime[2887.699999999313]msec.

どの回も処理時間に100倍近くの差がでています。

まとめ

jQueryは処理が書きやすく見通しの良いプログラムを作成できるのですが、簡単な処理であればJavascriptで直接DOMを操作した方が100倍近く処理が高速に動作することがわかりました。

jQueryの恩恵には大きなものがありますが、JavascriptでDOM操作で書けるような内容はjQueryを利用しない方が良いのかもしれませんね。

以上、「jQueryはJavascriptでの直接DOMの操作より100倍遅いことが判明」でした。