dom performance

by suld2495

HTML

<!doctype html>
<html>
<body>
<div id="dom"></div>
<script>
    let dom = document.getElementById('dom');
    let domStr = "";

    console.time('Draw DOM');

    for (let i = 0; i < 500; i++) {
        for (let j = 0; j < 500; j++) {
            domStr += `<div style="width:1px;height:1px;position:fixed;left:${i}px;top:${j}px;background-color: ${getColor()}"></div>`;
        }
    }

    dom.innerHTML = domStr;

    setTimeout(() => {
        console.timeEnd('Draw DOM');
    })

    function getColor() {
        let accessible = 'abcdef123456789';
        let str = '';

        for (let i = 0; i < 6; i++) {
            str += accessible[Math.floor(Math.random() * accessible.length)];
        }

        return `#${str}`;
    }
</script>
</body>
</html>