DOM is leaky

<!HTML DOCTYPE>
<html>
<head>
    <style>
        div {
            width: 30px;
            height: 30px;
            border: 1px solid black;
        }
    </style>
</head>
<body>

    <script>
    const shouldAppendAllAtOnce = true;
    const totalDivCount = 300;

    function appendOneAtATime(count) {
        for (let i = 0; i < count; i++) {
            document.body.innerHTML += '<div></div>';
        }
    }
    function appendAll(count) {
        let fragment = document.createDocumentFragment();
        for (let i = 0; i < count; i++) {
            let el = document.createElement('div');
            fragment.appendChild(el);
        }
        document.body.appendChild(fragment);
    }
    const startTime = Date.now();
    if (shouldAppendAllAtOnce) {
        appendAll(totalDivCount);
    } else {
        appendOneAtATime(totalDivCount);
    }
    const duration = Date.now() - startTime;
    console.log('Total time taken: ', duration);

    </script>
</body>
</html>