TUTORIALES

ACTUALIZACIONES RECURSOS

Cmo funcionan los navegadores: lo que hay detrs de los navegadores web actuales
By Tali Garsiel & Paul Irish Publicacin ago. 5, 2011 109 Comments and 5 Reactions

Prlogo
Est e complet o manual sobre las operaciones int ernas de WebKit y Gecko es el result ado de las ext ensas invest igaciones realizadas por la desarrolladora israel Tali Garsiel. Durant e varios aos ha est ado revisando t oda la informacin publicada sobre las caract erst icas int ernas de los navegadores web (consulta la seccin Recursos) y ha pasado mucho t iempo leyendo su cdigo fuent e. Tali escribi lo siguient e:

Tali ha publicado su investigacin en su sitio web tras hacer algunas modificaciones.

, pero como sabamos que se mereca un pblico ms amplio, lo hemos publicado aqu tambin

Como desarrolladora web, co no cer las caract erst icas int ernas de las o peracio nes de lo s navegado res sirve para t o mar mejo res decisio nes y para co no cer lo s mo t ivo s que just ifican las prct icas de desarro llo reco mendadas . Aunque se t rat a de un document o bast ant e ext enso, t e recomendamos que dediques un poco de t u t iempo a examinarlo. Ten por seguro que no t e arrepent irs.
Paul Irish, Relaciones con desarrolladores de Chrome

PDFmyURL.com

Introduccin
Los navegadores son probablement e el soft ware ms ut ilizado de t odos. En est e manual se explica su funcionamient o int erno. Veremos qu ocurre cuando escribes google.com en la barra de direcciones hast a que la pgina de Google aparece en la pant alla.

ndice
1. Introduccin 1. Los navegadores de los que hablaremos 2. La funcin principal de un navegador 3. Componentes principales del navegador 2. El motor de renderizacin 1. Motores de renderizacin 2. El flujo principal 3. Ejemplos del flujo principal 3. Anlisis y construccin del rbol de DOM 1. Anlisis (general) 1. Gramticas 2. Analizador: combinacin de analizadores lxicos 3. Traduccin 4. Ejemplo de anlisis 5. Definiciones formales de vocabulario y sintaxis 6. Tipos de analizadores 7. Cmo generar analizadores automticamente 2. Analizador de HTML 1. Definicin de gramtica HTML 2. No es una gramtica libre de contexto 3. DTD de HTML 4. DOM
PDFmyURL.com

5. El algoritmo de anlisis 6. El algoritmo de tokenizacin 7. Algoritmo de construccin de rbol 8. Acciones al finalizar el anlisis 9. Tolerancia a errores de los navegadores 3. Anlisis de CSS 1. Analizador de CSS de WebKit 4. Orden de procesamiento de secuencias de comandos y hojas de estilo 1. Secuencias de comandos 2. Anlisis especulativo 3. Hojas de estilo 4. Construccin del rbol de renderizacin 1. Relacin del rbol de renderizacin con el rbol de DOM 2. El flujo de construccin del rbol 3. Computacin de estilos 1. Datos de estilo compartidos 2. rbol de reglas de Firefox 1. Divisin en estructuras 2. Cmo computar los contextos de estilo con el rbol de reglas 3. Cmo manipular las reglas para obtener coincidencias fcilmente 4. Cmo aplicar las reglas en el orden de cascada correcto 1. Orden en cascada de la hoja de estilo 2. Especificidad 3. Cmo ordenar las reglas 4. Proceso gradual 5. Diseo 1. Sistema de bit de modifiacin (dirty bit) 2. Diseo global e incremental
PDFmyURL.com

3. Diseo asncrono y sncrono 4. Optimizaciones 5. El proceso de diseo 6. Clculo del ancho 7. Salto de lnea 6. Pintura 1. Global e incremental 2. Orden del proceso de pintura 3. Lista de visualizacin de Firefox 4. Almacenamiento de figuras rectangulares de WebKit 7. Cambios dinmicos 8. Subprocesos del motor de renderizacin 1. Bucle de eventos 9. Modelo de formato visual de CSS2 1. El elemento canvas 2. Modelo de cajas de CSS 3. Esquema de posicionamiento 4. Tipos de cajas 5. Posicionamiento 1. Relativo 2. Flotante 3. Absoluto y fijo 6. Representacin en capas 10. Recursos

Los navegadores de los que hablaremos

En la act ualidad se ut ilizan principalment e cinco navegadores: Int ernet Explorer , Firefox, Safari, Chrome y Opera. Los ejemplos de est e document o se refieren a navegadores de cdigo abiert o, como Firefox, Chrome y Safari (est e lt imo es en part e de cdigo abiert o). Segn las est adst icas sobre navegadores de St at Count er , act ualment e (agost o de 2011) el uso conjunt o de Firefox, Safari y Chrome
PDFmyURL.com

represent a el 60%. Por t ant o, en est os moment os los navegadores de cdigo abiert o const it uyen una part e import ant e del mercado de los navegadores.

La funcin principal de un navegador

La funcin principal de un navegador es solicit ar al servidor los recursos web que elija el usuario y most rarlos en una vent ana. El recurso suele ser un document o HTML, pero t ambin puede ser un archivo PDF , una imagen o un objet o de ot ro t ipo. El usuario especifica la ubicacin del recurso mediant e el uso de una URI (siglas de Uniform Resource Ident ifier , ident ificador uniforme de recurso). La forma en la que el navegador int erpret a y muest ra los archivos HTML se det ermina en las especificaciones de CSS y HTML. Est as especificaciones las est ablece el consorcio W3C (World Wide Web Consort ium), que es la organizacin de est ndares de Int ernet . Durant e aos, los navegadores cumplan solo una part e de las especificaciones y desarrollaban sus propias ext ensiones. Est o provoc graves problemas de compat ibilidad para los creadores de cont enido web. En la act ualidad, la mayora de los navegadores cumplen las especificaciones en mayor o menor grado. Las int erfaces de usuario de los dist int os navegadores t ienen muchos element os en comn. Est os son algunos de los element os comunes de las int erfaces de usuario: una barra de direcciones donde insert ar las URI, bot ones de avance y ret roceso, opciones de marcadores, un bot n para det ener la carga de los document os act uales y ot ro para volver a cargarlos, un bot n de inicio que permit e volver a la pgina de inicio. Est as coincidencias result an ext raas, ya que la int erfaz de usuario de los navegadores no se incluye en ninguna de las especificaciones formales, sino que procede de la experiencia acumulada a lo largo de los aos y de los element os que los navegadores han imit ado unos de ot ros. La especificacin de HTML5 no define los element os que debe incluir la int erfaz de usuario de los navegadores, pero muest ra algunos element os comunes. Ent re est os element os se encuent ran la barra de direcciones, la barra de est ado y la barra de herramient as. Exist en, por supuest o, caract erst icas nicas de cada navegador , como el administ rador de descargas de Firefox.

Componentes principales del navegador

A cont inuacin se especifican los component es principales de un navegador (1.1).
PDFmyURL.com

1. Interfaz de usuario: incluye la barra de direcciones, el botn de avance/retroceso, el men de marcadores, etc. (en general, todas las partes visibles del navegador, excepto la ventana principal donde se muestra la pgina solicitada). 2. Motor de bsqueda: coordina las acciones entre la interfaz y el motor de renderizacin. 3. Motor de renderiz acin: es responsable de mostrar el contenido solicitado. Por ejemplo, si el contenido solicitado es HTML, ser el responsable de analizar el cdigo HTML y CSS y de mostrar el contenido analizado en la pantalla. 4. Red: es responsable de las llamadas de red, como las solicitudes HTTP. Tiene una interfaz independiente de la plataforma y realiza implementaciones en segundo plano para cada plataforma. 5. Servidor de la interfaz : permite presentar widgets bsicos, como ventanas y cuadros combinados. Muestra una interfaz genrica que no es especfica de ninguna plataforma. Utiliza mtodos de la interfaz de usuario del sistema operativo en segundo plano. 6. Intrprete de JavaScript: permite analizar y ejecutar el cdigo JavaScript. 7. Almacenamiento de datos: es una capa de persistencia. El navegador necesita guardar todo tipo de datos en el disco duro (por ejemplo, las cookies). La nueva especificacin de HTML (HTML5) define el concepto de "base de datos web", que consiste en una completa (aunque ligera) base de datos del navegador.

Figura 1: componentes principales del navegador

Es import ant e decir que Chrome, a diferencia de la mayora de los navegadores, implement a varias inst ancias del mot or de renderizacin,
PDFmyURL.com

una por cada pest aa. Cada pest aa represent a un proceso independient e. Chapt er 2

El motor de renderizacin
La responsabilidad del mot or de renderizacin es "renderizar", es decir , most rar el cont enido solicit ado en la pant alla del navegador . De forma predet erminada, el mot or de renderizacin puede most rar imgenes y document os HTML y XML. Puede most rar ot ros t ipos mediant e el uso de complement os (o ext ensiones); por ejemplo, puede most rar document os PDF mediant e un complement o capaz de leer archivos PDF . Sin embargo, en est e capt ulo nos cent raremos en su uso principal: most rar imgenes y cdigo HTML con format o definido con CSS.

Motores de renderizacin
Nuest ros navegadores de referencia (Firefox, Chrome y Safari) est n basados en dos mot ores de renderizacin. Firefox ut iliza Gecko, un mot or de renderizacin propio de Mozilla. Tant o Safari como Chrome ut ilizan WebKit . WebKit es un mot or de renderizacin de cdigo abiert o que empez siendo un mot or de la plat aforma Linux y que fue modificado post eriorment e por Apple para hacerlo compat ible con Mac y Windows. Puedes obt ener ms informacin en webkit .org .

El flujo principal
El mot or de renderizacin empieza recibiendo el cont enido del document o solicit ado desde la capa de red, normalment e en fragment os de 8.000 byt es. A cont inuacin, el mot or de renderizacin realiza est e flujo bsico:

Figura 2: flujo bsico del motor de renderizacin

El mot or de renderizacin empieza a analizar el document o HTML y conviert e las et iquet as en nodos DOM en un rbol denominado "rbol de cont enido". Analiza los dat os de est ilo, t ant o en los archivos CSS ext ernos como en los element os de est ilo. Los dat os de est ilo, junt o con las inst rucciones visuales del cdigo HTML, se ut ilizan para crear ot ro rbol: el rbol de renderizacin.
PDFmyURL.com

