oxe/dev/web/performance/index.html

A mighty tiny web components framework/library

<base href="/">
<script>document.querySelector('base').href = location.hostname === 'vokeio.github.io' ? '/oxe/performance/' : '/web/performance/';</script>
<link rel="stylesheet" href="index.css">

<x-loop></x-loop>

<script type="module">
    import XElement from '../../src/element.js';

    class XLoop extends XElement {

        data() {
            return {
                items: [],
                message: '',
                count: 100000,
                raw() {
                    console.time('raw');
                    const template = document.createElement('template');
                    let html = '';
                    for (var i = 0; i < this.count; i++) {
                        html += `
                        <div class="box">
                            <div>${i}</div>
                        </div>
                        `;
                    }
                    template.innerHTML = html;
                    const raw = document.getElementById('raw');
                    raw.appendChild(template.content);
                    console.timeEnd('raw');
                },
                push() {
                    console.time('push');
                    for (var i = 0; i < this.count; i++) {
                        this.items.push({ number: i });
                        // this.items.push({ name: i, numbers: [ i ] });
                    }
                    console.timeEnd('push');
                },
                overwrite() {
                    console.time('overwrite');

                    // var users = [];
                    // for (var i = 0; i < 200; i++) {
                    //     users.push({ number: i, id: `${i}`, name: `${i}` });
                    // }

                    // var items = [];
                    // for (var i = 0; i < this.count; i++) {
                    //     items.push({ users });
                    // }

                    var items = [];
                    for (var i = 0; i < this.count; i++) {
                        items.push({ number: i });
                        // items.push({ name: i, numbers: [ i ] });
                    }
                    this.items = items;
                    console.timeEnd('overwrite');
                },
                clear() {
                    this.items = [];
                }
            }
        };

        render () {
            return /*html*/`
                <div class="wrap">
                    <div class="loader">Loader</div>
                </div>

                <h3><span bind="text:count"></span> bound elements</h3>
                <input bind="value:count=$value" type="number">
                <br>

                <button bind="onclick:push()">push</button>
                <button bind="onclick:overwrite()">overwrite</button>
                <button bind="onclick:raw()">raw</button>
                <button bind="onclick:clear()">clear</button>

                <div bind="each:[items,'item']">
                    <div class="box" bind="text:item.number"></div>
                </div>

                <div id="raw"></div>
            `;
            // <div each="{{item of items}}"><div class="box">{{ item.number }}</div></div>
            // <input value="{{item.number = $value}}"></input>
        };

    }

    customElements.define('x-loop', XLoop);
</script>