can-queues/demos/domUI-performance.html

A light weight JavaScript task queue

<table>
    <tr>
        <td><button id='update-thrash'>Update Thrashing</button> <span id='trash-time'></span></td>
        <td><button id='update-queued'>Update Queued</button> <span id='queued-time'></span></td>
    </tr>
</table>
<div id='sliders'></div>
<script src="../../node_modules/steal/steal.js" main="@empty"></script>
<script src="../node_modules/steal/steal.js" main="@empty"></script>
<script type="text/steal-module" id="demo-source">
import queues from "can-queues";

// Array of handlers that will either do thrashing or using queueing.
var queuedListeners = [],
    thrashingListeners = [];

function makeSlider(startPercent) {
    var container = document.createElement("div");
    container.classList.add("container");
    container.innerHTML = `<div class='slider'/>`
    var slider = container.firstChild;

    thrashingListeners.push(function(newPercent){
        // Using the width of the element , set the slider's position.
        var left = newPercent * container.offsetWidth;
        slider.style.left = left+"px"
    });

    queuedListeners.push(function(newPercent){
        // read value
        var left = newPercent * container.offsetWidth;
        // Set `style.left` in a queue, so all of these sets happen at the same time.
        queues.domUIQueue.enqueue(Reflect.set, Reflect,[slider.style, "left",left+"px"],{});
    });

    return container;
}

// Create all the sliders and add them to their element.
var sliders = document.querySelector("#sliders");
var lastPercent = 0.5;
for(var i = 0; i < 1000; i++) {
    sliders.appendChild( makeSlider(lastPercent) );
}

// We need to set initial percent
queues.enqueueByQueue({
    notify: queuedListeners
},null,[0.5]);


document.querySelector("#update-thrash").onclick = function(){
    var t0 = performance.now();
    // Call listeners that thrash.
    queues.enqueueByQueue({
        notify: thrashingListeners
    },null,[lastPercent = Math.random()]);
    var t1 = performance.now();
    document.querySelector("#trash-time").innerHTML = ""+(t1 - t0).toFixed(1)+"ms";

}

document.querySelector("#update-queued").onclick = function(){
    var t0 = performance.now();
    // Call listeners that use queues to prevent thrashing.
    queues.enqueueByQueue({
        notify: queuedListeners
    },null,[lastPercent = Math.random()])
    var t1 = performance.now();
    document.querySelector("#queued-time").innerHTML = ""+(t1 - t0).toFixed(1)+"ms";
}

window.onresize = function(){
    queues.enqueueByQueue({
        notify: queuedListeners
    },null,[lastPercent])
};
</script>
<style>
.container {
    border: solid 1px black;
    height: 7px;
}
.slider {
    border: solid 1px green;
    width: 5px;
    height: 5px;
    position: absolute;
    background-color: red;
}
</style>