Cursos Empresas Blog Live Conf Eventos Precios

0:002:39

¿Qué es el DOM?

Clase 3 de 29

Clase 3 / 29

Kevin Anzola

00_Critical Rendering Path El Critical Rendering Path (CRP) es el proceso que un navegador web utiliza para cargar y renderizar una página web en la pantalla. El objetivo del CRP es cargar y mostrar rápidamente los elementos esenciales de la página, como el contenido principal, los estilos y los scripts, para que el usuario pueda interactuar con la página lo antes posible. El CRP consta de varios pasos que el navegador sigue para renderizar una página web. Estos pasos incluyen:

Obtener el HTML: El navegador recupera el código HTML de la página web a través de una solicitud HTTP.
Construir el DOM: El navegador crea un árbol de objetos que representa la estructura del documento HTML.
Construir el CSSOM: El navegador crea un árbol de objetos que representa la información de estilo de la página web.
Combinar el DOM y el CSSOM para crear el render tree: El navegador combina el árbol de objetos del DOM y el CSSOM para crear un árbol de objetos que representa la página tal como aparecerá en la pantalla.
Realizar el layout: El navegador determina la posición y el tamaño de cada elemento en el render tree.
Pintar la página: El navegador dibuja los elementos de la página en la pantalla.

El objetivo de optimizar el CRP es asegurarse de que los elementos críticos se carguen y se rendericen lo más rápido posible. Esto se puede lograr mediante la optimización del código HTML, el uso eficiente de CSS y JavaScript, la reducción del tamaño de las imágenes y la eliminación de bloqueos de recursos. Al hacerlo, se puede mejorar la velocidad de carga y la experiencia del usuario.

Comentarios (58)58 comentarios

Fernando Quinteros Gutierrez

Hace 6 años

Ideas/conceptos claves

Critical Rendering Path Es el proceso que se encarga de convertir en pixeles el HTML, CSS y JS

El DOM arbol para el HTML que contiene toda nuestra estructura HTML

El CSSOM es el arbol para el CSS

Apuntes

Todos los navegadores los utilizan para trabajar en un sitio web
Todo comienza con el proceso llamado "Critical Rendering Path"
- Se puede dividir en 5 partes
- A lo largo del proceso el navegador crea dos arboles
  - DOM
    - Es una representación del HTML
    - Estructura en forma de árbol de nodos
    - Es un modelo que puede ser modificado
  - CSSOM

RESUMEN: Para mostrar un sitio hay un proceso llamado Critical Render Path en él se crean dos árboles el DOM y el CSSOM. El Dom sera aquel que se encargará de tener todo nuestro contenido en una representación de arbol que contendrá nodos

Andrés Felipe Lopez gomez

Excelente resumen

Andrés Felipe García Rendón

Gracias por compartir tus apuntes, Saludos.

David Daniel Castillo Nava

DOM(Document Object Model): no es mas que un árbol de nodos en el cual esta representado cada una de las etiquetas HTML que nosotros colocamos en nuestro proyecto.
CSSOM(CSS Object Model): es un conjunto de APIs que permite manipular CSS desde JavaScript. Así como el DOM (Document Object Model) es para HTML, el CSSOM (CSS Object Model) es para CSS. Permite leer y modificar el estilo de CSS de forma dinámica.
Para llegar al dom y cssom ocurre un proceso que se llama El Camino Crítico de Renderización(Critical Rendering Path) es la secuencia de pasos que el navegador realiza para convertir el HTML, CSS y JavaScript en píxeles en la pantalla.

Jimmy Buriticá Londoño

Bien por las definiciones.

Giselle Desiree Boyer Jimenez

Gracias por la definición del CSSOM, hizo falta en el curso

Aylin Fernanda Yepez Granados

Hace 5 años

Hola...! Aquí les dejo un resumen del curso

Carlos Eduardo Gomez García

DOM: Document Object Model . Inicia en el Critical Rendering Path, es un proceso que el navegador hace para traducir todo el código HTML, CSS y JavaScript a cosas que el usuario pueda ver. . Esto genera 2 árboles, se les llama así porque es la estructura de datos que representan:

DOM: Árbol que representa al HTML

. CSSOM: Árbol CSS (CSS Object Model)

Andrés González

¿Qué sucede por detrás cuando Google Chrome renderiza nuestra página? Aquí un excelente gráfico sacado de Chrome Developers https://developer.chrome.com/blog/renderingng-architecture/

Helmuth Vásquez Baeza

Este es el proceso de un Critical Render Path (CRP) o Ruta de acceso de representación crítica:

Conversión
Tokenización
Lexing
Construcción del DOM

Fuente: https://vanessamarely.medium.com/crp-critical-render-path-o-ruta-de-acceso-de-representaci%C3%B3n-cr%C3%ADtica-1f2ca78d2645

Marcelo Arias

Profesor

🌳 DOM: Árbol para HTML -> Permite acceder y modificar las etiquetas <head>, <p>, <footer>, etc.

🎨 CSSOM: Árbol para CSS -> Permite acceder y modificar estilos CSS.

💻 BOM: Árbol para navegador. Permite acceder y modificar las propiedades de las ventanas del propio navegador.

🔩 Critical Rendering Path (CRP): Ruta de instrucciones que el navegador ejecuta para convertir HTML, CSS y JavaScript en píxeles.

Juan Vásquez

50 minutos de lanzado el curso y ya hay una persona que lo ha pasado 😅😅😅😅😅

Jonathan 🦑 Alvarez

