JSFiddle - React, Tailwind, and code Playground

by uedatakuya

HTML

<script src="https://dl.dropboxusercontent.com/u/2219262/msgpack.js"></script>
<div>
    <input id="count" value="100000" />
    <button id="start">start</button>
</div>Result
<ul>
    <li>JSON: <span id="json">-</span>ms</li>
    <li>Msgpack: <span id="msgpack">-</span>ms</li>
</ul>

JavaScript

var jsonData = '{"query":{"random":[{"id":902502,"ns":0,"title":"Brand-new \u30b3\u30df\u30e5\u30cb\u30b1\u30a4\u30b7\u30e7\u30f3"},{"id":8194,"ns":0,"title":"\u30a2\u30ec\u30af\u30b5\u30f3\u30c9\u30eb\u30fb\u30b0\u30ed\u30bf\u30f3\u30c7\u30a3\u30fc\u30af"},{"id":1408940,"ns":0,"title":"\u5c71\u53e3\u767e\u60e0\u30d9\u30b9\u30c8\u30fb\u30b3\u30ec\u30af\u30b7\u30e7\u30f3II \u301c\u3044\u3044\u65e5\u65c5\u7acb\u3061\u301c"},{"id":2919438,"ns":0,"title":"\u6b66\u7530\u30ab\u30aa\u30ea"},{"id":2691921,"ns":0,"title":"\u4f50\u8cc0\u770c\u7acb\u5510\u6d25\u897f\u9ad8\u7b49\u5b66\u6821"},{"id":1257640,"ns":0,"title":"\u6a5f\u52d5\u6226\u58eb\u30ac\u30f3\u30c0\u30e0 \u30ae\u30ec\u30f3\u306e\u91ce\u671b \u30a2\u30af\u30b7\u30ba\u306e\u8105\u5a01"},{"id":2285769,"ns":0,"title":"USR"},{"id":766050,"ns":0,"title":"\u5927\u5206\u5143\u753a\u77f3\u4ecf"},{"id":2031850,"ns":0,"title":"\u30a4\u30ea\u30e4\u30b7\u30e5"},{"id":140798,"ns":0,"title":"\u7d9c\u82b8\u7a2e\u667a\u9662"}]}}';
var data = JSON.parse(jsonData);
var msgpackData = msgpack.pack(data);

document.querySelector('#start').addEventListener('click', function () {
    var count = parseInt(document.querySelector('#count').value, 10);

    var now = new Date().getTime();
    for (var i = 0; i < count; i++) {
        JSON.parse(jsonData);
    }
    document.querySelector('#json').innerText = new Date().getTime() - now;

    now = new Date().getTime();
    for (var i = 0; i < count; i++) {
        msgpack.unpack(msgpackData);
    }
    document.querySelector('#msgpack').innerText = new Date().getTime() - now;
}, false);