Riot.jsとjQueryのページロード時間比較 - ピティナ開発者ブログ

こんにちは。最近は長袖一択の新人社員平田です。前回もRiot.jsについての記事を書きましたが、ふと疑問に思ったので今回はRiot.js、jQueryを使った簡単なDOMの生成速度について検証してみました。

動作環境

サーバー：Ubuntu 14.04.4 (Vagrant)
jQuery: 2.1.1
Riot.js: 2.3

Riot.jsのバージョンは、比較的最近まで2.3だったと思っていたら、最新バージョンはいつの間にか2.6.4になっていました。開発が活発に行われていることの証左ですね。

今回は長い文字列を一文毎に区切り、一文が長い順に並べたあとに、カードパネルでそれぞれを囲んだものを表示するものを作りました。長い文字列として採用したものは、何故かこのブログでよく使われる方丈記で、9400文字程度あります。

jQueryでのソースコード

<head>
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
</head>
<body>
    <div class="card-tag">　</div>
    <script>
       var log_str = '行く川のながれは絶えずして、しかも本の水にあらず。...';
       var arr=log_str.split('。').sort(function(a,b){ if(a.length < b.length) return 1; if(a.length > b.length) return -1; return 0; });
           arr.forEach(function(v, i){
               $(".card-tag").append('<div class="card-panel" style="width:300px">' + v + '</div>');
           });
   </script>
</body>

scriptタグの中では、appendで要素を追加しています。要素を文字列として指定しなければならないし、文字列と変数を連結している'+ v +'の部分がイケてないですね。泣いている顔文字みたいです。

Riot.jsでのソースコード

下はindex.htmlで、

<body>
    <card>　</card>
    <!-- app タグを定義 -->
    <script src="card.tag" type="riot/tag"></script>
    <script>
       riot.mount('*');
   </script>
</body>

下はcard.tagです。

<card>
<div each="{ str, i in arr}" class="card-panel" style="width:300px">
    { str }
</div>
<script>
    var log_str = '行く川のながれは絶えずして、しかも本の水にあらず。...';
    this.arr=log_str.split('。').sort(function(a,b){ if(a.length < b.length) return 1; if(a.length > b.length) return -1; return 0; });
</script>
</card>

DOMを生成するのは配列を変形させればOKです。ソースコードが書きやすいだけでなく、すんなり理解できるのがいいですね。

バニラJS

素のJSだとscriptタグの部分は以下のように書けます。

var arr=log_str.split('。').sort(function(a,b){ if(a.length < b.length) return 1; if(a.length > b.length) return -1; return 0; });
        arr.forEach(function(v, i){
            var element = document.createElement('div');
            element.innerHTML = v;
            element.style.width = '300px';
            element.classList = 'card-panel'
            var objBody = document.getElementsByClassName("card-tag").item(0);
            objBody.appendChild(element);
        });

DOM操作をバニラJSで書くのは二度とやりたくないですね。クラスを取得するだけで'document.getElementsByClassName'は流石に長すぎると思います。

比較結果

下のグラフでは、10回測定した平均ロード時間を表示しています。エラーバーも表示してみました。 f:id:ptna_it:20161024153734p:plain

cacheはキャッシュを有効にした状態のロード時間で、Riot.jsなど名前がついているものはキャッシュを都度クリアしながら測定したものです。若干jQueryよりもRiot.jsのロード時間のほうが速いですね。Riotのコンパイラは軽いので、そのこともロード時間の短縮に寄与していると思われます。

流石に素のJSには勝てませんでしたが、開発に時間と労力がかかるので、極限までロード時間を短くしたい、という場合以外には使わないほうが良さそうです。

感想

今回はシンプルな題材だったため、そこまで大きな差は出ませんでしたが、DOMの生成、操作速度がページロード時間に大きく影響を与えるようなアプリケーションの場合、ソースの書きやすさ、レンダリングの速さの面でもRiot.jsが有効な選択肢だといえるでしょう。

(著: 平田真人)