El rbol de renderizacin cont iene rect ngulos con at ribut os visuales, como el color y las dimensiones. Los rect ngulos est n organizados en el orden en el que aparecern en la pant alla. Una vez const ruido el rbol de renderizacin, se inicia un proceso de "diseo". Est o significa que a cada nodo se le asignan las coordenadas exact as del lugar de la pant alla en el que debe aparecer . La siguient e fase es la de pint ura, en la que se recorre el rbol de renderizacin y se pint a cada uno de los nodos ut ilizando la capa de servidor de la int erfaz de usuario. Es import ant e comprender que se t rat a de un proceso gradual. Para mejorar la experiencia del usuario, el mot or de renderizacin int ent ar most rar el cont enido en pant alla lo ant es posible. No esperar a que se analice el cdigo HTML para empezar a crear y disear el rbol de renderizacin. Se analizarn y se most rarn algunas part es del cont enido, mient ras que se sigue procesando el rest o del cont enido que llega de la red.

Ejemplos del flujo principal

Figura 3: flujo principal de WebKit

PDFmyURL.com

Figura 4: flujo principal del motor de renderizacin Gecko de Mozilla ( 3.6)

En las figuras 3 y 4 se puede ver que, aunque WebKit y Gecko ut ilizan una t erminologa ligerament e diferent e, el flujo es bsicament e el mismo. Gecko denomina al rbol de element os format eados visualment e "rbol de marcos". Cada uno de los element os es un marco. WebKit ut iliza los t rminos "rbol de renderizacin" y "objet os de renderizacin" en lugar de los ant eriores. WebKit ut iliza el t rmino "diseo" para colocar los element os, mient ras que Gecko lo denomina "reflujo". WebKit ut iliza el t rmino "asociacin" para conect ar los nodos DOM con informacin visual para crear el rbol de renderizacin. Una pequea diferencia no semnt ica es que Gecko dispone de una capa ext ra ent re el cdigo HTML y el rbol de DOM. Est a capa se denomina "depsit o de cont enido" y est dedicada a la creacin de element os DOM. Vamos a ver cada una de las part es del flujo: Chapt er 3

Anlisis (general)
Dado que el anlisis es un proceso muy import ant e del mot or del renderizacin, vamos a verlo de una forma ms det allada. Comencemos por una breve int roduccin a est e proceso. Analizar un document o significa t raducirlo a una est ruct ura que t enga sent ido, es decir , algo que el cdigo pueda comprender y ut ilizar . El result ado del anlisis suele ser un rbol de nodos que represent a la est ruct ura del document o. Est e rbol se denomina "rbol de anlisis" o
PDFmyURL.com

"rbol de sint axis". Ejemplo: el anlisis de la expresin 2 + 3 - 1 podra dar como result ado est e rbol:

Figura 5: nodo de rbol de expresin matemtica

Gramt icas
El anlisis se basa en las reglas de sint axis por las que se rige el document o, es decir , el lenguaje o el format o en el que est escrit o. Todos los format os que se pueden analizar deben t ener una gramt ica det erminist a formada por un vocabulario y unas reglas de sint axis. Est o se denomina gramt ica libre de cont ext o. Los lenguajes humanos no son de est e t ipo y, por t ant o, no se pueden analizar con t cnicas de anlisis convencionales.

Analizador: combinacin de analizadores lxicos

El proceso de anlisis se puede dividir en dos subprocesos: anlisis lxico y anlisis sint ct ico. El anlisis lxico es el proceso de descomponer los dat os de ent rada en t okens. Los t okens son el vocabulario del lenguaje, un conjunt o de bloques de const ruccin vlidos. En el lenguaje humano, equivaldra a t odas las palabras que aparecen en el diccionario de un det erminado idioma. El anlisis sint ct ico es la aplicacin de las reglas sint ct icas del lenguaje. Los analizadores normalment e dividen el t rabajo ent re dos component es: el analizado r lxico (a veces denominado "t okenizador"), responsable de descomponer los dat os de ent rada en t okens vlidos, y el analizado r no rmal, responsable de const ruir el rbol t ras analizar la est ruct ura del document o segn las reglas sint ct icas del lenguaje. El analizador lxico es capaz de ignorar caract eres irrelevant es, como espacios en blanco y salt os de lnea.

PDFmyURL.com

Figura 6: del documento original al rbol de anlisis

El proceso de anlisis es it erat ivo. El analizador normalment e pide al analizador lxico un nuevo t oken e int ent a buscar coincidencias ent re el t oken y una de las reglas de sint axis. Si se encuent ra una coincidencia, se aade al rbol de anlisis un nodo correspondient e al t oken y el analizador solicit a ot ro t oken. Si no coincide con ninguna regla, el analizador almacena el t oken int ernament e y sigue solicit ando t okens hast a que encuent ra una regla que coincide con t odos los t okens almacenados int ernament e. Si no encuent ra ninguna regla, lanza una excepcin. Est o significa que el document o no se considera vlido por t ener errores de sint axis.

Traduccin
Muchas veces, el rbol de anlisis no es el product o final. El anlisis se ut iliza frecuent ement e en la t raduccin, es decir , en la conversin del document o de ent rada a ot ro format o. Un ejemplo sera la compilacin. El compilador , que compila un cdigo fuent e en cdigo de mquina, en primer lugar lo conviert e en un rbol de anlisis y, a cont inuacin, t raduce el rbol a un document o de cdigo de mquina.

PDFmyURL.com

Figura 7: flujo de compilacin

Ejemplo de anlisis
En la figura 5 se observa un rbol de anlisis creado a part ir de una expresin mat emt ica. Int ent emos definir un lenguaje mat emt ico simple y veamos el proceso de anlisis. Vocabulario: nuest ro lenguaje puede incluir nmeros ent eros, el signo ms y el signo menos. Sint axis:
1. Los bloques de construccin de la sintaxis del lenguaje son expresiones, trminos y operaciones. 2. Nuestro lenguaje puede incluir cualquier cantidad de expresiones. 3. Una expresin est formada por un "trmino" seguido de una "operacin" y de otro trmino. 4. Una operacin es un token de suma o un token de resta.
PDFmyURL.com

5. Un trmino es un token de nmero entero o una expresin.

Analicemos la ent rada 2 + 3 - 1 . La primera subcadena que coincide con una regla es 2 ; segn la regla 5, es un t rmino. La segunda coincidencia es 2 + 3 , que coincide con la t ercera regla (un t rmino seguido de una operacin y de ot ro t rmino). La siguient e coincidencia solo se ut ilizar al final de la ent rada. 2 + 3 - 1 es una expresin porque ya sabemos que 2+3 es un t rmino, as que t enemos un t rmino seguido de una operacin y de ot ro t rmino. 2 + + no coincide con ninguna regla, por lo que no sera una ent rada vlida.

Definiciones formales de vocabulario y sint axis

El vocabulario se suele expresar mediant e expresiones regulares Por ejemplo, nuest ro lenguaje se definir de la siguient e forma:
INTEGER :0|[1-9][0-9]* PLUS : + MINUS: Como se puede observar, los nmeros enteros se definen mediante una expresin regular.

La sint axis normalment e se define en un format o denominado not acin de Backus-Naur forma:
expression := term operation term operation := PLUS | MINUS term := INTEGER | expression

(BNF). Nuest ro idioma se definir de la siguient e

Dijimos que un lenguaje se puede analizar mediant e analizadores normales si su gramt ica es una gramt ica libre de cont ext o. Una definicin int uit iva de una gramt ica libre de cont ext o es una gramt ica que se puede expresar complet ament e en not acin de BackusNaur (BNF). Puedes consult ar una definicin formal en est e art culo de Wikipedia sobre las gramt icas libres de cont ext o .

Tipos de analizadores
Exist en dos t ipos bsicos de analizadores: los descendent es y los ascendent es. Ut ilizando una explicacin int uit iva, podramos decir que los analizadores descendent es comprueban la est ruct ura de nivel superior de la sint axis e int ent an buscar una coincidencia, mient ras que los analizadores ascendent es comienzan con los dat os de ent rada y los van t ransformando gradualment e mediant e las reglas sint ct icas
PDFmyURL.com

empezando por el nivel ms bajo hast a que se cumplen las reglas de nivel superior . Veamos cmo analizan el cont enido de ejemplo est os dos t ipos de analizadores: Un analizador descendent e empieza desde la regla de nivel superior: ident ifica 2 + 3 como una expresin. A cont inuacin, ident ifica 2 + 3 1 como expresin (el proceso de ident ificar la expresin se desarrolla buscando coincidencias con el rest o de las reglas, pero se empieza por la regla de nivel superior). El analizador ascendent e analiza los dat os de ent rada hast a que encuent ra una coincidencia con una regla y, a cont inuacin, sust it uye la ent rada coincident e con la regla. Est e proceso cont ina hast a que se analizan t odos los dat os de ent rada. Las expresiones con coincidencias parciales se colocan en la pila del analizador .
Pila trmino operacin del trmino expresin expresin Este tipo de analizador ascendente se conoce como analizador de desplazamiento-reduccin debido a que los datos de entrada se desplazan hacia la derecha (imagina un puntero que apunta primero al inicio de los datos de entrada y a continuacin se desplaza hacia la derecha) y gradualmente se reducen segn las reglas sintcticas. Entrada 2+ 3-1 + 3-1 3-1 -1

operacin de la expresin 1

Cmo generar analizadores aut omt icament e

Exist en herramient as capaces de generar analizadores aut omt icament e. Se denominan generadores de analizadores. Est os generadores crean aut omt icament e un analizador funcional ut ilizando la gramt ica del lenguaje (vocabulario y reglas sint ct icas) est ablecida por el desarrollador . Los generadores de analizadores son muy t iles, ya que, para crear un analizador , es necesario disponer de un profundo conocimient o del proceso de anlisis, y no result a fcil crear manualment e un analizador opt imizado. WebKit ut iliza dos generadores de analizadores muy conocidos: Flex , para crear un analizador lxico, y Bison , para crear un analizador

normal (t ambin se conocen como "Lex" y "Yacc"). La ent rada de Flex consist e en un archivo con definiciones de expresiones regulares de los t okens. La ent rada de Bison consist e en las reglas sint ct icas del lenguaje en format o BNF .

Analizador de HTML
El t rabajo del analizador de HTML es analizar las marcas HTML y organizarlas en un rbol de anlisis.
PDFmyURL.com

Definicin de gramt ica HTM L

Es la sint axis y el vocabulario definidos en las especificaciones creadas por la organizacin W3C. La versin act ual es HTML4 y act ualment e se est t rabajando en HTML5.

No es una gramt ica libre de cont ext o

