Untitled

<html>
    <body>
        <button onClick="clr()">CLEAR</button>
        <button onClick="render()">RENDER</button>
        <div id="test">Test element</div>
        <script>
            const raf = window.requestAnimationFrame;

            function clr() {
                let start = Date.now();
                document.getElementById("test").innerHTML = "";
                raf(() => {
                    let end = Date.now();
                    console.log("CLEAR FINISHED", end - start);
                });
            }

            clr();

            function render() {
                let start = Date.now();

                for (let i = 0; i < 100000; i++) {
                    document.getElementById("test").append("test ");
                }

                let fakeend = Date.now();
                console.log("LOOP FINISHED", fakeend - start);

                raf(() => {
                    let end = Date.now();
                    console.log("RENDER FINISHED", end - start);
                });
            }
        </script>
    </body>
</html>