También me sorprendió mucho. mind=blow :D

Edgar Lopez Arroyo

Probablemente ya lo sabia todo y paso directo al examen. Yo lo hice una vez en un curso de álgebra solo para probar como andaba, si lo pase pero también tome con calma el curso. :D

Omar García Betanzos

El DOM es un concepto maravilloso de todos los navegadores utilizan para renderizar y trabajar sobre una pagina web. . Primero. Todo empieza en proceso conocido como el Critical Rendering Path, este es un proceso que los navegadores hacen para que todo el código se convierta en pixeles en la pantalla de nuestros usuarios. . Segundo. Como parte de ese proceso el navegador crea dos arboles: uno llamado DOM (Document Object Model) corresponde al árbol de HTML y el CSSOM (CSS Object Model) por su parte corresponde al árbol para el CSS. . DOM :arrow_forward: Es una representación del HTML. :arrow_forward: Estructura en forma de árbol de nodos. :arrow_forward: Es un modelo que puede ser modificado.

Cristian Caraballo

Otro curso de Jonathan!! Siiiiii 🙌

Rolando Mamani Salas

Mi primera ves con este profesor

Ismael Grimaldo Vega

Esperé ansiosamente por este curso. Gracias team Platzi, gracias Jonathan

fermin martin

😃Me encanta cuando habla en femenino!!

JOSE PABLO MENDOZA JIMENEZ

Critical Rendering Path: Proceso para que el código se convierta en pixeles en la pantalla de nuestros usuarios. Critical Rendering Path: -DOM: Document Object Model, representación de html -CSSOM: CSS Object Model

De acuerdo con la documentacion sobre el CRP, el proceso es masomenos así:

El navegador hace una petición del HTML
El servidor nos contesta con un HTML.
El navegador parsea el HTML, convirtiendo los bytes recibidos en el árbol DOM.
El navegador hace peticiones cada que encuentra referencias a recursos externos como imágenes, scripts, hojas de estilo.
Repite el proceso para construir el CSSOM. 6.Finalmente construye el Render tree con el cuál se podrá visualizar nuestra web en la pantalla

https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path

Irving Juárez

¿Cómo acceder al DOM desde JS?

Como el DOM es el Modelo de Objeto del Documento, nosotros podemos acceder a el con document, así que si queremos acceder a el body, solo hacemos document.body

José Antonio Zegarra Medina

📌Critical Rendering Path es un proceso que corre el navegador, mediante el cual el HTML, CSS y JS se convierten en pixeles que se pintan en pantalla. 📌Durante el Critical Rendering Path* se crean los arboles de estrutura HTML y de estilos CSS: Document Object Model (DOM) y el CSS Object Model(CSSOM), respectivamente.

Andrés D Amelio

Todos los navegadores lo usan para trabajar y renderizar una pagina web. Todo comienza con un proceso conocido como Critical Rendering Path, el cual es un proceso que hacen todos los navegadores para que todo nuestro código HTML, CSS y Javascript se conviertan en pixeles en la pantalla de los usuarios. En este paso el navegador crea dos arboles, el primero de ellos DOM (Document Object Model) y el segundo CSSOM, se les dice árbol porque esa es la estructura de datos que reprenta, donde cada elemento es un nodo. El DOM esta compuesto por nodo, donde cada nodo son etiquetas HTML, y el CSSOM trabaja con el arbol de estilos.

Por tanto, tenemos los siguientes puntos

DOM

Es una representación del HTML.
Estructura en forma de árbol que contiene nodos.
Es dinámico, es decir, puede cambiar.

Pasar los cursos recién lanzados es el equivalente al "Primer comentario" de Youtube :smile:

Deyvi Granados Mandarachi

Que es un NODO como concepto, como código y si se puede cono hardware. De ante mano, gracias por sus respuestas.

Hola @SirDeyvi

Un Nodo es el término que se utiliza en grafos y estructuras de datos para denotar las aristas que component el grafo.

En el caso de la web hablamos de árboles que son un tipo de grafo.

A lo largo del curso aprenderemos a crear nuevos nodos utilizando JavaScript para agregarlos al árbol (DOM) y desprender otros nodos y sub-árboles de allí!

échale un vistazo al curso de Estructuras de Datos y de Ingeniería para refrescar estos conceptos :D

https://platzi.com/clases/estructuras-datos/

https://platzi.com/clases/ingenieria/

Jonathan David Olivos

Notes

What is the DOM?

Critical Rendering Path

The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into pixels on the screen. Optimizing the critical render path improves render performance. The critical rendering path includes the Document Object Model (DOM), CSS Object Model (CSSOM), render tree and layout.

DOM (Document Object Model)

The DOM (Document Object Model) is an API that represents and interacts with any HTML or XML document. The DOM is a document model loaded in the browser and representing the document as a node tree, where each node represents part of the document (e.g. an element, text string, or comment).

The DOM is one of the most-used APIs on the Web because it allows code running in a browser to access and interact with every node in the document. Nodes can be created, moved and changed. Event listeners can be added to nodes and triggered on occurrence of a given event.

CSSOM (CSS Object Model)

The CSS Object Model is a set of APIs allowing the manipulation of CSS from JavaScript. It is much like the DOM, but for the CSS rather than the HTML. It allows users to read and modify CSS style dynamically.

¿Qué es el DOM?

Progreso del curso

DOM y Web API

Operaciones básicas

Workshop 1: Fetch

Eventos

Workshop 2: Lazy loading

Workshop 3

Librerías relacionadas

Conclusiones