Como ya vimos en la int roduccin al anlisis, la sint axis de la gramt ica se puede definir formalment e mediant e format os como BNF . Lament ablement e, no t odos los t emas sobre analizadores convencionales se pueden aplicar al lenguaje HTML (los he incluido porque se ut ilizarn en el anlisis de CSS y JavaScript ). El lenguaje HTML no se puede definir fcilment e mediant e la gramt ica libre de cont ext o que necesit an los analizadores. Exist e un format o formal para definir el lenguaje HTML: DTD (definicin de t ipo de document o); sin embargo, no es una gramt ica libre de cont ext o. Parece algo ext rao a primera vist a: el lenguaje HTML es bast ant e similar al XML. Hay una gran variedad de analizadores de XML disponibles. Exist e una variacin XML del lenguaje HTML, el XHTML, as que, cul es la diferencia? La diferencia radica en que el lenguaje HTML es ms "permisivo", ya que permit e omit ir ciert as et iquet as que se aaden de forma implcit a, a veces se omit e el principio o el final de las et iquet as, et c. En conjunt o, es una sint axis "flexible", en oposicin a la sint axis rgida y exigent e del lenguaje XML. Est a diferencia aparent ement e pequea es, en realidad, abismal. Por un lado, est a es la razn principal por la que el HTML es t an popular: permit e errores y facilit a las cosas a los aut ores de cont enido web. Por ot ro lado, hace que result e difcil escribir una gramt ica formal. En resumen: el lenguaje HTML no se puede analizar fcilment e mediant e analizadores convencionales (porque no dispone de una gramt ica libre de cont ext o) ni mediant e analizadores de XML.

DTD DE HTM L
La definicin de HTML est en format o DTD. Est e format o se ut iliza para definir lenguajes de la familia SGML . Cont iene definiciones de t odos los element os permit idos, de sus at ribut os y de su jerarqua. Como vimos ant es, la definicin DTD del lenguaje HTML no forma una gramt ica libre de cont ext o. Exist en algunas variaciones de la definicin DTD. El modo est rict o se ajust a nicament e a las especificaciones, pero ot ros modos admit en el marcado ut ilizado ant eriorment e por los navegadores. El objet ivo es mant ener la compat ibilidad con el cont enido ms ant iguo. La
PDFmyURL.com

definicin DTD est rict a act ual se encuent ra en la siguient e pgina: www.w3.org/TR/ht ml4/st rict .dt d

DOM
El rbol de salida ("rbol de anlisis") est formado por element os DOM y nodos de at ribut o. DOM son las siglas de "Document Object Model" (modelo de objet os del document o). Es la present acin de objet os del document o HTML y la int erfaz de los element os HTML para el mundo ext erior , como JavaScript . La raz del rbol es el objet o Document .

El modelo DOM guarda una relacin 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 traducira en el siguiente rbol de DOM:

Figura 8: rbol de DOM del marcado de ejemplo

Al igual que el HTML, la organizacin W3C ha especificado el modelo DOM. Puedes consult arlo en la pgina www.w3.org/DOM/DOMTR

. Es

PDFmyURL.com

una especificacin genrica para la manipulacin de document os. Un mdulo especfico describe element os HTML especficos. Puedes consult ar las definiciones HTML en la pgina www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/idl-definit ions.ht ml . Cuando digo que el rbol cont iene nodos DOM, quiero decir que est const ruido con element os que implement an una de las int erfaces DOM. Los navegadores ut ilizan implement aciones concret as que t ienen ot ros at ribut os que el navegador ut iliza int ernament e.

El algorit mo de anlisis
Como vimos en las secciones ant eriores, el lenguaje HTML no se puede analizar mediant e los analizadores ascendent es y descendent es normales. Las razones son:
1. la naturaleza permisiva del lenguaje, 2. el hecho de que los navegadores presenten una tolerancia a errores tradicional para admitir casos bien conocidos de HTML no vlido, 3. la naturaleza iterativa del proceso de anlisis. Normalmente, el cdigo no cambia durante el anlisis. Sin embargo, en el caso del cdigo HTML, las etiquetas de secuencias de comandos que contienen document.write pueden aadir tokens adicionales, por lo que el proceso de anlisis llega a modificar los datos de entrada.

Al no poder ut ilizar las t cnicas de anlisis normales, los navegadores crean analizadores personalizados para analizar el cdigo HTML. El algorit mo de anlisis se describe de forma det allada en la especificacin de HTML5 la const ruccin del rbol. . El algorit mo present a dos fases: la t okenizacin y

La t okenizacin es el anlisis lxico, es decir , el anlisis y la conversin en t okens de los dat os de ent rada. Ent re los t okens HTML se encuent ran las et iquet as iniciales, las et iquet as finales y los valores de at ribut os. El t okenizador reconoce el t oken, lo enva al const ruct or del rbol y consume el siguient e carct er para reconocer el siguient e t oken, y as sucesivament e hast a llegar al final de los dat os.

PDFmyURL.com

Figura 9: flujo de anlisis de HTML (tomado de la especificacin de HTML5)

El algorit mo de t okenizacin
El algorit mo produce un t oken HTML. El algorit mo se expresa como una mquina de est ado. Cada est ado consume uno o varios caract eres del flujo de ent rada y act ualiza el siguient e est ado de acuerdo con esos caract eres. La decisin est influenciada por el est ado de t okenizacin act ual y por el est ado de const ruccin del rbol. Est o significa que el mismo carct er consumido producir result ados diferent es para el siguient e est ado correct o en funcin del est ado act ual. El algorit mo es demasiado complejo para describirlo en su t ot alidad, as que veremos algunos ejemplos sencillos que nos ayudarn a comprender el principio. Ejemplo bsico de t okenizacin del siguient e cdigo HTML:
<html> <body> Hello world </body>
PDFmyURL.com

</html>

El est ado inicial es el de "est ado de dat os". Cuando se encuent ra el carct er < , el est ado cambia a est ado de et iquet a abiert a . Al consumir un carct er a-z , se crea el est ado "t oken de et iquet a inicial" y el est ado cambia a est ado de no mbre de et iquet a . Est e est ado se mant iene hast a que se consume el carct er > . Todos los caract eres se aaden al nombre del nuevo t oken. En nuest ro caso, el nuevo t oken es un t oken ht ml . Al llegar a la et iquet a > , se emit e el t oken act ual y el est ado cambia a est ado de dat o s . Se siguen los mismos pasos para la et iquet a <body> . Hast a ahora, se han emit ido las et iquet as ht ml y body . Ahora volvemos al est ado de dat o s . Al consumir el carct er H de Hello world , se crea y se emit e un t oken de carct er , y as sucesivament e hast a llegar al carct er < de </body> . Se emit e un t oken de carct er por cada uno de los caract eres de Hello world . Ahora volvemos al est ado de et iquet a abiert a . Al consumir la siguient e ent rada / , se crea un t oken de et iquet a final y se pasa al est ado de no mbre de et iquet a . De nuevo, el est ado se mant iene hast a llegar a > . A cont inuacin, se emit e el t oken de la nueva et iquet a y se vuelve al est ado de dat o s . La ent rada </ht ml> se t rat ar como el caso ant erior .

PDFmyURL.com

Figura 10: tokenizacin de la entrada de ejemplo

Algorit mo de const ruccin de rbol

Cuando se crea un analizador , se crea el objet o "Document ". Durant e la fase de const ruccin, se modifica el rbol de DOM que incluye el objet o "Document " en su raz y se aaden element os. El const ruct or del rbol procesa cada nodo emit ido por el t okenizador . Por cada t oken, la especificacin define qu element os de DOM son relevant es y cules se deben crear para est e t oken. Adems de aadirse al rbol de DOM, el element o se aade a una pila de element os abiert os. Est a pila permit e corregir incidencias de anidacin y de et iquet as no cerradas. El algorit mo t ambin se describe como una mquina de est ado. Los est ados se denominan "modos de insercin". Veamos cul sera el proceso de const ruccin del rbol para los dat os de ent rada del ejemplo:
<html> <body> Hello world </body> </html>
PDFmyURL.com

La ent rada a la fase de const ruccin del rbol es una secuencia de t okens de la fase de t okenizacin. El primer modo es el "mo do inicial". Si se recibe el t oken ht ml, se pasar al modo "previo a ht ml" y se volver a procesar el t oken en ese modo. Est o har que el element o "HTMLHt mlElement " se cree y se aada al objet o raz "Document ". El est ado cambiar a "ant es del encabezado ". Recibimos el t oken "body". Se crear implcit ament e un element o "HTMLHeadElement ", aunque no t engamos ningn t oken "head", y ese element o se aadir al rbol. Ahora pasamos al modo "en el encabezado " y, a cont inuacin, al modo "despus del encabezado ". El t oken del cuerpo se vuelve a procesar , se crea y se insert a un element o "HTMLBodyElement " y, por lt imo, el modo pasa a "en el cuerpo ". A cont inuacin, se reciben los t okens de los caract eres de la cadena "Hello world". El primero har que se cree y se insert e el nodo "Text ", al que se aadir el rest o de caract eres. La recepcin del t oken de finalizacin del cuerpo provocar una t ransferencia al modo "despus del cuerpo ". A cont inuacin, se recibir la et iquet a HTML final, que har que se pase al modo despus del cuerpo . Cuando se reciba el final del t oken del archivo, al anlisis finalizar.

PDFmyURL.com

Figura 11: construccin de rbol del cdigo HTML de ejemplo

Acciones al finalizar el anlisis

En est a fase, el navegador marcar el document o como int eract ivo y empezar a analizar las secuencias de comandos que se encuent ren en modo "aplazado", es decir , aquellas que se deben ejecut ar una vez que se ha analizado el document o. A cont inuacin, el est ado del document o se est ablecer como "complet ado" y se act ivar un event o de "carga". Se pueden ver los algorit mos complet os para t okenizacin y la const ruccin del rbol en la especificacin de HTML5 .

Tolerancia a errores de los navegadores

Nunca se obt iene un error por "sint axis no vlida" en una pgina HTML. Los navegadores corrigen el cont enido no vlido y siguen. Tomemos est e cdigo HTML como ejemplo:
PDFmyURL.com

<html> <mytag> </mytag> <div> <p> </div> Really lousy HTML </p> </html>

