Para ser más concretos, considera el árbol del CSSOM anterior.
To make it more concrete, consider the CSSOM tree above.
Los recursos asincrónicos desbloquean el analizador de documentos y permiten que el navegador evite el bloqueo del CSSOM antes de ejecutar la secuencia de comandos.
Asynchronous resources unblock the document parser and allow the browser to avoid blocking on CSSOM prior to executing the script.
Ten en cuenta también que el árbol anterior no es el árbol completo del CSSOM y en él solo se muestran los estilos que decidimos anular en nuestra hoja de estilos.
Also, note that the above tree is not the complete CSSOM tree and only shows the styles we decided to override in our stylesheet.
¿Qué ocurriría si el navegador no ha terminado de descargar y compilar el CSSOM cuando queramos ejecutar nuestra secuencia de comandos?
What if the browser hasn't finished downloading and building the CSSOM when we want to run our script?
La respuesta es simple y no muy buena para el rendimiento: el navegador demora la ejecución de la secuencia de comandos y la construcción del DOM hasta haber terminado de descargar y construir el CSSOM.
The answer is simple and not very good for performance: the browser delays script execution and DOM construction until it has finished downloading and constructing the CSSOM.
Otra propiedad discreta de la introducción de secuencias de comandos en nuestra página es que pueden leer y modificar no solo el DOM, sino también las propiedades de CSSOM.
Another subtle property of introducing scripts into our page is that they can read and modify not just the DOM, but also the CSSOM properties.
En la construcción del árbol de representación, vimos que la ruta de representación crítica requiere el DOM y el CSSOM para construir el árbol de representación.
In the render tree construction we saw that the critical rendering path requires both the DOM and the CSSOM to construct the render tree.
Si el DOM o el CSSOM se modifican, deberás repetir el proceso para conocer los píxeles que se deben representar nuevamente en la pantalla.
If either the DOM or CSSOM were modified, you would have to repeat the process in order to figure out which pixels would need to be re-rendered on the screen.
¿Por qué el CSSOM tiene una estructura de árbol?
Why does the CSSOM have a tree structure?
Para que el navegador pueda representar la página, debe construir los árboles del DOM y el CSSOM.
Before the browser can render the page, it needs to construct the DOM and CSSOM trees.
Permite incluir un elemento en el código HTML, en general como parte del <head>, lo cual activa una solicitud de la fuente para sitios web al comienzo de la ruta de acceso de representación crítica, sin tener que esperar la creación del CSSOM.
It allows you to include an element in your HTML, usually as part of the <head>, that will trigger a request for the Webfont early in the critical rendering path, without having to wait for the CSSOM to be created.
El navegador bloquea la representación hasta contar con el DOM y el CSSOM.
The browser blocks rendering until it has both the DOM and the CSSOM.
Los árboles DOM y CSSOM se combinan para formar el árbol de representación.
The DOM and CSSOM trees are combined to form the render tree.
