JSFiddle - React, Tailwind, and code Playground

by Denis Rul

HTML

<script src="https://unpkg.com/promise-polyfill@6.0.2/promise.js"></script>
<button id="run_plain">No Subscriptions</button>
<button id="run_with_observer" disabled>MutationObserver</button>
<button id="run_with_events">Mutation Events</button>

<div id="log"></div>

JavaScript

var timeStamp = (function () {
    var host = Date;

    if (window.performance && window.performance.now) {
        host = window.performance;
    }

    return function () {
        return host.now();
    };
})();

function wait(delay) {
    return new Promise(function (resolve) { setTimeout(resolve, delay)});
}

function init(level) {
	var parent = document.body;
    
    while (level--) {
    	var element = document.createElement('div');
		
        parent.appendChild(element);
        
        parent = element;
    }
    
    parent.id = 'container';
	
    enableButtons();
}

function testSuite() {
    var timeout = 15;
    
    return (function () {
        var i = 200;

        while (i--) {
            var div = document.createElement('div');

            div.textContent = 'FOO';

            container.appendChild(div);
        }

        return wait(timeout);
    })().then(function () {
        var div = container.firstElementChild;

        // Add new attribute
        while (div) {
            div.setAttribute('data-foo', 'bar');

            div = div.nextElementSibling;
        }

        return wait(timeout);
    }).then(function () {
        // Modify attriibute
        var div = container.firstElementChild;

        while (div) {
            div.setAttribute('data-foo', 'baz');

            div = div.nextElementSibling;
        }

        return wait(timeout);
    }).then(function () {
        // Change character data
        var div = container.firstElementChild;

        while (div) {
            div.childNodes[0].nodeValue = 'BAR';

            div = div.nextElementSibling;
        }

        return wait(timeout);
    }).then(function () {
        // Remove element
        var div = container.firstElementChild;

        while (div) {
            var tmp = div.nextElementSibling;

            container.removeChild(div);

            div = tmp;
        }

        return wait(timeout);
    })
}

function testWithObserver() {
    var observer = new...