He debido de infringir un milln de reglas ("myt ag" no es una et iquet a est ndar , los element os "p" y "div" est n mal anidados, et c.), pero el navegador sigue most rndolo correct ament e y no muest ra ningn error . Por lo t ant o, una gran part e del cdigo del analizador corrige los errores del aut or de cont enido HTML. La gest in de errores es bast ant e consist ent e en los navegadores, pero lo ms increble es que no forma part e de la especificacin act ual de HTML. Al igual que los marcadores y los bot ones de avance y ret roceso, es algo que se ha ido desarrollando a lo largo de los aos. Hay algunas const rucciones HTML conocidas que no son vlidas y que se repit en en muchos sit ios. Los navegadores int ent an corregirlas de acuerdo con ot ros navegadores. En cambio, en la especificacin de HTML5 s se definen algunos de est os requisit os. WebKit lo resume en el coment ario que se encuent ra al principio de la clase de analizador de HTML.

PDFmyURL.com

Veamos algunos ejemplos de t olerancia a errores de WebKit : </br> en lugar de <br> Algunos sit ios ut ilizan </br> en lugar de <br>. Para poder ser compat ible con Int ernet Explorer y Firefox, WebKit t rat a la et iquet a como si fuera <br>. Cdigo:
if (t->isCloseTag(brTag) && m_document->inCompatMode()) { reportError(MalformedBRError); t->beginTag = true; } Nota: los errores se gestionan de forma interna, es decir, no se muestran al usuario.

Tabla perdida Una t abla perdida es una t abla incluida en el cont enido de ot ra t abla, pero no en una celda. Ejemplo:
<table> <table> <tr><td>inner table</td></tr> </table> <tr><td>outer table</td></tr> </table> WebKit cambiar la jerarqua de dos tablas secundarias: <table> <tr><td>outer table</td></tr> </table> <table>
PDFmyURL.com

<tr><td>inner table</td></tr> </table> Cdigo: if (m_inStrayTableContent && localName == tableTag) popBlock(tableTag); WebKit utiliza una pila para el contenido del elemento actual y saca la tabla interna de la pila de la tabla externa. Las tablas se encontrarn en el mismo nivel de la jerarqua.

Element os de un formulario anidado Si el usuario incluye un formulario dent ro de ot ro, el segundo se ignorar. Cdigo:
if (!m_currentFormElement) { m_currentFormElement = new HTMLFormElement(formTag, }

m_document);

Jerarqua de et iquet as demasiado profunda El coment ario habla por s solo.

bool HTMLParser::allowNestedRedundantTag(const AtomicString& tagName) { unsigned i = 0; for (HTMLStackElem* curr = m_blockStack; i < cMaxRedundantTagDepth && curr && curr->tagName == tagName; curr = curr->next, i++) { } return i != cMaxRedundantTagDepth;
PDFmyURL.com

return i != cMaxRedundantTagDepth; }

Et iquet as finales de cuerpo o HTML colocadas incorrect ament e De nuevo, el coment ario habla por s solo.

if (t->tagName == htmlTag || t->tagName == bodyTag ) return; As que ya sabis: a menos que queris aparecer como ejemplo en un fragmento de cdigo de tolerancia a errores de WebKit, escribid el cdigo HTML correctamente.

Anlisis de CSS
Os acordis de los concept os de anlisis que vimos en la int roduccin? A diferencia del lenguaje HTML, CSS t iene una gramt ica libre de cont ext o y se puede analizar con los t ipos de analizadores descrit os en la int roduccin. De hecho, la especificacin del lenguaje CSS define su gramt ica sint ct ica y lxica .

