JSFiddle - React, Tailwind, and code Playground

by madobon

HTML

<div id="container">
    <div id="header">ヘッダー</div>
    <div id="navi">ナビゲーション
        <button id="button">Execute!</button>
    </div>
    <div id="contents">ページの内容
        <ul class="list">
            <li class="item">アイテム１</li>
            <li class="item">アイテム２</li>
            <li class="item">アイテム３</li>
            <li class="item">アイテム４</li>
        </ul>
    </div>
    <div id="footer">フッター</div>
</div>

JavaScript

(function () {
    "use strict";

    $('#button').on('click', function () {
        console.time('A');
        for (var i = 0; i < 5000; i++) {
            $('#contents .item')
        }
        console.timeEnd('A');
        
        console.time('B');
        for (var i = 0; i < 5000; i++) {
            $('.item')
        }
        console.timeEnd('B');
        
    });
}())