¿Qué es un DOM? ¿Qué come?

El DOM (Document Object Model) es la base de las páginas web y su desarrollo. Es una interfaz de programación para documentos HTML y XML, que representa la estructura de un documento en un objeto en forma de árbol. Con ramas y hojas. Cada elemento, atributo y fragmento de texto del documento se convierte en un nodo de este árbol. Permite que JavaScript interactúe con elementos HTML, los modifique o agregue nuevos elementos. Este es un resumen aproximado de lo que cada persona experimenta en la web: interacción, mutabilidad, señales y elementos visuales dinámicos. Cuando haces clic en un botón o en un menú brillante, tu cerebro espera que algo suceda. A una frase para cambiar, a una nueva página para cargar o a una ventana emergente con una marca de verificación verde que nos indica que nuestro pedido en línea se pagó correctamente.

Manipular el DOM demasiado rápido, cada segundo, es un gran no-no para la retención del usuario o incluso para la interacción básica del usuario. Incluso con todo el comportamiento dinámico que podemos crear y ampliar la experiencia del usuario, el uso excesivo de manipulaciones DOM puede resultar muy frustrante. Y la última palabra siempre es del usuario. Si tiene operaciones cruciales en segundo plano en su página, como la obtención de datos, pero el rendimiento simplemente se estanca y empeora minuto a minuto después de que el usuario interactúa con ella, puede ser muy difícil y desalentador identificar los puntos críticos.

Un ejemplo de una forma sencilla de utilizar la forma básica de hacer las cosas y hacerlo más rápido es utilizar textContent de vanilla js. Sí, lo sé. La mayoría de las veces necesitamos un ciclo de vida complejo para componentes que son tan dinámicos y mutables que necesitamos utilizar gestión de estado y demás. Pero ese no es siempre el caso. Si solo cambia algún texto o actualiza una cookie una vez por sesión, ¿realmente necesita utilizar una lógica tan compleja y una opción que consume muchos recursos?

La función textContent es la más rápida en js para manipular texto en comparación con opciones de funcionalidad similares, por ejemplo, el método InnerHtml más popular. Consulte estas pruebas cronometradas como referencia.

¿Por qué?

Puede guardar la memoria de la máquina del usuario para otras operaciones más impactantes. A veces, ser accesible y razonablemente rápido en dispositivos Android o Apple muy antiguos, por ejemplo, es imprescindible. O tal vez su llamada API devuelva un JSON tan grande que necesite un par de segundos para analizarlo y manipularlo adecuadamente. Entonces, cada segundo que el usuario no recibe comentarios o se queda atascado viendo una animación CSS en la pantalla, cuenta.

Aprendí mucho recientemente a codificar en JavaScript sin dependencias, como un desafío y una experiencia de aprendizaje. Como buscar datos y crear una aplicación de tareas pendientes solo con HTML, CSS y JavaScript. Sin npm, sin bibliotecas. Y descubrí un montón de métodos y objetos de API web de los que nunca antes había oído hablar, como el objeto DocumentFragment. Crea un 'fragmento' vacío de una estructura DOM y le permite manipularlo y completarlo antes de cambiar el DOM de la página. Así que cargas un objeto con tu lista de menús o los títulos de tus súper sofisticadas herramientas impulsadas por IA, y una vez que hayas terminado con las operaciones de adición y anidamiento de etiquetas, lo parcheas al DOM una vez. De tal manera que el análisis solo ocurre una vez, de una sola vez, en lugar de hacer un bucle for con muchas llamadas idénticas y requerir un nuevo análisis del árbol al final de cada llamada.

Entonces digamos que hago clic en un botón muy rápido, porque mi caso de uso requiere una renderización muy rápida, más de 1 vez por segundo. El uso de su biblioteca de administración de estado favorita puede crear algún tipo de barrera en este caso, porque después de cada clic se activaba un nuevo evento, por lo que debe activarse antes de iniciar la segunda instancia del evento en la pila, de forma predeterminada. Dependiendo de la complejidad o la necesidad de una operación asíncrona, esto puede llevar más de un segundo. En este caso de uso, es un factor decisivo. Así, elegir la herramienta adecuada puede ser más sencillo, más corto e incluso más rápido. Hoy en día, existen opciones que ofrecen las bibliotecas populares para resolver este problema, como interrumpir la ejecución de una nueva renderización cuando se disparó recientemente un nuevo evento idéntico. Pero lo que quiero decir aquí es no limitarse a buscar una aplicación web bonita y moderna. Pero para hacer su propia vida más fácil haciendo el mantenimiento lo más fácil posible y no dispararse confiando ciegamente en fragmentos de código que alguien escribió y dice que es la mejor opción.

Si ya estás instalando estos paquetes y bibliotecas para iniciar tu proyecto, ¿por qué no investigas por qué los errores y excepciones generan llamadas a funciones desconocidas o mensajes crípticos en la consola?

Conclusión y algunas divagaciones adicionales.

Poner en funcionamiento un servicio en la nube o en un servicio muy común de forma gratuita puede ser realmente rápido y sencillo hoy en día. Usar una placa calefactora como punto de partida puede ser muy útil y le ahorrará tiempo al no preocuparse por tareas muy básicas y recurrentes. Simplemente escriba un único comando en su terminal y ahí lo tendrá, el enrutamiento base y una página de hola mundo ejecutándose en un servidor local.

Nadie, en ningún lugar de Internet, sabrá siempre qué hace una biblioteca determinada o un marco completo bajo el capó, pero cuanto más sepa cómo funcionan las cosas, más a menudo podrá tomar decisiones más informadas y trabajar de manera eficiente.

Los marcos de trabajo más populares para el desarrollo web hacen un gran trabajo al optimizar la reproducción y manipular el DOM utilizando recursos como un DOM virtual o implementar algún tipo de persistencia para operaciones muy exigentes que recuperan datos.

Las herramientas de desarrollo web de su navegador web de elección son su mejor amigo aquí. Las versiones más recientes de estas herramientas pueden brindarle telemetría e incluso mostrar qué parte de su código o qué llamadas son el posible punto crítico de su desempeño.

Al saber cómo funciona el lenguaje JavaScript o cómo implementa su forma de hacer las cosas, puedes identificar fácilmente situaciones en las que una función lista para usar de tu biblioteca favorita podría obligarte a crear una base de código más inflada y no concentrarte en resolver el problema. problema. Podría simplemente robarte la atención al replicar algún fragmento de código que escribiste cientos de veces. E incluso con la IA para aumentar tu productividad, podrías caer en la trampa de utilizar una solución sugerida por tu compañero artificial y, de hecho, hacer que las cosas sean más difíciles de mantener en el futuro.

No te preocupes, a veces simplemente no sabemos nada mejor. Como dije, nadie puede saberlo todo en todo momento.

Experimentar y cometer errores en momentos más indulgentes te ayudará mucho y te dará las herramientas que necesitas para hacerlo mejor. La próxima vez que se encuentre haciendo algo tan simple como implementar un servidor de archivos estático o codificar una lógica realmente compleja para un caso de uso muy específico, conocer los conceptos básicos lo llevará muy lejos y le brindará más claridad al enfrentar nuevos problemas en su carrera.

Recomiendo encarecidamente consultar los documentos de la API web. Además de echar un vistazo en blogs online, redes sociales o recursos enfocados en desarrollo web.

Si cometí algún error, lo cual es probable, házmelo saber en los comentarios. Soy muy atento a las críticas y a las nuevas ideas, así que, por favor, ¡compártelas si quieres!