oxe/docs/performance/index.html

A mighty tiny web components framework/library

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

<o-loop></o-loop>

<script src="../assets/oxe.js"></script>
<script>
    const { Component, Define } = Oxe;

    class OLoop extends Component {

        data = {
            items: [],
            message: '',
            count: 100000,
            one: { two: 'three' },
            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 = [];
            }
        };

        html = /*html*/`
            <div class="wrap">
                <div class="loader">Loader</div>
            </div>

			<h3><span>{{count}}</span> bound elements</h3>
			<input value="{{count = $value}}" type="number">

			<br>
			<button onclick="{{push()}}">push</button>
			<button onclick="{{overwrite()}}">overwrite</button>
			<button onclick="{{raw()}}">raw</button>
			<button onclick="{{clear()}}">clear</button>

			<div each="{{item of items}}">
                <div class="box">{{item.number}}</div>
            </div>

            <!--
			<div each="{{item of items}}">
                <select class="box" value="{{selected}}" each="{{user of item.users}}">
                    <option value="{{user.id}}">{{user.number}} {{user.name}}</option>
                </select>
            </div>

			<div each="{{item of items}}">
                <div class="box" each="{{number of item.numbers}}">
                    <i>{{number}} {{item.name}}</i>
                </div>
            </div>
            -->

			<div id="raw"></div>
		`;

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

    }

    Define(OLoop);

</script>