Creé una clase DomObject que puede mostrar cuadros que se mueven.
Naturalmente, si aumento el número de cajas en DomObject , la función de movement tarda más en ejecutarse ya que es un bucle for.
beginMovement = () => { if (!this.timer) { // console.log("Begin Movement"); this.timer = setInterval(this.movement, this.time); } }; movement = () => { // here we know that its running let i = 0; while (i < this.boxes.length) { this.boxes[i].move(); i++; } } En el caso de que aumente la longitud de this.boxes , noto que hay problemas de rendimiento.
Entonces, mi pregunta principal es, ¿debería usar un bucle for en este caso? ¿O debería evitar usar html básico para mover elementos todos juntos y pasar al uso de canvas ?
Depende de cuál sea tu objetivo. Parece que está tratando de hacer algún tipo de animación, en cuyo caso usar canvas/WebGL es una mejor opción si busca velocidad bruta.
Ahora sus objetos viven en el DOM, que no se diseñó originalmente para mostrar gráficos y animaciones sofisticados. Cada consideración de diseño para el lienzo se hizo explícitamente para la animación y las operaciones complejas de mapas de bits, como la colorización y el desenfoque. Nunca tiene que "encontrar" un elemento de lienzo. Puede acceder a ellos mucho más rápido que incluso a un elemento DOM almacenado en caché. Incluso actualizar elementos de texto en el lienzo es más rápido que hacerlo en el DOM.
Aquí hay una discusión SO relacionada sobre canvas vs DOM.