DOM es un modelo de objeto de documento que representa el contenido de un documento XML o HTML como una estructura de árbol para que los programas se puedan leer, acceder y cambiar la estructura, el estilo y el contenido del documento.
Veamos cómo un DOM analiza un documento. Considere el siguiente código HTML de ejemplo.
HTML
<html> <head> <title>DOM example</title> <body> <div> <h1>Document Object Model</h1> </div> </body> </head> </html>
El código anterior crea una estructura de árbol como se muestra a continuación:
Estructura DOM
Ahora tenemos una idea básica de lo que es DOM. Si aún no está seguro, infórmese aquí .
DOM virtual: El propio nombre dice que es un DOM creado virtualmente. Virtual DOM es exactamente como DOM y tiene todas las propiedades que tiene DOM. Pero la principal diferencia es que cada vez que un código ejecuta JavaScript Framework, actualiza todo el DOM a la vez, lo que produce un rendimiento lento. mientras que el DOM virtual actualiza solo la parte modificada del DOM. Entendamos claramente:
Cuando ejecuta un código, la página web se divide en diferentes módulos. Entonces, DOM virtual lo compara con DOM y verifica si hay alguna diferencia. Si encuentra una diferencia, DOM actualiza solo la parte modificada y la otra parte permanece igual.
Como se muestra en la imagen de arriba, el DOM virtual es diferente del DOM, ahora el DOM actualiza los componentes secundarios que son diferentes y el otro permanece exactamente igual. Esto aumenta el rendimiento.
Ahora veamos un ejemplo de cómo funciona Virtual DOM:
Creando una aplicación React:
- Paso 1: Cree una aplicación de reacción con el siguiente comando.
npx create-react-app foldername
- Paso 2: cambie su directorio a la carpeta recién creada con el siguiente comando.
cd foldername
Estructura del proyecto: Tendrá el siguiente aspecto:
Estructura del proyecto
Implementación: Anote el siguiente código en los archivos respectivos.
Nombre de archivo: index.html
HTML
<!DOCTYPE html> <html lang="en"> <head> <title>React App</title> </head> <body> <div id="DOM_root"></div> <div id="root"></div> </body> </html>
Nombre de archivo: index.js
Javascript
import React from "react";
import ReactDOM from "react-dom";
function time() {
// DOM using HTML syntax
document.getElementById("DOM_root").innerHTML
= new Date().toLocaleTimeString();
// Virtual DOM using react syntax
const Virtual_element = React.createElement(
"h4",
null,
"React DOM = ",
new Date().toLocaleTimeString()
);
ReactDOM.render(Virtual_element,
document.getElementById("root"));
}
setInterval(time, 1000);
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Abra su navegador y haga clic derecho en la pantalla y seleccione Inspeccionar. Puede ver el siguiente resultado.
Como puede ver en el resultado anterior, todo el elemento div se actualiza junto con la hora en el DOM. Mientras que en el DOM virtual solo se actualiza el elemento h4 y todos los demás elementos permanecen igual. Esto muestra que el DOM virtual encuentra la parte modificada y actualiza solo esa parte modificada.
Publicación traducida automáticamente
Artículo escrito por harikatalari08 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA