Spanish, Mexican subtitles

← 02-14 The Render Tree

Get Embed Code
6 Languages

Showing Revision 6 created 09/30/2014 by Fran Ontanaya.

  1. El Árbol de Renderizado
  2. Contenido + Estilo = ¿Un sitio web?
  3. Vale. Entonces, el DOM contiene
    todo el contenido de la página.
  4. El CSSOM contiene
    todos los estilos de la página.
  5. Por tanto, ¿cómo tomamos
    el contenido y estilos
  6. y los convertimos en píxeles
    en la pantalla?
  7. Creo que me estoy perdiendo
    un paso intermedio.
  8. Buena intuición. Ahora necesitamos
    combinar los árboles del DOM y del CSSOM
  9. en el árbol de renderizado, el cual
    capturará exactamente lo que describiste.
  10. Una de las propiedades más importantes
    del árbol de renderizado
  11. es que sólo captura contenido visible.
  12. Y para verlo en acción, vamos a trabajar
  13. con el ejemplo simple
    que tenemos en frente.
  14. Arriba tenemos el árbol del DOM
  15. y abajo el Modelo de Objeto CSSOM.
  16. Para construir el árbol de renderizado,
  17. empezamos en la raíz del árbol del DOM,
  18. que en este caso es el nodo del párrafo,
  19. y comprueba si hay alguna regla de CSS
  20. con la que corresponda.
  21. En este caso, vemos que tenemos
    una regla que corresponde,
  22. que hace hace que todo el texto
    renderice con un tamaño de fuente
  23. de 16 píxeles y en negrita.
  24. Por lo tanto, copiamos el nodo del párrafo
  25. en nuestro árbol de renderizado,
  26. junto con sus propiedades de CSS.
  27. Bien, hemos terminado
    con el nodo del párrafo.
  28. Vamos a descender por el árbol.
  29. Luego vemos Hello, que tan sólo
    es un nodo del texto,
  30. por lo que lo copiamos
    a nuestro árbol de renderizado.
  31. A continuación llegamos al nodo de span,
  32. tenemos una regla de CSS
    que le corresponde.
  33. Tenemos un span y, de hecho,
    es un hijo del nodo del párrafo.
  34. Pero observa que una de las propiedades
  35. en esta regla
  36. está marcada como "display: none"
    (mostrar: nada),
  37. lo cual nos dice que los contenidos
    de este span no deberían ser renderizados.
  38. Y puesto que, como dijimos,
    el árbol de renderizado
  39. sólo captura contenido visible,
    podemos omitirlo a él y a sus hijos.
  40. Omitimos los hijos porque display: none
    va en cascada hacia abajo, ¿no?
  41. Exacto. Y, como resultado,
    podemos omitir todos los nodos hijos
  42. y pasar al siguiente nodo,
    que en este caso,
  43. es otro nodo de texto.
  44. Y lo copiamos a nuestro árbol
    de renderizado una vez más.
  45. Entonces, el árbol de renderizado
    captura tanto el contenido
  46. como los estilos.
  47. Sí. Vamos a ver ahora
    nuestra página Hello World.
  48. Vale, aquí tenemos el DOM
    y los árboles de CSS
  49. para nuestra página de Hello World.
  50. Para crear un árbol de renderizado,
    empezamos en el nodo de html,
  51. en el árbol de DOM.
  52. Las secciones de body y html
  53. no contienen ninguna información visible.
  54. Así que podemos quitarlas rápidamente
    de nuestro árbol de renderizado.
  55. Luego tenemos el nodo de body.
  56. Vamos a copiarlo.
  57. La parte izquierda del árbol
    debería resultar familiar.
  58. Es lo que acabamos de crear.
    Así que vamos a copiarlo también.
  59. Finalmente, tenemos los nodos
    div e img.
  60. Ambos contienen contenido visual,
    así que los copiamos junto con los estilos
  61. en nuestro árbol de renderizado.
  62. Con eso hecho eso, compara
    este árbol de renderizado
  63. con lo que tenemos en la pantalla.
  64. Sí, el árbol de renderizado
    es una muy buena representación.
  65. El texto innecesario ha desaparecido.
  66. Puedo ver que debería haber
    una imagen en la pantalla
  67. y que debería mostrarse a la derecha.
  68. Entonces, ¿ya hemos terminado?
  69. No del todo.
  70. Todavía tenemos que hacer el layout.
    Pero antes, un rápido cuestionario.