Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Incremental DOM, la propuesta de Google contra Virtual DOM


  Publicado hace |  Etiquetas: , , , , ,

Antes de pasar al tema sobre Incremental DOM, daremos una breve introducción a lo que DOM se refiere.

¿Qué es DOM?

Es una interfaz de programación de aplicaciones (API) para documentos HTML y XML, define la estructura lógica de los mismos y el modo en que se accede y manipula.

Con el Modelo de Objetos del Documento los programadores pueden construir documentos, navegar por su estructura, y añadir, modificar o eliminar elementos y contenido. Entonces, El DOM es un API de programación para documentos. Guarda una gran similitud con la estructura del documento al que modeliza.

El DOM representa el documento en un árbol como este:

DOM HTML5 facil
La página HTML se ha transformado en una jerarquía de nodos, en la que el nodo raíz es un nodo de tipo documento HTML. A partir de este nodo, existen dos nodos en el mismo nivel formados por las etiquetas <head> y <body>. De cada uno de los anteriores surge otro nodo (<title> y <p> respectivamente). Por último, de cada nodo anterior surge otro nodo de tipo texto.

Virtual DOM

El virtual DOM no es más que una versión abstracta, una vista ligera de nuestra DOM, podemos realizar cambios y luego guardar en nuestro árbol DOM real. Una vez guardado debemos comparar, encontrar la diferencia y el cambio, es mucho más rápido que el trabajo directo con DOM puesto que no se habrán realizado los cambios (prueba y error) en un DOM real.

Incremental DOM

Es una biblioteca para expresar y aplicar cambios a árboles DOM, podemos utilizar JavaScript para extraer, repetir y transformar los datos en las llamadas que generan elementos HTML y nodos de texto.

La diferencia con un virtual DOM se aproxima en que una operación de diff se realiza de forma incremental (es decir un nodo a la vez) contra el DOM, en lugar de en un árbol virtual DOM.

Incremental DOM tiene como objetivo proporcionar una plataforma para las bibliotecas o los marcos de nivel superior, puede ser algo difícil de escribir y leer.

En los últimos años las implementaciones de virtual DOM como React, virtual-dom, Glimmer, entre otros han ganado mayor adopción y cambiado cómo los desarrolladores piensan en su interacción con el DOM.

Basándose en implementaciones virtual DOM hay varios puntos que se están mejorando:

  • Plantillas: Uso de lenguajes de plantillas existentes.
  • Rendimiento: Sobre todo en la memoria limitada de los dispositivos móviles.

Virtual DOM vs Incremental DOM

Virtual DOM es una técnica y un conjunto de bibliotecas/algoritmos que nos permitan mejorar el rendimiento extremo frontal, evitando el trabajo directo con DOM y trabajamos únicamente con objetos ligeros en JavaScript que imitan el árbol DOM.
La idea de virtual DOM es genial y no es nuevo en realidad, sabíamos desde hace mucho tiempo que tocar el DOM es caro. Pero la aplicación de esta técnica es difícil.
Con el uso de las bibliotecas como React podemos aumentar el rendimiento de nuestras aplicaciones y es realmente muy fácil de conseguir.

Sin embargo, Incremental DOM tiene dos fortalezas principales en comparación con los enfoques basados en virtual DOM:

  • La naturaleza incremental permite significativamente optimizar la asignación de memoria durante el renderizado, lo que genera un desempeño más predecible.
  • Fácil integración con sistema de templates, las sentencias de control y bucles pueden mezclarse libremente con declaraciones de elementos y atributos.

Es una librería de bajo nivel por lo que puedes construir soluciones junto a otras librerías, frameworks, APIs de virtual DOM o JSX y  su tamaño es de 2.6 kb con gzip, todo esto la hace muy versátil.

Para más información sobre Incremental DOM, usos e implementación visita el GitHub Oficial.

Fuentes: Medium Google Developers

comments powered by Disqus