Cargador de JavaScript más rápido, conteo de píxeles.

Estaba tratando de simular un lienzo con solo etiquetas div de 1 píxel cada una, así que coloqué divs en nodos, ¡y me hizo sentir triste! ¿Por qué tenemos 2.073.600 píxeles controlados por la computadora todo el tiempo y si lo configuramos para que el div lo controle, consume demasiada memoria y se vuelve tan lento? Es solo una página Full HD…

function loadsketch(){

var totalblocksX = 1920
var totalblocksY = 1080

for(var addedblocksY = 0 ; addedblocksY < totalblocksY; addedblocksY++){

let blocklineY = document.createElement(“article”);
blocklineY.style.display = “flex”;
blocklineY.style.flexDirection = “row”;

for(var addedblocksX = 0 ; addedblocksX < totalblocksX; addedblocksX++){

let blocklineX = document.createElement(“article”);

let block = document.createElement(“div”);
block.style.backgroundColor = “black”;
block.style.height = “1px”;
block.style.width = “1px”;

block.onmouseover = function(){block.style.backgroundColor = “orange”;}

blocklineX.append(block);
blocklineY.append(blocklineX);
}
addedblocksX = 0;
scketch.append(blocklineY);
}

document.body.append(scketch);
}

loadsketch();

var blocksizeX = 200;
var blocksizeY = 200;

var blocklineX = 200;
var blocklineY = 200;

var addedblocksY = 0;

document.body.style.margin = “0px”;

¿Alguna idea para que sea más rápido? ¿Alguna pregunta?