force reflow snippet

force-reflow.js

var _timer_interval = 16;
var reflow = {
    id: null,
    working: false,
    start: function (taskWeight = 1) {
        reflow.working = true;
        reflow.id = requestAnimationFrame(() => {
            reflow.update(taskWeight);
        });
    },
    update: function (taskWeight) {
        if (!reflow.working) {
            return;
        }
        for (var i = 0; i < taskWeight; i++) {
            var bstyle = document.body.style; // キャッシュ
            bstyle.padding = (Math.random() * 10) + "px"; // リフロー、リペイント
            bstyle.border = (Math.random() * 30) + "px solid red"; // さらにリフロー、リペイント
            bstyle.color = "blue"; // 位置は変化しないので、リペイントのみ
            bstyle.backgroundColor = "#fad"; // リペイント
            // 新しい DOM 要素の追加 - リフロー、リペイント
            const newChild = document.createElement("div");
            newChild.className = "__reflow__element__";
            newChild.textContent = "|" + i;
            document.body.appendChild(newChild);
        }
        reflow.id = setTimeout(() => {
            reflow.update(taskWeight);
        }, _timer_interval);
    },
    stop: function () {
        Array.from(document.querySelectorAll(".__reflow__element__")).forEach(e => {
            e.parentNode.removeChild(e);
        });
        document.body.style = "";
        clearTimeout(reflow.id);
        reflow.working = false;
    }
};