Scribd Logo
Upload

Welcome to Scribd!

  • Resumen Navegadores

    Uploaded by

    Fiorela Alcaraz
    10 views5 pages

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    10 views5 pages

    Resumen Navegadores

    Uploaded by

    Fiorela Alcaraz

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 5

    Motor de Renderización

    El motor de renderización muestra en la pantalla el contenido solicitado. Puede


    representar muchos tipos de medios a través del uso de complementos o extensiones que
    incluyen: HTML + CSS, imágenes, PDF y documentos XML.

    Descripción general del proceso de renderización:

    En primer lugar, el motor de procesamiento recupera los recursos solicitados del


    componente de red . Entonces:

    Los bytes en bruto de los datos se convierten en caracteres.

    Estos caracteres se analizan más a fondo en algo que se llama tokens.

    Después de que se realiza la tokenización, los tokens se convierten en nodos.

    Al crear estos nodos, los nodos se vinculan en una estructura de datos de árbol conocida
    como DOM.

    Si bien el navegador recibe los bytes de datos sin procesar y inicia el proceso de
    construcción del DOM, también realizará una solicitud para obtener la hoja de estilo
    main.css vinculada.

    De bytes en bruto de CSS a CSSOM.

    Bien, el navegador ahora combina los árboles DOM y CSSOM en algo que se llama un
    árbol de procesamiento. (Render Tree).

    Con el árbol de renderizado construido, el siguiente paso es realizar el "diseño".

    Árbol de DOM

    Análisis de HTML

    El trabajo del analizador de HTML es analizar las marcas HTML y organizarlas en un árbol
    de análisis. El árbol de análisis está formado por elementos DOM y nodos de atributo.

    DOM

    El árbol de análisis de HTML no es exactamente el árbol DOM. El árbol DOM es un árbol


    de análisis HTML que se reformatea para su consumo en el navegador.

    DOM son las siglas de "Document Object Model" (modelo de objetos del documento). Es
    la presentación de objetos del documento HTML y la interfaz de los elementos HTML para
    el mundo exterior, como JavaScript.
    El modelo DOM guarda una relación casi de uno a uno con el marcado. Veamos un
    ejemplo de marcado:
    <html>
    <body>
    <p>
    Hello World
    </p>
    <div> <img src="example.png"/></div>
    </body>
    </html>

    El marcado anterior se traduciría en el siguiente árbol de DOM:

    Figura: Representación en forma de árbol de la página HTML de ejemplo

    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, surge el nodo <body>. De este,
    surgen dos nodos en el mismo nivel formado por las etiquetas <p> y <div>. Por último, de
    cada nodo anterior surge otro nodo, de tipo texto e imagen respectivamente.

    La especificación del modelo DOM es genérica para la manipulación de documentos. Un


    módulo específico describe elementos HTML específicos.

    Árbol de renderización

    El árbol de renderización contiene rectángulos con atributos visuales, como el color y las
    dimensiones. Los rectángulos están organizados en el orden en el que aparecerán en la
    pantalla. Una vez construido el árbol de renderización, se inicia un proceso de "diseño".

    Para mejorar la experiencia del usuario, el motor de renderización intentará mostrar el


    contenido en pantalla lo antes posible. No esperará a que se analice el código HTML para
    empezar a crear y diseñar el árbol de renderización.
    El propósito de este árbol es poder representar el contenido en el orden correcto.
    Relación del árbol de renderización con el árbol de DOM
    Los renderizadores corresponden a elementos DOM, pero la relación no es de uno a uno.
    Los elementos DOM no visuales no se insertan en el árbol de renderización. Un ejemplo
    sería el elemento "head". Los elementos cuyo atributo de visualización se ha asignado a
    "none" tampoco aparecen en el árbol (los elementos con el atributo de visibilidad "hidden"
    sí aparecen en el árbol).

    El flujo de construcción del árbol


    En Firefox, la presentación se registra como un detector de actualizaciones de DOM. La
    presentación delega la creación de marcos en FrameConstructor y el constructor resuelve
    el estilo y crea un marco.
    En WebKit, el proceso para resolver el estilo y crear un renderizador se denomina
    "asociación". Cada nodo DOM dispone de un método de "asociación". El proceso de
    asociación es síncrono, es decir, que la inserción de nodos en el árbol de DOM activa el
    método de "asociación" del nuevo nodo.
    Al procesar las etiquetas "html" y "body", se construye la raíz del árbol de renderización.
    El objeto de renderización raíz se corresponde con lo que la especificación de CSS
    denomina "bloque contenedor", es decir, el bloque superior que contiene el resto de los
    bloques. Sus dimensiones se corresponden con la ventana gráfica, es decir, con las
    dimensiones del área de visualización de la ventana del navegador. Firefox lo denomina
    ViewPortFrame y WebKit RenderView. Este es el objeto de renderización al que apunta el
    documento. El resto del árbol se construye como una inserción de nodos DOM.

    Diseño

    Cuando el renderizador se crea y se añade al árbol, no tiene posición ni tamaño. El


    cálculo de estos valores se conoce como diseño o reflujo.
    El proceso de diseño se inicia en el renderizador raíz, que corresponde al elemento
    <html> del documento HTML. El diseño se aplica de forma recurrente a través de toda la
    jerarquía de marcos o de una parte de ella, calculando información geométrica para cada
    renderizador que lo requiere.
    La posición del renderizador raíz es 0,0 y su dimensión es la ventana gráfica, es
    decir, la parte visible de la ventana del navegador.
    Para no iniciar un proceso de diseño completo con cada modificación, el navegador utiliza
    un sistema de bit de modificación (dirty bit). Cuando se añade o modifica un renderizador,
    se marca con el indicador "dirty", lo que significa que se deben someter a un proceso de
    diseño.
    El proceso de diseño se puede activar en todo el árbol de renderización, lo que se
    conoce como diseño "global".
    El diseño puede ser incremental, en cuyo caso solo se someterán a un proceso de
    diseño los renderizadores marcados como "dirty".
    El diseño incremental se efectúa de forma asíncrona. WebKit incluye un
    temporizador que ejecuta el diseño incremental (se recorre el árbol y se aplica diseño a
    los renderizadores marcados como "dirty").
    El diseño global se suele activar de forma síncrona.
    El proceso de diseño suele seguir el patrón que se indica a continuación:
    1. El renderizador principal determina su propio ancho.
    2. El renderizador principal analiza los elementos secundarios y:
    1. Sitúa el renderizador secundario (establece su valor x e y).
    2. Activa la aplicación del diseño del renderizador secundario en caso
    necesario, lo que hace que se calcule la altura del renderizador
    secundario.
    3. El renderizador principal utiliza las alturas acumulativas de los elementos
    secundarios y las alturas de los márgenes y el relleno para establecer
    su propia altura.
    4. Establece el bit de modificación (dirty bit) en "false".
    El ancho del renderizador se calcula utilizando el ancho del bloque contenedor, la
    propiedad de estilo "width" del renderizador, los márgenes y los bordes.
    Utilicemos para nuestro ejemplo el siguiente elemento "div":
    <div style="width:30%"/>
    A continuación, se añaden el relleno y los bordes horizontales.
    El salto de línea se produce cuando un renderizador decide que debe interrumpirse
    en mitad del diseño. Se detiene y comunica el salto al renderizador principal. El
    renderizador principal crea renderizadores adicionales y activa sus procesos de diseño.
    Pintura

    En esta fase, se recorre el árbol de renderización y se activa el método de "pintura"


    para que se muestre su contenido en la pantalla. Se utiliza el componente de
    infraestructura de la interfaz.
    Al igual que ocurre en la fase de diseño, la pintura también puede ser un proceso
    global o incremental. En el caso de la pintura incremental, algunos de los renderizadores
    se modifican de una forma que no afecta a la totalidad del árbol. El renderizador
    modificado invalida su rectángulo correspondiente en la pantalla. Esto hace que el
    sistema operativo considere esta región como modificada y que genere un evento de
    "pintura". El sistema operativo fusiona ingeniosamente varias regiones en una. En
    Chrome, el renderizador se encuentra en un proceso diferente al proceso principal. Se
    recorre el árbol hasta llegar al renderizador correspondiente. En consecuencia, se vuelve
    a pintar el renderizador y, normalmente, sus elementos secundarios.
    El orden en el que se apilan los elementos en los contextos de pila influye en la
    pintura, ya que las pilas se pintan de atrás hacia delante. El orden de apilamiento de un
    renderizador de bloque es el siguiente:
    1. color de fondo,
    2. imagen de fondo,
    3. borde,
    4. elementos secundarios,
    5. contorno.
    Firefox analiza el árbol de renderización y crea una lista de visualización para el
    área rectangular pintada que incluye los renderizadores relevantes para el área
    rectangular en el orden de pintura correcto. De esta forma, si se quiere volver a pintar el
    árbol, solo se tendrá que recorrer una vez.
    Para optimizar el proceso, Firefox no añade elementos que vayan a quedar ocultos, como
    los elementos que quedan totalmente ocultos bajo otros elementos opacos.
    Antes de volver a iniciar un proceso de pintura, WebKit guarda el rectángulo
    antiguo como un mapa de bits. Posteriormente, solo pinta el área diferencial existente
    entre los rectángulos nuevo y antiguo.

    You might also like