Veamos algunos ejemplos: La gramt ica lxica (el vocabulario) se define mediant e expresiones regulares para cada t oken:
comment \/\*[^*]*\*+([^/*][^*]*\*+)*\/ num [0-9]+|[0-9]*"."[0-9]+ nonascii [\200-\377] nmstart [_a-z]|{nonascii}|{escape} nmchar [_a-z0-9-]|{nonascii}|{escape} name {nmchar}+ ident {nmstart}{nmchar}*

"ident " es la abreviat ura de ident ificador , como el nombre de una clase. "name" es el ident ificador de un element o (y se hace referencia a l mediant e "#"). La gramt ica sint ct ica se describe en BNF .
PDFmyURL.com

ruleset : selector [ ',' S* selector ]* '{' S* declaration [ ';' S* declaration ]* '}' S* ; selector : simple_selector [ combinator selector | S+ [ combinator? selector ]? ]? ; simple_selector : element_name [ HASH | class | attrib | pseudo ]* | [ HASH | class | attrib | pseudo ]+ ; class : '.' IDENT ; element_name : IDENT | '*' ; attrib : '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ] ']' ; pseudo : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ] ; Explicacin: un conjunto de reglas es una estructura como la que se muestra a continuacin. div.error , a.error { color:red; font-weight:bold; } "div.error" y "a.error" son selectores. La parte entre llaves contiene las reglas que se aplican a este conjunto de reglas. Esta estructura se define formalmente en esta definicin: ruleset : selector [ ',' S* selector ]* '{' S* declaration [ ';' S* declaration ]* '}' S*
PDFmyURL.com

; Esto significa que un conjunto de reglas es un selector o un nmero opcional de selectores separados por una coma y por espacios (S significa espacio en blanco). Un conjunto de reglas contiene una declaracin entre llaves u, opcionalmente, una serie de declaraciones separadas por punto y coma. "declaration" y "selector" se definirn en las siguientes definiciones de BNF.

Analizador de CSS de WebKit

WebKit ut iliza generadores de analizadores Flex y Bison para crear analizadores aut omt icament e a part ir de los archivos de gramt ica de CSS. Como ya dijimos en la int roduccin a los analizadores, Bison crea un analizador ascendent e de desplazamient o-reduccin. Firefox ut iliza un analizador descendent e escrit o manualment e. En ambos casos, los archivos CSS se analizan y se conviert en en objet os "St yleSheet ", cada uno de los cuales cont iene reglas de CSS. Los objet os de regla de CSS cont ienen objet os de declaraciones y select ores, as como ot ros objet os relacionados con la gramt ica de CSS.

Figura 12: anlisis de CSS

PDFmyURL.com

Orden de procesamiento de secuencias de comandos y hojas de estilo

Secuencias de comandos
El modelo de la Web es sncrono. Los aut ores esperan que las secuencias de comandos se analicen y se ejecut en inmediat ament e cuando el analizador llega a la et iquet a <script >. El anlisis del document o se det iene hast a que la secuencia de comandos se ejecut a. La secuencia de comandos es ext erna, por lo que ant es es necesario recuperar el recurso de la red. Est a accin se realiza t ambin de una forma sncrona, es decir , que el anlisis se det iene hast a que se recupera el recurso. Est e modelo se ut iliz durant e muchos aos y est incluido en las especificaciones de HTML 4 y 5. Los aut ores pueden marcar la secuencia de comandos como "aplazada". De ese modo, no se det iene el anlisis del document o y la secuencia se ejecut a una vez que se ha complet ado el anlisis. HTML5 aade una opcin que permit e marcar la secuencia de comandos como asncrona para que se analice y se ejecut e en un subproceso diferent e.

Anlisis especulat ivo

Tant o WebKit y Firefox ut ilizan est a opt imizacin. Al ejecut ar las secuencias de comandos, ot ro subproceso analiza el rest o del document o, busca en la red ot ros recursos necesarios y los carga. De est a forma, los recursos se pueden cargar mediant e conexiones paralelas, lo que mejora la velocidad general. Not a: el analizador especulat ivo no modifica el rbol de DOM (de eso se encarga el analizador principal), solo analiza las referencias a recursos ext ernos, como secuencias de comandos ext ernas, hojas de est ilo e imgenes.

Hojas de est ilo

Las hojas de est ilo, por ot ro lado, t ienen un modelo diferent e. Concept ualment e, parece que, dado que las hojas de est ilo no modifican el rbol de DOM, no hay razn para esperarlas y det ener el anlisis del document o. Sin embargo, se produce una incidencia cuando las secuencias de comandos solicit an informacin de est ilo durant e la fase de anlisis del document o. Si el est ilo an no se ha cargado ni analizado, la secuencia de comandos obt endr respuest as incorrect as y, aparent ement e, est o causar muchas complicaciones. Parece que se t rat a de un caso ext remo, pero es bast ant e comn. Firefox bloquea t odas las secuencias de comandos si t odava se est cargando y analizando una hoja de est ilo. WebKit bloquea las secuencias de comandos solo cuando int ent an acceder a det erminadas propiedades de est ilo que se pueden ver afect adas por las hojas de est ilo descargadas. Chapt er 4

Construccin del rbol de renderizacin

Mient ras se est const ruyendo el rbol DOM, el navegador const ruye ot ro rbol: el rbol de renderizacin. Est e rbol est formado por element os visuales que se muest ran en el mismo orden en que aparecern. Es la represent acin visual del document o. El propsit o de est e rbol es poder represent ar el cont enido en el orden correct o.
PDFmyURL.com

Firefox denomina a los element os del rbol de renderizacin "marcos" (o "frames"). WebKit ut iliza el t rmino "renderizador" u "objet o de renderizacin" (o "render"). Un renderizador es capaz de represent arse a s mismo y a sus element os secundarios. La clase "RenderObject " de WebKit , la clase bsica de los renderizadores, t iene la siguient e definicin:
class RenderObject{ virtual void layout(); virtual void paint(PaintInfo); virtual void rect repaintRect(); Node* node; //the DOM node RenderStyle* style; // the computed style RenderLayer* containgLayer; //the containing z-index layer }

Cada renderizador represent a un rea rect angular que normalment e se corresponde con la caja de CSS del nodo, segn se describe en la especificacin de CSS2. Cont iene informacin geomt rica como el ancho, la alt ura y la posicin. El t ipo de caja se ve afect ado por el at ribut o de est ilo "display" relevant e para el nodo (consult a la seccin Comput acin de est ilos). Est e es el cdigo de WebKit que se ut iliza para decidir qu t ipo de renderizador se debe crear para un nodo DOM, segn el at ribut o de visualizacin:
RenderObject* RenderObject::createObject(Node* node, RenderStyle* style) { Document* doc = node->document(); RenderArena* arena = doc->renderArena(); ... RenderObject* o = 0; switch (style->display()) { case NONE: break; case INLINE: o = new (arena) RenderInline(node); break; case BLOCK: o = new (arena) RenderBlock(node); break; case INLINE_BLOCK:
PDFmyURL.com

o = new (arena) RenderBlock(node); break; case LIST_ITEM: o = new (arena) RenderListItem(node); break; ... } return o; } El tipo de elemento tambin se tiene en cuenta. Por ejemplo, las tablas y los controles de los formularios tienen marcos especiales. En WebKit, si un elemento quiere crear un renderizador especial, sobrescribe el mtodo createRenderer . Los renderizadores apuntan a objetos de estilo que contienen la informacin no geomtrica.

Relacin del rbol de renderizacin con el rbol de DOM

Los renderizadores corresponden a elementos DOM, pero la relacin no es de uno a uno. Los elementos DOM no visuales no se insertan en el rbol de renderizacin. Un ejemplo sera el elemento "head". Los elementos cuyo atributo de visualizacin se ha asignado a "none" tampoco aparecen en el rbol (los elementos con el atributo de visibilidad "hidden" s aparecen en el rbol).

Algunos element os DOM corresponden a varios objet os visuales. Est os suelen ser element os con una est ruct ura compleja que no se pueden describir en un solo rect ngulo. Por ejemplo, el element o "select " t iene t res renderizadores: uno para el rea de visualizacin, ot ro para el cuadro de list a desplegable y ot ro para el bot n. Adems, cuando el t ext o se divide en varias lneas porque el ancho no es suficient e para una lnea, las nuevas lneas se aaden como renderizadores adicionales. Ot ro ejemplo con varios renderizadores sera un cdigo HTML rot o. Segn la especificacin de CSS, un element o int egrado debe cont ener nicament e element os de bloque o element os int egrados. Si el cont enido es mixt o, se crean renderizadores de bloques annimos para incluir los element os int egrados. Algunos objet os de renderizacin corresponden a un nodo DOM de un lugar del rbol diferent e. Los element os flot ant es y aquellos con posicin absolut a quedan fuera del flujo, en un lugar diferent e del rbol y asignados al marco real. Deberan haber est ado en un marco de marcador .

PDFmyURL.com

Figura 13: el rbol renderizador y el rbol de DOM correspondiente ( 3.1) La "ventana grfica" es el bloque contenedor inicial. En WebKit, ser el objeto "RenderView".

El flujo de const ruccin del rbol En Firefox, la present acin se regist ra como un det ect or de act ualizaciones de DOM. La present acin delega la creacin de marcos en FrameConst ruct or y el const ruct or resuelve el est ilo (consult a la seccin Comput acin de est ilos) y crea un marco. En WebKit , el proceso para resolver el est ilo y crear un renderizador se denomina "asociacin". Cada nodo DOM dispone de un mt odo de "asociacin". El proceso de asociacin es sncrono, es decir , que la insercin de nodos en el rbol de DOM act iva el mt odo de "asociacin" del nuevo nodo. Al procesar las et iquet as "ht ml" y "body", se const ruye la raz del rbol de renderizacin. El objet o de renderizacin raz se corresponde con lo que la especificacin de CSS denomina "bloque cont enedor", es decir , el bloque superior que cont iene el rest o de los bloques. Sus dimensiones se corresponden con la vent ana grfica, es decir , con las dimensiones del rea de visualizacin de la vent ana del navegador .
PDFmyURL.com

Firefox lo denomina ViewPort Frame y WebKit RenderView . Est e es el objet o de renderizacin al que apunt a el document o. El rest o del rbol se const ruye como una insercin de nodos DOM. Consult a la especificacin de CSS2 en el modelo de procesamient o .

Comput acin de est ilos

Para crear el rbol de renderizacin, es necesario calcular las propiedades visuales de cada uno de los objet os de renderizacin. Para hacerlo, hay que calcular las propiedades de est ilo de cada element o. El est ilo incluye hojas de est ilo de varios orgenes, element os de est ilo int egrados y propiedades visuales en el cdigo HTML (como la propiedad "bgcolor"). Est as lt imas se t ransforman en las propiedades de est ilo de CSS correspondient es. Los orgenes de las hojas de est ilo son las hojas de est ilo predet erminadas del navegador , las proporcionadas por el aut or de la pgina y las proporcionadas por el usuario del navegador (los navegadores permit en al usuario definir su est ilo favorit o. En Firefox, por ejemplo, se puede hacer colocando una hoja de est ilo en la carpet a de perfiles del navegador). La comput acin de est ilos conlleva algunas dificult ades:
1. Al contener las numerosas propiedades de los estilos, los datos de estilo llegan a alcanzar unas dimensiones considerables, lo que puede provocar un uso excesivo de memoria. 2. La bsqueda de las reglas coincident es de cada element o puede afect ar al rendimient o si no se opt imiza el proceso. Recorrer la list a

complet a de reglas de cada element o para encont rar coincidencias es una t area muy pesada. Los select ores pueden t ener una est ruct ura compleja, lo que puede hacer que se empiece a buscar en una rut a que aparent ement e sea buena, pero que finalment e no sea as y se deba probar con ot ra rut a. Pongamos como ejemplo est e select or complejo:
div div div div{ ... } Significa que las reglas se aplican a un elemento <div> que es el descendiente de tres elementos "div". Supongamos que quieres comprobar si la regla se aplica a un elemento <div> determinado. Debes seleccionar una ruta superior del rbol para comprobarlo. Es posible que debas ascender por todo el rbol de nodos solo para averiguar que nicamente existen dos elementos "div" y que la regla no se aplica. A continuacin, debes probar con otras rutas del rbol.
PDFmyURL.com

3. Para aplicar las reglas, es necesario utilizar reglas en cascada bastante complejas que definen la jerarqua de las reglas. Veamos cmo se enfrentan los navegadores a estas dificultades:

Dat os de est ilo compart idos Los nodos de WebKit hacen referencia los objet os de est ilo (RenderSt yle). Los nodos pueden compart ir est os objet os en algunas circunst ancias. Los nodos son del mismo nivel, ya pert enezcan al mismo nodo principal o a ot ro nodo del mismo nivel que est e, y:
1. Los elementos deben tener el mismo estado de ratn (por ejemplo, uno no puede estar en ":hover" y el otro en otro estado). 2. Ninguno de los elementos debe tener un identificador. 3. Los nombres de las etiquetas deben coincidir. 4. Los atributos de clase deben coincidir. 5. El conjunto de atributos asignados debe ser idntico. 6. Los estados de enlace deben coincidir. 7. Los estados de enfoque deben coincidir. 8. Ningn elemento se debe ver afectado por selectores de atributos, es decir, no debe presentar ninguna coincidencia con ningn selector que utilice un selector de atributo en ninguna posicin dentro del selector. 9. No debe haber ningn atributo de estilo integrado en los elementos. 10. No debe haber ningn selector del mismo nivel en uso. WebCore simplemente aplica un cambio global si detecta un selector del mismo nivel e inhabilita la opcin de compartir estilos en todo el documento cuando est presente. Esto incluye el selector + y selectores como ":first-child" y ":last-child".

rbol de reglas de Firefox Firefox cuent a con dos rboles adicionales para una comput acin de est ilos ms sencilla: el rbol de reglas y el rbol de cont ext os de est ilo. WebKit t ambin cuent a con objet os de est ilo, pero no se almacenan en un rbol como el rbol de cont ext os de est ilo. Solo el nodo de DOM indica el est ilo pert inent e.

PDFmyURL.com

Figura 14: rbol de contextos de estilo (2.2)

Los cont ext os de est ilo incluyen valores finales. Para comput ar los valores, se aplican t odas las reglas con las que se hayan encont rado coincidencias en el orden correct o y se realizan manipulaciones que t ransforman los valores lgicos en concret os. Por ejemplo, si el valor lgico es un porcent aje de la pant alla, se calcular y se t ransformar en unidades absolut as. La idea del rbol de reglas es muy ingeniosa, ya que permit e compart ir est os valores ent re nodos para evit ar que se vuelvan a comput ar . Adems, ahorra espacio. Todas las reglas con las que se encuent ra alguna coincidencia se almacenan en un rbol. Los nodos inferiores de una rut a t ienen mayor prioridad. El rbol incluye t odas las rut as de las coincidencias que se han encont rado para una regla. Las reglas se almacenan lent ament e. El rbol no se comput a al principio de cada nodo, pero siempre que se debe comput ar el est ilo de un nodo, las rut as se aaden al rbol. La idea es que las rut as del rbol se muest ren como las palabras de un lexicn. Imaginemos, por ejemplo, que ya hemos comput ado est e rbol de reglas:

PDFmyURL.com

Supongamos que necesit amos encont rar coincidencias para reglas de ot ros element os del rbol de cont enido y obt enemos las siguient es reglas (en el orden correct o): B - E - I. Ya t enamos est a rut a del rbol porque ya habamos comput ado la rut a A - B - E - I - L, por lo que ahora t endremos menos t rabajo que hacer . Vamos a comprobar cmo guarda el rbol nuest ro t rabajo. Divisin en est ruct uras Los cont ext os de est ilo se dividen en est ruct uras que incluyen informacin de est ilo de una ciert a cat egora, como el borde o el color . Todas las propiedades de un est ruct ura pueden ser heredadas o no heredadas. Las propiedades heredadas son propiedades que, a menos que las defina el element o, se heredan del element o principal. Las propiedades no heredadas (denominadas propiedades "reset ") ut ilizan los valores predet erminados en caso de que no se definan. El rbol guarda en cach est ruct uras complet as (que incluyen los valores finales comput ados) del rbol. De esa forma, si el nodo inferior no proporciona una definicin para una est ruct ura, se puede ut ilizar una est ruct ura guardada en cach de un nodo superior . Cmo comput ar los cont ext os de est ilo con el rbol de reglas Cuando se comput a el cont ext o de est ilo de un element o especfico, primero se comput a una rut a del rbol de reglas o se ut iliza una exist ent e. A cont inuacin, se aplican las reglas de la rut a para complet ar las est ruct uras del nuevo cont ext o de est ilo. Empezamos por el nodo inferior de la rut a, es decir , el nodo de mayor prioridad (normalment e el select or ms especfico), y recorremos el rbol en sent ido
PDFmyURL.com

ascendent e hast a complet ar la est ruct ura. Si est e nodo de reglas no incluye ninguna especificacin para la est ruct ura, podemos opt imizarlo considerablement e (la mejor forma es recorrer el rbol en sent ido ascendent e hast a encont rar un nodo que incluya una especificacin complet a y apunt ar despus a est e nodo) y compart ir la est ruct ura complet a. Gracias a est e mt odo ahorramos valores finales y memoria. Si encont ramos definiciones parciales, recorremos el rbol en sent ido ascendent e hast a complet ar la est ruct ura. Si no encont ramos definiciones para la est ruct ura, en caso de que est a sea de t ipo "heredada", apunt amos a la est ruct ura del element o principal del rbo l de co nt ext o s . En est e caso, t ambin conseguimos compart ir las est ruct uras. Si la est ruct ura es de t ipo "no heredada", se ut ilizarn los valores predet erminados. Si el nodo ms especfico no aade valores, t endremos que efect uar clculos adicionales para t ransformarlos en valores reales. Post eriorment e, almacenamos en cach en el rbol el result ado del nodo para que se pueda ut ilizar como element o secundario. En caso de que un element o t enga un element o de su mismo nivel que apunt e al mismo nodo del rbol, ambos element os pueden compart ir el co nt ext o de est ilo co mplet o . Veamos un ejemplo. Supongamos que t enemos el siguient e cdigo HTML:
<html> <body> <div class="err" id="div1"> <p> this is a <span class="big"> big error </span> this is also a <span class="big"> very big error</span> error </p> </div> <div class="err" id="div2">another error</div> </body> </html> Y las siguientes reglas:

1. div {margin:5px;color:black} 2. .err {color:red} 3. .big {margin-top:3px}

PDFmyURL.com

4. div span {margin-bottom:4px} 5. #div1 {color:blue} 6. #div2 {color:green}

Para simplificar la t area, digamos que t enemos que complet ar solo dos est ruct uras: la est ruct ura de color y la est ruct ura de margen. La est ruct ura de color solo cont iene un miembro, el color , mient ras que la est ruct ura de margen cont iene los cuat ro lados. El rbol de reglas que se obt iene t endr la siguient e apariencia (los nodos se marcan as: "nombre del nodo : nmero de la regla a la que apunt a"):

Figura 15: rbol de reglas El rbol de cont ext os t endr la siguient e apariencia (nombre del nodo : nodo de regla a la que apunt a):

PDFmyURL.com

Figura 16: rbol de contextos Supongamos que analizamos el cdigo HTML y obt enemos la segunda et iquet a <div>. Tendremos que crear un cont ext o de est ilo para el nodo y complet ar sus est ruct uras de est ilo. Buscamos las reglas que coincidan con <div> y descubrimos que son 1, 2 y 6. Est o significa que ya exist e una rut a del rbol que podemos ut ilizar para nuest ro element o, por lo que solo necesit amos aadir ot ro nodo para la regla 6 (nodo F del rbol de reglas). Crearemos un cont ext o de est ilo y lo incluiremos en el rbol de cont ext os. El nuevo cont ext o de est ilo apunt ar al nodo F del rbol de reglas. Ahora necesit amos complet ar las est ruct uras de est ilo. Empezaremos complet ando la est ruct ura de margen. Como el lt imo nodo de regla (F) no se aade a la est ruct ura de margen, podemos ascender por el rbol hast a encont rar una est ruct ura almacenada en cach comput ada en la insercin de un nodo ant erior y ut ilizarla. Encont raremos est a est ruct ura en el nodo B, que es el nodo de nivel ms superior que especifica reglas de margen. Ya t enemos una definicin para la est ruct ura de color , por lo que no podemos ut ilizar una est ruct ura almacenada en cach. Como el color t iene un at ribut o, no necesit amos ascender por el rbol para complet ar ot ros at ribut os. Comput amos el valor final (convert imos la cadena a RGB, et c.) y almacenamos en cach en est e nodo la est ruct ura comput ada. El t rabajo relacionado con el element o <span> es an ms sencillo. Buscamos las reglas que coinciden con est e element o y llegamos a la
PDFmyURL.com

conclusin de que la regla a la que apunt a es G, como el element o "span" ant erior . Como t enemos element os del mismo nivel que apunt an al mismo nodo, podemos compart ir el cont ext o de est ilo complet o y apunt ar solo al cont ext o del element o "span" ant erior . En el caso de las est ruct uras que incluyen reglas heredadas del element o principal, el proceso de almacenamient o en cach se lleva a cabo en el rbol de cont ext os (aunque la propiedad de color se hereda, Firefox t rat a est a propiedad como no heredada y la guarda en cach en el rbol de reglas). Por ejemplo, imaginemos que aadimos reglas para las fuent es de un pargrafo:
p {font-family:Verdana;font size:10px;font-weight:bold} El elemento de prrafo, que es un elemento secundario del elemento "div" del rbol de contextos, podra compartir la misma estructura de fuente que el elemento principal. Este caso se podra aplicar si no se especificasen reglas de fuente para el prrafo.

En WebKit , no exist en los rboles de reglas, por lo que las declaraciones que coinciden se recorren cuat ro veces. En primer lugar , se aplican las propiedades de alt a prioridad de menor import ancia (est as propiedades se deben aplicar primero porque hay ot ras que dependen de ellas, como "display"); a cont inuacin, se aplican las propiedades de alt a prioridad de mayor import ancia; post eriorment e, las propiedades de prioridad normal de menor import ancia y, por lt imo, las reglas de prioridad normal de mayor import ancia. Est o significa que las propiedades que aparezcan varias veces se resolvern segn el orden de cascada correct o. La lt ima es la ms import ant e. En resumen, compart ir objet os de est ilo (ya sea en su t ot alidad o compart iendo solament e algunas de sus est ruct uras) soluciona las incidencias 1 y 3. El rbol de reglas de Firefox t ambin ayuda a aplicar las propiedades en el orden correct o. Cmo manipular las reglas para obt ener coincidencias fcilment e A cont inuacin se muest ran las dist int as fuent es de reglas de los modificadores de est ilo. Reglas de CSS, t ant o en hojas de est ilo int ernas como en element os de est ilo: p {color:blue} At ribut os de est ilo int egrados, como el siguient e: <p st yle="color:blue" />
PDFmyURL.com

At ribut os visuales HTML (que se asignan a reglas de est ilo relevant es): <p bgcolor="blue" /> Las dos lt imas fuent es coinciden fcilment e con el element o, ya que est e incluye los at ribut os de est ilo, y los at ribut os HTML se pueden asignar ut ilizando el element o como clave. Como se coment previament e en la incidencia 2, buscar una coincidencia con la regla de CSS puede result ar bast ant e complicado. Para resolver est a dificult ad, las reglas se manipulan para facilit ar el acceso. Despus de analizar la hoja de est ilo, las reglas se aaden a uno de varios mapas hash, de acuerdo con el select or . Exist en mapas organizados por ID, nombre de clase y nombre de et iquet a, y un mapa general para t odo lo que no se puede incluir en est as cat egoras. Si el select or es un ID, la regla se aadir al mapa de ID; si es una clase, se aadir al mapa de clase, et c. Est a manipulacin facilit a considerablement e la t area de asignacin de reglas. No hace falt a revisar cada declaracin, podemos ext raer las reglas relevant es para un element o de los mapas. Est a opt imizacin elimina ms del 95% de las reglas, por lo que ni siquiera es necesario t enerlas en cuent a durant e el proceso de bsqueda de coincidencias (4.1). Analicemos las reglas de est ilo que se incluyen a cont inuacin:
p.error {color:red} #messageDiv {height:50px} div {margin:5px} La primera regla se insertar en el mapa de clase, la segunda en el mapa de ID y la tercera en el mapa de etiquetas. Para el siguiente fragmento de HTML: <p class="error">an error occurred </p> <div id=" messageDiv">this is a message</div>

En primer lugar , int ent aremos buscar reglas para el element o "p". El mapa de clase incluir una clave "error" dent ro de la que se encuent ra la regla para "p.error". El element o "div" t endr reglas relevant es en el mapa de ID (la clave es el ID) y el mapa de et iquet a. Por t ant o, solo queda averiguar qu reglas ext radas de las claves realment e coinciden. Por ejemplo, si la regla del element o "div" fuera la siguient e:
PDFmyURL.com

table div {margin:5px} se extraera del mapa de etiqueta, porque la clave es el selector situado ms a la derecha, pero no coincidira con el elemento "div", que no cuenta con un antecesor de tabla.

Tant o WebKit como Firefox ut ilizan est a manipulacin. Cmo aplicar las reglas en el orden de cascada correct o El objet o de est ilo t iene propiedades que se corresponden con cada at ribut o visual (t odos los at ribut os CSS, pero ms genricos). Si ninguna de las reglas que coinciden define la propiedad, algunas propiedades se pueden heredar del element o principal del objet o de est ilo. Ot ras propiedades t ienen valores predet erminados. La incidencia se produce cuando exist e ms de una definicin, y es ent onces cuando se debe ut ilizar el orden en cascada para resolverla. Orden en cascada de la hoja de est ilo
Una declaracin de una propiedad de estilo puede aparecer en varias hojas de estilo y varias veces dentro de una misma hoja. Por ese motivo, el orden de aplicacin de las reglas tiene una gran importancia. Este orden se conoce como "cascada". De acuerdo con las especificaciones de CSS2, el orden en cascada es el siguiente (de menor a mayor): 1. declaraciones del navegador, 2. declaraciones normales del usuario, 3. declaraciones normales del autor, 4. declaraciones importantes del autor, 5. declaraciones importantes del usuario.

Las declaraciones del navegador son las que t ienen menos import ancia y las del usuario solo t ienen prioridad sobre las del aut or si est n marcadas como import ant es. Las declaraciones con el mismo orden se ordenan segn la especificidad y, post eriorment e, segn el orden en el que se han especificado. Los at ribut os visuales HTML se t raducen en las declaraciones CSS correspondient es. Se t rat an como reglas de aut or de prioridad baja. Especificidad
PDFmyURL.com

La especificacin de CSS2

define la especificidad del select or como se indica a cont inuacin:

"1" si la declaracin es de un at ribut o "st yle" en lugar de una regla con un select or; en caso cont rario, "0" (= a), nmero de at ribut os de ID del select or (= b), nmero de ot ros at ribut os y pseudoclases del select or (= c), nmero de nombres de element os y de pseudoelement os del select or (= d).
La especificidad se obtiene al concatenar los cuatro nmeros a-b-c-d (en un sistema de nmeros de base amplia).

La base numrica que se debe ut ilizar es el nmero de recuent o ms elevado de una de las cat egoras. Por ejemplo, si a=14, se puede ut ilizar una base hexadecimal. En el improbable caso de que a=17, se deber ut ilizar una base numrica de 17 dgit os. El lt imo caso sera el de un select or como ht ml body div div p... con 17 et iquet as en el select or , pero est o es muy poco probable. Algunos ejemplos:
* {} /* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0 */ li {} /* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1 */ li:first-line {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul li {} /* a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 */ ul ol+li {} /* a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 */ h1 + *[rel=up]{} /* a=0 b=0 c=1 d=1 -> specificity = 0,0,1,1 */ ul ol li.red {} /* a=0 b=0 c=1 d=3 -> specificity = 0,0,1,3 */ li.red.level {} /* a=0 b=0 c=2 d=1 -> specificity = 0,0,2,1 */ #x34y {} /* a=0 b=1 c=0 d=0 -> specificity = 0,1,0,0 */ style="" /* a=1 b=0 c=0 d=0 -> specificity = 1,0,0,0 */

Cmo ordenar las reglas Despus de buscar coincidencias, las reglas se ordenan segn las reglas de cascada. WebKit ut iliza el ordenamient o de burbuja para list as pequeas y el ordenamient o por mezcla para list as grandes. WebKit ordena las reglas sobrescribiendo el operador ">" para las reglas:
static bool operator >(CSSRuleData& r1, CSSRuleData& r2) {
PDFmyURL.com

int spec1 = r1.selector()->specificity(); int spec2 = r2.selector()->specificity(); return (spec1 == spec2) : r1.position() > r2.position() : spec1 > spec2; }

Proceso gradual
WebKit ut iliza un indicador que muest ra si se han cargado t odas las hojas de est ilo de nivel superior (incluidas las de @import s). Si las hojas de est ilo no se cargan por complet o al asociarlas, se ut ilizan marcadores de posicin (indicndolo en el document o), que se vuelven a calcular una vez que se han cargado las hojas de est ilo. Chapt er 5

Diseo
Cuando el renderizador se crea y se aade al rbol, no t iene posicin ni t amao. El clculo de est os valores se conoce como diseo o reflujo. HTML ut iliza un modelo de diseo basado en flujo, lo que significa que, la mayora de las veces, los clculos geomt ricos se pueden realizar con una sola operacin. Los element os que ent ran post eriorment e "en el flujo" no suelen influir en la geomet ra de los element os que ya se encuent ran en l, por lo que el diseo se puede aplicar de izquierda a derecha y de arriba a abajo en t odo el document o. Hay excepciones, como las t ablas HTML, que pueden requerir ms de un clculo (3.5). El sist ema de coordenadas se refiere al marco raz. Se ut ilizan las coordenadas superior e izquierda. El diseo consist e en un proceso recurrent e. Se inicia en el renderizador raz, que corresponde al element o <ht ml> del document o HTML. El diseo se aplica de forma recurrent e a t ravs de t oda la jerarqua de marcos o de una part e de ella, calculando informacin geomt rica para cada renderizador que lo requiere.
La posicin del renderizador raz es 0,0 y su dimensin es la ventana grfica, es decir, la parte visible de la ventana del navegador.

Todos los renderizadores incluyen un mt odo de "diseo" o de "reflujo" y cada uno act iva el mt odo de diseo del element o secundario al que se debe aplicar el diseo.

Sist ema de bit de modificacin (dirt y bit )

Para no iniciar un proceso de diseo complet o con cada pequea modificacin, el navegador ut iliza un sist ema de bit de modificacin (dirt y bit ). Cuando se aade o se modifica un renderizador , t ant o el propio renderizador como su element o secundario se marcan con el indicador
PDFmyURL.com

bit ). Cuando se aade o se modifica un renderizador , t ant o el propio renderizador como su element o secundario se marcan con el indicador "dirt y", lo que significa que se deben somet er a un proceso de diseo. Exist en dos indicadores: "dirt y" y "children are dirt y". El indicador "children are dirt y" especifica que, aunque el renderizador no haya sufrido cambios, al menos uno de sus element os secundarios necesit a somet erse a un proceso de diseo.

Diseo global e increment al

El proceso de diseo se puede act ivar en t odo el rbol de renderizacin, lo que se conoce como diseo "global". A cont inuacin se indican algunos mot ivos por los que puede ser necesario un diseo global:
1. un cambio de estilo global que afecte a todos los renderizadores, como un cambio de tamao de fuente, 2. un cambio de tamao de la pantalla.

El diseo puede ser increment al, en cuyo caso solo se somet ern a un proceso de diseo los renderizadores marcados como "dirt y" (est e hecho puede provocar daos que pueden requerir procesos de diseo adicionales). Cuando los renderizadores est n marcados como "dirt y", se act iva (de forma asncrona) el diseo increment al (por ejemplo, cuando se aaden renderizadores nuevos al rbol de renderizacin despus de incluir cont enido adicional de la red en el rbol de DOM).

PDFmyURL.com

Figura 17: diseo incremental en el que solo se someten a un proceso de diseo los renderizadores modificados y sus elementos secundarios (3.6)

Diseo asncrono y sncrono

El diseo incremental se efecta de forma asncrona. Firefox almacena "comandos de reflujo" para los diseos incrementales y un programador activa la ejecucin en lote de estos comandos. WebKit tambin incluye un temporizador que ejecuta el diseo incremental (se recorre el rbol y se aplica diseo a los renderizadores marcados como "dirty"). Las secuencias de comandos que solicitan informacin de estilo, como "offsetHeight", pueden activar el diseo incremental de forma sncrona. El diseo global se suele activar de forma sncrona. A veces, el diseo se activa como una devolucin de llamada posterior a un diseo inicial debido a los cambios que sufren algunos atributos, como la posicin de desplazamiento.

Opt imizaciones
Cuando se activa un proceso de diseo por un "cambio de tamao" o por un cambio en la posicin del renderizador (no en su tamao), el tamao de los renderizadores se toma de una cach en lugar de recalcularse. En algunos casos, solo se modifica un subrbol, por lo que el proceso de diseo no se inicia desde la raz. Esto puede suceder en aquellos casos en los que el cambio es local y no afecta a los elementos que lo rodean, como el texto insertado en campos de texto (de lo contrario, cada tecla activara un diseo desde la raz) .

El proceso de diseo
El proceso de diseo suele seguir el pat rn que se indica a cont inuacin:
1. El renderizador principal determina su propio ancho. 2. El renderizador principal analiza los elementos secundarios y: 1. Sita el renderizador secundario (establece su valor x e y). 2. Activa la aplicacin del diseo del renderizador secundario en caso necesario (si est marcado como "dirty", si se trata de un diseo global o por alguna otra causa), 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 mrgenes y el relleno para establecer su propia altura, que utilizar el elemento principal del renderizador principal. 4. Establece el bit de modificacin (dirty bit) en "false".

Firefox ut iliza un objet o "st at e" (nsHTMLReflowSt at e) como parmet ro de diseo (conocido como "reflujo"). Ent re ot ros valores, el objet o de est ado incluye el ancho de los element os principales. El result ado del diseo de Firefox es un objet o "met rics" (nsHTMLReflowMet rics) que incluir la alt ura comput ada del renderizador .

Clculo del ancho

El ancho del renderizador se calcula ut ilizando el ancho del bloque cont enedor , la propiedad de est ilo "widt h" del renderizador , los mrgenes
PDFmyURL.com

y los bordes. Ut ilicemos para nuest ro ejemplo el siguient e element o "div":

<div style="width:30%"/> WebKit calculara su ancho de la siguiente forma (clase "RenderBox", mtodo "calcWidth"):

El ancho del cont enedor es el valor mximo de la propiedad "availableWidt h" de los cont enedores y 0. En est e caso, la propiedad "availableWidt h" es la propiedad "cont ent Widt h", que se calcula as: client Widt h() - paddingLeft () - paddingRight () Las propiedades "client Widt h" y "client Height " represent an el int erior de un objet o, excluyendo el borde y la barra de desplazamient o. El ancho de los element os es el at ribut o de est ilo "widt h", que se calcula como un valor absolut o comput ando el porcent aje del ancho del cont enedor . A cont inuacin, se aaden el relleno y los bordes horizont ales.
Hasta ahora, hemos calculado el "ancho preferente". Ahora vamos a calcular los anchos mnimo y mximo. Si el ancho preferente es superior al ancho mximo, se utiliza el ancho mximo. Si, por el contrario, es inferior al ancho mnimo (la unidad indivisible ms pequea), se utiliza el ancho mnimo.

Los valores se almacenan en cach en caso de que se necesit e act ivar un proceso de diseo sin que vare el ancho.

Salt o de lnea
El salt o de lnea se produce cuando un renderizador decide que debe int errumpirse en mit ad del diseo. Se det iene y comunica el salt o al renderizador principal. El renderizador principal crea renderizadores adicionales y act iva sus procesos de diseo. Chapt er 6

Pintura
En la fase de pint ura, se recorre el rbol de renderizacin y se act iva el mt odo de "pint ura" de los renderizadores para que se muest re su cont enido en la pant alla. En la fase de pint ura, se ut iliza el component e de infraest ruct ura de la int erfaz.
PDFmyURL.com

Global e increment al
Al igual que ocurre en la fase de diseo, la pintura tambin puede ser un proceso global (se pinta el rbol de renderizacin completo) 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 rectngulo correspondiente en la pantalla. Esto hace que el sistema operativo considere esta regin como modificada y que genere un evento de "pintura". El sistema operativo fusiona ingeniosamente varias regiones en una. En Chrome, esta operacin resulta ms complicada, ya que el renderizador se encuentra en un proceso diferente al proceso principal. Chrome simula el comportamiento del sistema operativo hasta cierto punto. La presentacin escucha estos eventos y delega el mensaje en la raz de la renderizacin. Se recorre el rbol hasta llegar al renderizador correspondiente. En consecuencia, se vuelve a pintar el renderizador y, normalmente, sus elementos secundarios.

Orden del proceso de pint ura

Haz clic aqu para conocer el orden del proceso de pintura en CSS2. Es el orden en el que se apilan los elementos en los contextos de pila. Este orden influye en la pintura, ya que las pilas se pintan de atrs 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.

List a de visualizacin de Firefox

Firefox analiza el rbol de renderizacin y crea una lista de visualizacin para el rea rectangular pintada que incluye los renderizadores relevantes para el rea rectangular en el orden de pintura correcto (primero los fondos de los renderizadores, luego los bordes, etc.). De esta forma, si se quiere volver a pintar el rbol, solo se tendr que recorrer una vez (primero se pintan todos los fondos, despus todas las imgenes, a continuacin todos los bordes, etc.).

Para opt imizar el proceso, Firefox no aade element os que vayan a quedar ocult os, como los element os que quedan t ot alment e ocult os bajo ot ros element os opacos.

Almacenamient o de figuras rect angulares de WebKit

Antes de volver a iniciar un proceso de pintura, WebKit guarda el rectngulo antiguo como un mapa de bits. Posteriormente, solo pinta el rea diferencial existente entre los rectngulos nuevo y antiguo.

Chapt er 7

Cambios dinmicos
Los navegadores intentan ejecutar la menor cantidad posible de acciones cuando se produce un cambio. Por tanto, si se producen cambios en el color de un elemento, solo se volver a pintar ese elemento. Si se producen cambios en la posicin de un elemento, se volver a disear y a pintar ese elemento, sus elementos secundarios y, posiblemente, los elementos que estn a su mismo nivel. Si se aade un nodo DOM, se activar un
PDFmyURL.com

proceso de diseo y de nueva pintura del nodo. Si se producen cambios de mayor importancia, como el aumento del tamao de fuente del elemento "html", se invalidarn las cachs y se activar un nuevo proceso de diseo y de pintura del rbol completo.

Chapt er 8

Subprocesos del motor de renderizacin

El motor de renderizacin solo consta de un subproceso. Casi todas las operaciones, excepto las de red, se desarrollan en un nico subproceso. En Firefox y Safari, es el subproceso principal del navegador. En Chrome, es el subproceso principal del proceso de pestaa. Las operaciones de red se pueden realizar mediante varios subprocesos paralelos. El nmero de conexiones paralelas es limitado (normalmente, de dos a seis conexiones. Por ejemplo, Firefox 3 utiliza seis).

Bucle de event os
El subproceso principal del navegador es un bucle de eventos, que consiste en un bucle infinito que mantiene activo el proceso. Espera a que se inicien eventos (como los de diseo y pintura) y los procesa. Este es el cdigo de Firefox para el bucle de eventos principal: while (!mExiting) NS_ProcessNextEvent(thread);

Chapt er 9

Modelo de formato visual de CSS2

El element o canvas
De acuerdo con la especificacin de CSS2 , el t rmino canvas describe "el espacio en el que se represent a la est ruct ura de format o", es decir , el lugar en el que el navegador pint a el cont enido. Aunque el element o canvas es infinit o para cada dimensin del espacio, los navegadores eligen un ancho inicial en funcin de las dimensiones de la vent ana grfica. De acuerdo con las indicaciones de la pgina www.w3.org/TR/CSS2/zindex.ht ml , el element o canvas es t ransparent e si se incluye dent ro

de ot ro element o o t iene un color definido por el navegador si no se incluye en ningn element o.

M odelo de cajas de CSS

El modelo de cajas de CSS describe las cajas rect angulares que se generan para los element os del rbol del document o y que se disean de acuerdo con el modelo de format o visual. Cada caja const a de un rea de cont enido (por ejemplo, t ext o, una imagen, et c.) y de reas circundant es opcionales de margen, borde y relleno.
PDFmyURL.com

Figura 18: modelo de cajas de CSS2 Cada nodo genera ent re 0y n cajas de est e t ipo. Todos los element os t ienen una propiedad "display" que det ermina el t ipo de caja que se generar. Ejemplos:
block - generates a block box. inline - generates one or more inline boxes. none - no box is generated. Aunque el tipo de caja predeterminado es "inline", la hoja de estilo del navegador establece otros tipos predeterminados. Por ejemplo, el tipo de visualizacin predeterminado de un elemento "div" es "block". Puedes consultar un ejemplo de hoja de estilo predeterminada en la pgina www.w3.org/TR/CSS2/sample.html .

Esquema de posicionamient o
A cont inuacin se indican los t res t ipos de esquemas disponibles.
1. Flujo normal: el objeto se coloca en funcin del lugar que ocupa en el documento (esto significa que el lugar que ocupa en el rbol de
PDFmyURL.com

renderizacin es similar al lugar que ocupa en el rbol de DOM) y se disea de acuerdo con sus dimensiones y con el tipo de caja. 2. Flotante: el objeto se disea primero segn el flujo normal y, posteriormente, se mueve hacia la derecha o hacia la izquierda todo lo posible. 3. Posicionamiento absoluto: el objeto se coloca en el rbol de renderizacin de una forma diferente a la que se utiliza para colocarlo en el rbol de DOM.

La propiedad "posit ion" y el at ribut o "float " det erminan el esquema de posicionamient o. Si se ut ilizan "st at ic" y "relat ive", se genera un flujo normal. Si se ut ilizan "absolut e" y "fixed", se produce un posicionamient o absolut o.
Cuando el posicionamiento es esttico, no se define ninguna posicin, por lo que se utiliza el posicionamiento predeterminado. En otros esquemas, el autor especifica la posicin: arriba, abajo, izquierda, derecha.

Los siguient es valores det erminan el diseo de la caja: t ipo de caja, dimensiones de la caja, esquema de posicionamient o, informacin ext erna, como el t amao de las imgenes y el t amao de la pant alla.

Tipos de cajas
Caja de bloque: forma un bloque (t iene su propio rect ngulo en la vent ana del navegador).

Figura 19: caja de bloque

Caja int egrada: no t iene bloque propio, sino que se incluye en un bloque de cont encin.
PDFmyURL.com

Figura 20: cajas integradas

Las cajas de bloque se colocan en vert ical, una det rs de ot ra, mient ras que las cajas int egradas se dist ribuyen horizont alment e.

Figura 21: formato de cajas de bloque e integradas

PDFmyURL.com

Las cajas int egradas se colocan dent ro de lneas o "cajas de lnea". Cuando las cajas se alinean t omando como punt o de referencia su base, es decir , la part e inferior de un element o se alinea con ot ra caja t omando como referencia una part e diferent e a la inferior , las lneas t ienen como mnimo la misma alt ura que la caja ms alt a, aunque pueden ser ms alt as. En caso de que el ancho del cont enedor no sea suficient e, las cajas int egradas se colocan en diferent es lneas. Est o es lo que suele ocurrir en un prrafo.

Figura 22: lneas

Posicionamiento
Relat ivo
Posicionamient o relat ivo: el element o se coloca normalment e y, a cont inuacin, se mueve segn el diferencial correspondient e.

PDFmyURL.com

Figura 23: posicionamiento relativo

Flot ant e
Una caja flot ant e se desplaza a la izquierda o a la derecha de una lnea. Lo ms int eresant e de est e posicionamient o es que las dems cajas fluyen a su alrededor . A cont inuacin, se incluye un ejemplo con cdigo HTML:
<p> <img style="float:right" src="images/image.gif" width="100" height="100"> Lorem ipsum dolor sit amet, consectetuer... </p> La apariencia sera la siguiente:

PDFmyURL.com

Figura 24: caja flotante

Absolut o y fijo
El diseo se define con exact it ud independient ement e del flujo normal. El element o no part icipa en el flujo normal. Las dimensiones son relat ivas al cont enedor . En el posicionamient o fijo, el cont enedor es la vent ana grfica.

Figura 25: posicionamiento fijo

PDFmyURL.com

Not a: la caja fija no se mover aunque el usuario se desplace por el document o.

Representacin en capas
Las capas se especifican con la propiedad "z-index" de CSS. Represent a la t ercera dimensin de la caja, es decir , su posicin a lo largo del "eje z". Las cajas se dividen en pilas (denominadas "cont ext os de pila"). En cada pila, los element os que quedan debajo se pint an en primer lugar ,y los element os que quedan encima se colocan en la part e superior , ms cerca del usuario. En caso de superposicin, se ocult a el element o que queda debajo. Las pilas se ordenan segn la propiedad "z-index". Las cajas que t ienen la propiedad "z-index" forman una pila local. La vent ana grfica forma la pila ext erior . Ejemplo:
<style type="text/css"> div { position: absolute; left: 2in; top: 2in; } </style> <p> <div style="z-index: 3;background-color:red; width: 1in; height: 1in; "> </div> <div style="z-index: 1;background-color:green;width: 2in; height: 2in;"> </div> </p> Se obtendr el siguiente resultado:

PDFmyURL.com

Figura 26: posicionamiento fijo

Aunque el element o "div" rojo preceda al verde en el marcado y se pint e en primer lugar en un flujo normal, el valor de la propiedad "zindex" es superior , por lo que se encuent ra ms adelant ado en la pila de la caja raz. Chapt er 10

Recursos
1. Arquitectura del navegador 1. Grosskurth, Alan. A Reference Architecture for Web Browsers (pdf ) 2. Gupta, Vineet. How Browsers Work - Part 1 - Architecture 2. Anlisis 1. Aho, Sethi, Ullman, Compilers: Principles, Techniques, and Tools, tambin conocido como "The Dragon Book" (El libro del dragn), Addison-Wesley, 1986 2. Rick Jelliffe. The Bold and the Beautiful: two new drafts for HTML 5 3. Firefox 1. L. David Baron, Faster HTML and CSS: Layout Engine Internals for Web Developers 2. L. David Baron, Faster HTML and CSS: Layout Engine Internals for Web Developers (vdeo de Google Tech Talks) 3. L. David Baron, Mozilla's Layout Engine
PDFmyURL.com

4. L. David Baron, Mozilla Style System Documentation 5. Chris Waterson, Notes on HTML Reflow 6. Chris Waterson, Gecko Overview 7. Alexander Larsson, The life of an HTML HTTP request 4. WebKit 1. David Hyatt, Implementing CSS(part 1) 2. David Hyatt, An Overview of WebCore 3. David Hyatt, WebCore Rendering 4. David Hyatt, The FOUC Problem 5. Especificaciones de W3C 1. HTML 4.01 Specification 2. W3C HTML5 Specification 3. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification 6. Instrucciones de creacin de navegadores 1. Firefox: https://developer.mozilla.org/en/Build_Documentation 2. WebKit: http://webkit.org/building/build.html

Tali Garsiel

es una desarrolladora de Israel. Empez su andadura como desarrolladora web en el ao 2000 y se familiariz

con el "malfico" modelo de capas de Net scape. Al igual que Richard Feynmann, sent a fascinacin por descubrir cmo funcionaban las cosas, por lo que empez a invest igar los mecanismos de funcionamient o int erno de los navegadores y a document ar t odos sus descubrimient os. Tali t ambin ha publicado una pequea gua sobre rendimient o de aplicaciones client e .

Traducciones
Est a pgina se ha t raducido al japons dos veces! Cmo funcionan los navegadores: lo que hay det rs de los navegadores web act uales (ja) por @_kosei_ y WEB por @ikeike443 y @kiyot o01 . Gracias a t odos!

PDFmyURL.com

Salvo dis po s ic i n en c o ntra, el c o ntenido de es ta pgina es t s ujeto a la lic enc ia Rec o no c imiento 3.0 de Creative Co mmo ns y lo s ejemplo s de c digo a la lic enc ia Apac he 2.0.

ndice

PDFmyURL.com

ndice Traducciones

PDFmyURL.com