Cómo Funcionan Los Navegadores - Lo Que Hay Detrás de Los Navegadores Web Actuales - HTML5 Rocks

25/3/2015
Cmofuncionanlosnavegadores:loquehaydetrsdelosnavegadoreswebactualesHTML5Rocks
Cmo funcionan los navegadores: lo que hay

detrs de los navegadores web actuales
ByTaliGarsielandPaulIrish
Publicacin:agosto5th,2011
Comments:132
Prlogo
EstecompletomanualsobrelasoperacionesinternasdeWebKityGeckoesel
resultadodelasextensasinvestigacionesrealizadasporladesarrolladoraisraelTali
Garsiel.Durantevariosaoshaestadorevisandotodalainformacinpublicada
sobrelascaractersticasinternasdelosnavegadoresweb(consultalaseccin
Recursos) yhapasadomuchotiempoleyendosucdigofuente.Taliescribilo
siguiente:
"EnlosaosenlosqueInternetExploreracaparabael90%delmercado,el
navegadorsepodaconsiderarpocomsque"cajanegra",peroahoraquelos
navegadoresdecdigoabiertodominanmsdelamitaddelmercado,esun
buenmomentoparaecharunvistazoalinteriordelosnavegadoresyverloque
esconden.Bueno,loqueescondenmillonesdelneasdecdigoenC++..."
Talihapublicadosuinvestigacinensusitioweb,perocomosabamosquese
merecaunpblicomsamplio,lohemospublicadoaqutambintrashaceralgunas
modificaciones.
Comodesarrolladoraweb,conocerlascaractersticasinternasdelas
operacionesdelosnavegadoressirveparatomarmejoresdecisionesypara
conocerlosmotivosquejustificanlasprcticasdedesarrollorecomendadas.
Aunquesetratadeundocumentobastanteextenso,terecomendamosque
dediquesunpocodetutiempoaexaminarlo.Tenporseguroquenotearrepentirs.
PaulIrish,RelacionescondesarrolladoresdeChrome
http://www.html5rocks.com/es/tutorials/internals/howbrowserswork/
1/61
25/3/2015
Introduccin
Losnavegadoressonprobablementeelsoftwaremsutilizadodetodos.Eneste
manualseexplicasufuncionamientointerno.Veremosquocurrecuandoescribes
google.comenlabarradedireccioneshastaquelapginadeGoogleapareceenla
pantalla.
ndice
1. Introduccin
1. Losnavegadoresdelosquehablaremos
2. Lafuncinprincipaldeunnavegador
3. Componentesprincipalesdelnavegador
2. Elmotorderenderizacin
1. Motoresderenderizacin
2. Elflujoprincipal
3. Ejemplosdelflujoprincipal
3. AnlisisyconstruccindelrboldeDOM
1. Anlisis(general)
1.
2.
3.
4.
5.
6.
7.
Gramticas
Analizador:combinacindeanalizadoreslxicos
Traduccin
Ejemplodeanlisis
Definicionesformalesdevocabularioysintaxis
Tiposdeanalizadores
Cmogeneraranalizadoresautomticamente
2. AnalizadordeHTML
1.
2.
3.
4.
5.
6.
7.
8.
9.
DefinicindegramticaHTML
Noesunagramticalibredecontexto
DTDdeHTML
DOM
Elalgoritmodeanlisis
Elalgoritmodetokenizacin
Algoritmodeconstruccinderbol
Accionesalfinalizarelanlisis
Toleranciaaerroresdelosnavegadores
2/61
25/3/2015
3. AnlisisdeCSS
1. AnalizadordeCSSdeWebKit
4. Ordendeprocesamientodesecuenciasdecomandosyhojasdeestilo
1. Secuenciasdecomandos
2. Anlisisespeculativo
3. Hojasdeestilo
4. Construccindelrbolderenderizacin
1. RelacindelrbolderenderizacinconelrboldeDOM
2. Elflujodeconstruccindelrbol
3. Computacindeestilos
1. Datosdeestilocompartidos
2. rboldereglasdeFirefox
1. Divisinenestructuras
2. Cmocomputarloscontextosdeestiloconelrboldereglas
3. Cmomanipularlasreglasparaobtenercoincidenciasfcilmente
4. Cmoaplicarlasreglasenelordendecascadacorrecto
1. Ordenencascadadelahojadeestilo
2. Especificidad
3. Cmoordenarlasreglas
4. Procesogradual
5. Diseo
1.
2.
3.
4.
5.
6.
7.
Sistemadebitdemodifiacin(dirtybit)
Diseoglobaleincremental
Diseoasncronoysncrono
Optimizaciones
Elprocesodediseo
Clculodelancho
Saltodelnea
6. Pintura
1.
2.
3.
4.
Globaleincremental
Ordendelprocesodepintura
ListadevisualizacindeFirefox
AlmacenamientodefigurasrectangularesdeWebKit
7. Cambiosdinmicos
8. Subprocesosdelmotorderenderizacin
3/61
25/3/2015
1. Bucledeeventos
9. ModelodeformatovisualdeCSS2
1.
2.
3.
4.
5.
Elelementocanvas
ModelodecajasdeCSS
Esquemadeposicionamiento
Tiposdecajas
Posicionamiento
1. Relativo
2. Flotante
3. Absolutoyfijo
6. Representacinencapas
10. Recursos
Los navegadores de los que hablaremos

Enlaactualidadseutilizanprincipalmentecinconavegadores:InternetExplorer,
Firefox,Safari,ChromeyOpera.Losejemplosdeestedocumentoserefierena
navegadoresdecdigoabierto,comoFirefox,ChromeySafari(esteltimoesen
partedecdigoabierto).SegnlasestadsticassobrenavegadoresdeStatCounter,
actualmente(agostode2011)elusoconjuntodeFirefox,SafariyChrome
representael60%.Portanto,enestosmomentoslosnavegadoresdecdigoabierto
constituyenunaparteimportantedelmercadodelosnavegadores.
La funcin principal de un navegador

Lafuncinprincipaldeunnavegadoressolicitaralservidorlosrecursoswebque
elijaelusuarioymostrarlosenunaventana.Elrecursosueleserundocumento
HTML,perotambinpuedeserunarchivoPDF,unaimagenounobjetodeotrotipo.
ElusuarioespecificalaubicacindelrecursomedianteelusodeunaURI(siglasde
UniformResourceIdentifier,identificadoruniformederecurso).
LaformaenlaqueelnavegadorinterpretaymuestralosarchivosHTMLse
determinaenlasespecificacionesdeCSSyHTML.Estasespecificacioneslas
estableceelconsorcioW3C(WorldWideWebConsortium),queeslaorganizacin
deestndaresdeInternet.
Duranteaos,losnavegadorescumplansolounapartedelasespecificacionesy
desarrollabansuspropiasextensiones.Estoprovocgravesproblemasde
compatibilidadparaloscreadoresdecontenidoweb.Enlaactualidad,lamayorade
4/61
25/3/2015
losnavegadorescumplenlasespecificacionesenmayoromenorgrado.
Lasinterfacesdeusuariodelosdistintosnavegadorestienenmuchoselementosen
comn.Estossonalgunosdeloselementoscomunesdelasinterfacesdeusuario:
unabarradedireccionesdondeinsertarlasURI,
botonesdeavanceyretroceso,
opcionesdemarcadores,
unbotnparadetenerlacargadelosdocumentosactualesyotroparavolver
acargarlos,
unbotndeinicioquepermitevolveralapginadeinicio.
Estascoincidenciasresultanextraas,yaquelainterfazdeusuariodelos
navegadoresnoseincluyeenningunadelasespecificacionesformales,sinoque
procededelaexperienciaacumuladaalolargodelosaosydeloselementosque
losnavegadoreshanimitadounosdeotros.LaespecificacindeHTML5nodefine
loselementosquedebeincluirlainterfazdeusuariodelosnavegadores,pero
muestraalgunoselementoscomunes.Entreestoselementosseencuentranlabarra
dedirecciones,labarradeestadoylabarradeherramientas.Existen,porsupuesto,
caractersticasnicasdecadanavegador,comoeladministradordedescargasde
Firefox.
Componentes principales del navegador

Acontinuacinseespecificanloscomponentesprincipalesdeunnavegador(1.1).
1. Interfazdeusuario:incluyelabarradedirecciones,elbotnde
avance/retroceso,elmendemarcadores,etc.(engeneral,todaslaspartes
visiblesdelnavegador,exceptolaventanaprincipaldondesemuestrala
pginasolicitada).
2. Motordebsqueda:coordinalasaccionesentrelainterfazyelmotorde
renderizacin.
3. Motorderenderizacin:esresponsabledemostrarelcontenidosolicitado.
Porejemplo,sielcontenidosolicitadoesHTML,serelresponsablede
analizarelcdigoHTMLyCSSydemostrarelcontenidoanalizadoenla
pantalla.
4. Red:esresponsabledelasllamadasdered,comolassolicitudesHTTP.Tiene
unainterfazindependientedelaplataformayrealizaimplementacionesen
segundoplanoparacadaplataforma.
5/61
25/3/2015
5. Servidordelainterfaz:permitepresentarwidgetsbsicos,comoventanasy
cuadroscombinados.Muestraunainterfazgenricaquenoesespecficade
ningunaplataforma.Utilizamtodosdelainterfazdeusuariodelsistema
operativoensegundoplano.
6. IntrpretedeJavaScript:permiteanalizaryejecutarelcdigoJavaScript.
7. Almacenamientodedatos:esunacapadepersistencia.Elnavegador
necesitaguardartodotipodedatoseneldiscoduro(porejemplo,lascookies).
LanuevaespecificacindeHTML(HTML5)defineelconceptode"basede
datosweb",queconsisteenunacompleta(aunqueligera)basededatosdel
navegador.
Figura:componentesprincipalesdelnavegador
EsimportantedecirqueChrome,adiferenciadelamayoradelosnavegadores,
implementavariasinstanciasdelmotorderenderizacin,unaporcadapestaa.
Cadapestaarepresentaunprocesoindependiente.
El motor de renderizacin
Laresponsabilidaddelmotorderenderizacines"renderizar",esdecir,mostrarel
contenidosolicitadoenlapantalladelnavegador.
Deformapredeterminada,elmotorderenderizacinpuedemostrarimgenesy
6/61
25/3/2015
documentosHTMLyXML.Puedemostrarotrostiposmedianteelusode
complementos(oextensiones)porejemplo,puedemostrardocumentosPDF
medianteuncomplementocapazdeleerarchivosPDF.Sinembargo,eneste
captulonoscentraremosensuusoprincipal:mostrarimgenesycdigoHTMLcon
formatodefinidoconCSS.
Motores de renderizacin
Nuestrosnavegadoresdereferencia(Firefox,ChromeySafari)estnbasadosen
dosmotoresderenderizacin.FirefoxutilizaGecko,unmotorderenderizacin
propiodeMozilla.TantoSafaricomoChromeutilizanWebKit.
WebKitesunmotorderenderizacindecdigoabiertoqueempezsiendounmotor
delaplataformaLinuxyquefuemodificadoposteriormenteporAppleparahacerlo
compatibleconMacyWindows.Puedesobtenermsinformacinenwebkit.org.
El flujo principal
Elmotorderenderizacinempiezarecibiendoelcontenidodeldocumentosolicitado
desdelacapadered,normalmenteenfragmentosde8.000bytes.
Acontinuacin,elmotorderenderizacinrealizaesteflujobsico:
Figura:flujobsicodelmotorderenderizacin
ElmotorderenderizacinempiezaaanalizareldocumentoHTMLyconviertelas
etiquetasennodosDOMenunrboldenominado"rboldecontenido".Analizalos
datosdeestilo,tantoenlosarchivosCSSexternoscomoenloselementosdeestilo.
Losdatosdeestilo,juntoconlasinstruccionesvisualesdelcdigoHTML,seutilizan
paracrearotrorbol:elrbolderenderizacin.
Elrbolderenderizacincontienerectngulosconatributosvisuales,comoelcolor
ylasdimensiones.Losrectngulosestnorganizadosenelordenenelque
aparecernenlapantalla.
Unavezconstruidoelrbolderenderizacin,seiniciaunprocesode"diseo".Esto
significaqueacadanodoseleasignanlascoordenadasexactasdellugardela
7/61
25/3/2015
pantallaenelquedebeaparecer.Lasiguientefaseesladepintura,enlaquese
recorreelrbolderenderizacinysepintacadaunodelosnodosutilizandolacapa
deservidordelainterfazdeusuario.
Esimportantecomprenderquesetratadeunprocesogradual.Paramejorarla
experienciadelusuario,elmotorderenderizacinintentarmostrarelcontenidoen
pantallaloantesposible.NoesperaraqueseanaliceelcdigoHTMLpara
empezaracrearydisearelrbolderenderizacin.Seanalizarnysemostrarn
algunaspartesdelcontenido,mientrasquesesigueprocesandoelrestodel
contenidoquellegadelared.
Ejemplos del flujo principal
Figura:flujoprincipaldeWebKit
8/61
25/3/2015
Figura:flujoprincipaldelmotorderenderizacinGeckodeMozilla
(3.6)
Enlasfiguras3y4sepuedeverque,aunqueWebKityGeckoutilizanuna
terminologaligeramentediferente,elflujoesbsicamenteelmismo.
Geckodenominaalrboldeelementosformateadosvisualmente"rboldemarcos".
Cadaunodeloselementosesunmarco.WebKitutilizalostrminos"rbolde
renderizacin"y"objetosderenderizacin"enlugardelosanteriores.WebKitutiliza
eltrmino"diseo"paracolocarloselementos,mientrasqueGeckolodenomina
"reflujo".WebKitutilizaeltrmino"asociacin"paraconectarlosnodosDOMcon
informacinvisualparacrearelrbolderenderizacin.Unapequeadiferenciano
semnticaesqueGeckodisponedeunacapaextraentreelcdigoHTMLyelrbol
deDOM.Estacapasedenomina"depsitodecontenido"yestdedicadaala
creacindeelementosDOM.Vamosavercadaunadelaspartesdelflujo:
Anlisis (general)
Dadoqueelanlisisesunprocesomuyimportantedelmotordelrenderizacin,
vamosaverlodeunaformamsdetallada.Comencemosporunabreve
introduccinaesteproceso.
Analizarundocumentosignificatraducirloaunaestructuraquetengasentido,es
decir,algoqueelcdigopuedacomprenderyutilizar.Elresultadodelanlisissuele
serunrboldenodosquerepresentalaestructuradeldocumento.Esterbolse
denomina"rboldeanlisis"o"rboldesintaxis".
9/61
25/3/2015
Ejemplo:elanlisisdelaexpresin 2 + 3 - 1 podradarcomoresultadoeste
rbol:
Figura:nododerboldeexpresinmatemtica
Gramticas
Elanlisissebasaenlasreglasdesintaxisporlasqueserigeeldocumento,es
decir,ellenguajeoelformatoenelqueestescrito.Todoslosformatosquese
puedenanalizardebentenerunagramticadeterministaformadaporunvocabulario
yunasreglasdesintaxis.Estosedenominagramticalibredecontexto.Los
lenguajeshumanosnosondeestetipoy,portanto,nosepuedenanalizarcon
tcnicasdeanlisisconvencionales.
Analizador: combinacin de analizadores lxicos

Elprocesodeanlisissepuededividirendossubprocesos:anlisislxicoyanlisis
sintctico.
Elanlisislxicoeselprocesodedescomponerlosdatosdeentradaentokens.Los
tokenssonelvocabulariodellenguaje,unconjuntodebloquesdeconstruccin
vlidos.Enellenguajehumano,equivaldraatodaslaspalabrasqueaparecenenel
diccionariodeundeterminadoidioma.
Elanlisissintcticoeslaaplicacindelasreglassintcticasdellenguaje.
Losanalizadoresnormalmentedivideneltrabajoentredoscomponentes:el
analizadorlxico(avecesdenominado"tokenizador"),responsablede
descomponerlosdatosdeentradaentokensvlidos,yelanalizadornormal,
responsabledeconstruirelrboltrasanalizarlaestructuradeldocumentosegnlas
reglassintcticasdellenguaje.Elanalizadorlxicoescapazdeignorarcaracteres
irrelevantes,comoespaciosenblancoysaltosdelnea.
10/61
25/3/2015
Figura:deldocumentooriginalalrboldeanlisis
Elprocesodeanlisisesiterativo.Elanalizadornormalmentepidealanalizador
lxicounnuevotokeneintentabuscarcoincidenciasentreeltokenyunadelas
reglasdesintaxis.Siseencuentraunacoincidencia,seaadealrboldeanlisisun
nodocorrespondientealtokenyelanalizadorsolicitaotrotoken.
Sinocoincideconningunaregla,elanalizadoralmacenaeltokeninternamentey
siguesolicitandotokenshastaqueencuentraunareglaquecoincidecontodoslos
tokensalmacenadosinternamente.Sinoencuentraningunaregla,lanzauna
excepcin.Estosignificaqueeldocumentonoseconsideravlidoportenererrores
desintaxis.
Traduccin
Muchasveces,elrboldeanlisisnoeselproductofinal.Elanlisisseutiliza
frecuentementeenlatraduccin,esdecir,enlaconversindeldocumentode
entradaaotroformato.Unejemploseralacompilacin.Elcompilador,quecompila
uncdigofuenteencdigodemquina,enprimerlugarloconvierteenunrbolde
anlisisy,acontinuacin,traduceelrbolaundocumentodecdigodemquina.
11/61
25/3/2015
Figura:flujodecompilacin
Ejemplo de anlisis
Enlafigura5seobservaunrboldeanlisiscreadoapartirdeunaexpresin
matemtica.Intentemosdefinirunlenguajematemticosimpleyveamoselproceso
deanlisis.
Vocabulario:nuestrolenguajepuedeincluirnmerosenteros,elsignomsyelsigno
menos.
Sintaxis:
1. Losbloquesdeconstruccindelasintaxisdellenguajesonexpresiones,
trminosyoperaciones.
2. Nuestrolenguajepuedeincluircualquiercantidaddeexpresiones.
3. Unaexpresinestformadaporun"trmino"seguidodeuna"operacin"yde
otrotrmino.
4. Unaoperacinesuntokendesumaountokenderesta.
5. Untrminoesuntokendenmeroenteroounaexpresin.
Analicemoslaentrada 2 + 3 - 1 .
12/61
25/3/2015
Laprimerasubcadenaquecoincideconunareglaes 2 segnlaregla5,esun
trmino.Lasegundacoincidenciaes 2 + 3 ,quecoincideconlaterceraregla(un
trminoseguidodeunaoperacinydeotrotrmino).Lasiguientecoincidenciasolo
seutilizaralfinaldelaentrada. 2 + 3 - 1 esunaexpresinporqueyasabemos
que 2+3 esuntrmino,asquetenemosuntrminoseguidodeunaoperacinyde
otrotrmino. 2 + + nocoincideconningunaregla,porloquenoseraunaentrada
vlida.
Definiciones formales de vocabulario y sintaxis

Elvocabulariosesueleexpresarmedianteexpresionesregulares.
Porejemplo,nuestrolenguajesedefinirdelasiguienteforma:
INTEGER :0|[1-9][0-9]*
PLUS : +
MINUS: -
Comosepuedeobservar,losnmerosenterossedefinenmedianteunaexpresin
regular.
LasintaxisnormalmentesedefineenunformatodenominadonotacindeBackus
Naur(BNF).Nuestroidiomasedefinirdelasiguienteforma:
expression := term operation
operation := PLUS | MINUS
term := INTEGER | expression
term
Dijimosqueunlenguajesepuedeanalizarmedianteanalizadoresnormalessisu
gramticaesunagramticalibredecontexto.Unadefinicinintuitivadeuna
gramticalibredecontextoesunagramticaquesepuedeexpresarcompletamente
ennotacindeBackusNaur(BNF).Puedesconsultarunadefinicinformaleneste
artculodeWikipediasobrelasgramticaslibresdecontexto.
Tipos de analizadores
Existendostiposbsicosdeanalizadores:losdescendentesylosascendentes.
Utilizandounaexplicacinintuitiva,podramosdecirquelosanalizadores
13/61
25/3/2015
descendentescompruebanlaestructuradenivelsuperiordelasintaxiseintentan
buscarunacoincidencia,mientrasquelosanalizadoresascendentescomienzancon
losdatosdeentradaylosvantransformandogradualmentemediantelasreglas
sintcticasempezandoporelnivelmsbajohastaquesecumplenlasreglasde
nivelsuperior.
Veamoscmoanalizanelcontenidodeejemploestosdostiposdeanalizadores:
Unanalizadordescendenteempiezadesdelaregladenivelsuperior:identifica 2 +
3 comounaexpresin.Acontinuacin,identifica 2 + 3 - 1 comoexpresin(el
procesodeidentificarlaexpresinsedesarrollabuscandocoincidenciasconelresto
delasreglas,peroseempiezaporlaregladenivelsuperior).
Elanalizadorascendenteanalizalosdatosdeentradahastaqueencuentrauna
coincidenciaconunareglay,acontinuacin,sustituyelaentradacoincidenteconla
regla.Esteprocesocontinahastaqueseanalizantodoslosdatosdeentrada.Las
expresionesconcoincidenciasparcialessecolocanenlapiladelanalizador.
Pila
Entrada
2 + 3 - 1
trmino
+ 3 - 1
operacindeltrmino
3 - 1
expresin
- 1
operacindelaexpresin
expresin
Estetipodeanalizadorascendenteseconocecomoanalizadordedesplazamiento
reduccindebidoaquelosdatosdeentradasedesplazanhacialaderecha(imagina
unpunteroqueapuntaprimeroaliniciodelosdatosdeentradayacontinuacinse
desplazahacialaderecha)ygradualmentesereducensegnlasreglassintcticas.
Cmo generar analizadores automticamente

Existenherramientascapacesdegeneraranalizadoresautomticamente.Se
denominangeneradoresdeanalizadores.Estosgeneradorescrean
automticamenteunanalizadorfuncionalutilizandolagramticadellenguaje
(vocabularioyreglassintcticas)establecidaporeldesarrollador.Losgeneradores
deanalizadoressonmuytiles,yaque,paracrearunanalizador,esnecesario
disponerdeunprofundoconocimientodelprocesodeanlisis,ynoresultafcil
crearmanualmenteunanalizadoroptimizado.
14/61
25/3/2015
WebKitutilizadosgeneradoresdeanalizadoresmuyconocidos:Flex,paracrearun
analizadorlxico,yBison,paracrearunanalizadornormal(tambinseconocen
como"Lex"y"Yacc").LaentradadeFlexconsisteenunarchivocondefinicionesde
expresionesregularesdelostokens.LaentradadeBisonconsisteenlasreglas
sintcticasdellenguajeenformatoBNF.
Analizador de HTML
EltrabajodelanalizadordeHTMLesanalizarlasmarcasHTMLyorganizarlasenun
rboldeanlisis.
Definicin de gramtica HTML

Eslasintaxisyelvocabulariodefinidosenlasespecificacionescreadasporla
organizacinW3C.LaversinactualesHTML4yactualmenteseesttrabajandoen
HTML5.
No es una gramtica libre de contexto

Comoyavimosenlaintroduccinalanlisis,lasintaxisdelagramticasepuede
definirformalmentemedianteformatoscomoBNF.
Lamentablemente,notodoslostemassobreanalizadoresconvencionalesse
puedenaplicarallenguajeHTML(losheincluidoporqueseutilizarnenelanlisis
deCSSyJavaScript).EllenguajeHTMLnosepuededefinirfcilmentemediantela
gramticalibredecontextoquenecesitanlosanalizadores.
ExisteunformatoformalparadefinirellenguajeHTML:DTD(definicindetipode
documento)sinembargo,noesunagramticalibredecontexto.
Parecealgoextraoaprimeravista:ellenguajeHTMLesbastantesimilaralXML.
HayunagranvariedaddeanalizadoresdeXMLdisponibles.Existeunavariacin
XMLdellenguajeHTML,elXHTML,asque,culesladiferencia?
LadiferenciaradicaenqueellenguajeHTMLesms"permisivo",yaquepermite
omitirciertasetiquetasqueseaadendeformaimplcita,avecesseomiteel
principiooelfinaldelasetiquetas,etc.Enconjunto,esunasintaxis"flexible",en
oposicinalasintaxisrgidayexigentedellenguajeXML.
Estadiferenciaaparentementepequeaes,enrealidad,abismal.Porunlado,esta
eslaraznprincipalporlaqueelHTMLestanpopular:permiteerroresyfacilitalas
15/61
25/3/2015
cosasalosautoresdecontenidoweb.Porotrolado,hacequeresultedifcilescribir
unagramticaformal.Enresumen:ellenguajeHTMLnosepuedeanalizar
fcilmentemedianteanalizadoresconvencionales(porquenodisponedeuna
gramticalibredecontexto)nimedianteanalizadoresdeXML.
DTD DE HTML
LadefinicindeHTMLestenformatoDTD.Esteformatoseutilizaparadefinir
lenguajesdelafamiliaSGML.Contienedefinicionesdetodosloselementos
permitidos,desusatributosydesujerarqua.Comovimosantes,ladefinicinDTD
dellenguajeHTMLnoformaunagramticalibredecontexto.
ExistenalgunasvariacionesdeladefinicinDTD.Elmodoestrictoseajusta
nicamentealasespecificaciones,perootrosmodosadmitenelmarcadoutilizado
anteriormenteporlosnavegadores.Elobjetivoesmantenerlacompatibilidadconel
contenidomsantiguo.LadefinicinDTDestrictaactualseencuentraenla
siguientepgina:www.w3.org/TR/html4/strict.dtd
DOM
Elrboldesalida("rboldeanlisis")estformadoporelementosDOMynodosde
atributo.DOMsonlassiglasde"DocumentObjectModel"(modelodeobjetosdel
documento).EslapresentacindeobjetosdeldocumentoHTMLylainterfazdelos
elementosHTMLparaelmundoexterior,comoJavaScript.
LarazdelrboleselobjetoDocument.
ElmodeloDOMguardaunarelacincasideunoaunoconelmarcado.Veamosun
ejemplodemarcado:
<html>
<body>
<p>
Hello World
</p>
<div> <img src="example.png"/></div>
</body>
</html>
ElmarcadoanteriorsetraduciraenelsiguienterboldeDOM:
16/61
25/3/2015
Figura:rboldeDOMdelmarcadodeejemplo
AligualqueelHTML,laorganizacinW3ChaespecificadoelmodeloDOM.Puedes
consultarloenlapginawww.w3.org/DOM/DOMTR.Esunaespecificacingenrica
paralamanipulacindedocumentos.Unmduloespecficodescribeelementos
HTMLespecficos.PuedesconsultarlasdefinicionesHTMLenlapgina
www.w3.org/TR/2003/RECDOMLevel2HTML20030109/idldefinitions.html.
CuandodigoqueelrbolcontienenodosDOM,quierodecirqueestconstruidocon
elementosqueimplementanunadelasinterfacesDOM.Losnavegadoresutilizan
implementacionesconcretasquetienenotrosatributosqueelnavegadorutiliza
internamente.
El algoritmo de anlisis
Comovimosenlasseccionesanteriores,ellenguajeHTMLnosepuedeanalizar
mediantelosanalizadoresascendentesydescendentesnormales.
Lasrazonesson:
1. lanaturalezapermisivadellenguaje,
2. elhechodequelosnavegadorespresentenunatoleranciaaerrorestradicional
paraadmitircasosbienconocidosdeHTMLnovlido,
3. lanaturalezaiterativadelprocesodeanlisis.Normalmente,elcdigono
cambiaduranteelanlisis.Sinembargo,enelcasodelcdigoHTML,las
etiquetasdesecuenciasdecomandosquecontienendocument.write
puedenaadirtokensadicionales,porloqueelprocesodeanlisisllegaa
modificarlosdatosdeentrada.
Alnopoderutilizarlastcnicasdeanlisisnormales,losnavegadorescrean
17/61
25/3/2015
analizadorespersonalizadosparaanalizarelcdigoHTML.
Elalgoritmodeanlisissedescribedeformadetalladaenlaespecificacinde
HTML5.Elalgoritmopresentadosfases:latokenizacinylaconstruccindelrbol.
Latokenizacineselanlisislxico,esdecir,elanlisisylaconversinentokens
delosdatosdeentrada.EntrelostokensHTMLseencuentranlasetiquetas
iniciales,lasetiquetasfinalesylosvaloresdeatributos.
Eltokenizadorreconoceeltoken,loenvaalconstructordelrbolyconsumeel
siguientecarcterparareconocerelsiguientetoken,yassucesivamentehasta
llegaralfinaldelosdatos.
Figura:flujodeanlisisdeHTML(tomadodelaespecificacinde
HTML5)
El algoritmo de tokenizacin
ElalgoritmoproduceuntokenHTML.Elalgoritmoseexpresacomounamquinade
estado.Cadaestadoconsumeunoovarioscaracteresdelflujodeentraday
actualizaelsiguienteestadodeacuerdoconesoscaracteres.Ladecisinest
influenciadaporelestadodetokenizacinactualyporelestadodeconstruccindel
rbol.Estosignificaqueelmismocarcterconsumidoproducirresultados
18/61
25/3/2015
diferentesparaelsiguienteestadocorrectoenfuncindelestadoactual.El
algoritmoesdemasiadocomplejoparadescribirloensutotalidad,asqueveremos
algunosejemplossencillosquenosayudarnacomprenderelprincipio.
EjemplobsicodetokenizacindelsiguientecdigoHTML:
<html>
<body>
Hello world
</body>
</html>
Elestadoinicialeselde"estadodedatos".Cuandoseencuentraelcarcter<,el
estadocambiaaestadodeetiquetaabierta.Alconsumiruncarctera-z,secrea
elestado"tokendeetiquetainicial"yelestadocambiaaestadodenombrede
etiqueta.Esteestadosemantienehastaqueseconsumeelcarcter>.Todoslos
caracteresseaadenalnombredelnuevotoken.Ennuestrocaso,elnuevotoken
esuntokenhtml.
Alllegaralaetiqueta>,seemiteeltokenactualyelestadocambiaaestadode
datos.Sesiguenlosmismospasosparalaetiqueta<body>.Hastaahora,sehan
emitidolasetiquetashtmlybody.Ahoravolvemosalestadodedatos.Alconsumir
elcarcterHdeHello world,secreayseemiteuntokendecarcter,yas
sucesivamentehastallegaralcarcter<de</body>.Seemiteuntokendecarcter
porcadaunodeloscaracteresdeHello world.
Ahoravolvemosalestadodeetiquetaabierta.Alconsumirlasiguienteentrada/,
secreauntoken de etiqueta finalysepasaalestadodenombrede
etiqueta.Denuevo,elestadosemantienehastallegara>.Acontinuacin,seemite
eltokendelanuevaetiquetaysevuelvealestadodedatos.Laentrada</html>
setratarcomoelcasoanterior.
19/61
25/3/2015
Figura:tokenizacindelaentradadeejemplo
Algoritmo de construccin de rbol

Cuandosecreaunanalizador,secreaelobjeto"Document".Durantelafasede
construccin,semodificaelrboldeDOMqueincluyeelobjeto"Document"ensu
razyseaadenelementos.Elconstructordelrbolprocesacadanodoemitidopor
eltokenizador.Porcadatoken,laespecificacindefinequelementosdeDOMson
relevantesyculessedebencrearparaestetoken.Ademsdeaadirsealrbolde
DOM,elelementoseaadeaunapiladeelementosabiertos.Estapilapermite
corregirincidenciasdeanidacinydeetiquetasnocerradas.Elalgoritmotambinse
describecomounamquinadeestado.Losestadossedenominan"modosde
insercin".
Veamosculseraelprocesodeconstruccindelrbolparalosdatosdeentrada
delejemplo:
<html>
<body>
Hello world
</body>
</html>
20/61
25/3/2015
Laentradaalafasedeconstruccindelrbolesunasecuenciadetokensdelafase
detokenizacin.Elprimermodoesel"modoinicial".Siserecibeeltokenhtml,se
pasaralmodo"previoahtml"ysevolveraprocesareltokenenesemodo.Esto
harqueelelemento"HTMLHtmlElement"secreeyseaadaalobjetoraz
"Document".
Elestadocambiara"antesdelencabezado".Recibimoseltoken"body".Se
crearimplcitamenteunelemento"HTMLHeadElement",aunquenotengamos
ningntoken"head",yeseelementoseaadiralrbol.
Ahorapasamosalmodo"enelencabezado"y,acontinuacin,almodo"despus
delencabezado".Eltokendelcuerposevuelveaprocesar,secreayseinsertaun
elemento"HTMLBodyElement"y,porltimo,elmodopasaa"enelcuerpo".
Acontinuacin,serecibenlostokensdeloscaracteresdelacadena"Helloworld".
Elprimeroharquesecreeyseinserteelnodo"Text",alqueseaadirelrestode
caracteres.
Larecepcindeltokendefinalizacindelcuerpoprovocarunatransferenciaal
modo"despusdelcuerpo".Acontinuacin,serecibirlaetiquetaHTMLfinal,que
harquesepasealmododespusdelcuerpo.Cuandoserecibaelfinaldeltoken
delarchivo,alanlisisfinalizar.
21/61
25/3/2015
Figura:construccinderboldelcdigoHTMLdeejemplo
Acciones al finalizar el anlisis

Enestafase,elnavegadormarcareldocumentocomointeractivoyempezara
22/61
25/3/2015
analizarlassecuenciasdecomandosqueseencuentrenenmodo"aplazado",es
decir,aquellasquesedebenejecutarunavezquesehaanalizadoeldocumento.A
continuacin,elestadodeldocumentoseestablecercomo"completado"yse
activaruneventode"carga".
Sepuedenverlosalgoritmoscompletosparatokenizacinylaconstruccindel
rbolenlaespecificacindeHTML5.
Tolerancia a errores de los navegadores

Nuncaseobtieneunerrorpor"sintaxisnovlida"enunapginaHTML.Los
navegadorescorrigenelcontenidonovlidoysiguen.
TomemosestecdigoHTMLcomoejemplo:
<html>
<mytag>
</mytag>
<div>
<p>
</div>
Really lousy HTML
</p>
</html>
Hedebidodeinfringirunmillndereglas("mytag"noesunaetiquetaestndar,los
elementos"p"y"div"estnmalanidados,etc.),peroelnavegadorsigue
mostrndolocorrectamenteynomuestraningnerror.Porlotanto,unagranparte
delcdigodelanalizadorcorrigeloserroresdelautordecontenidoHTML.
Lagestindeerroresesbastanteconsistenteenlosnavegadores,peroloms
increbleesquenoformapartedelaespecificacinactualdeHTML.Aligualquelos
marcadoresylosbotonesdeavanceyretroceso,esalgoquesehaido
desarrollandoalolargodelosaos.HayalgunasconstruccionesHTMLconocidas
quenosonvlidasyqueserepitenenmuchossitios.Losnavegadoresintentan
corregirlasdeacuerdoconotrosnavegadores.
Encambio,enlaespecificacindeHTML5ssedefinenalgunosdeestosrequisitos.
WebKitloresumeenelcomentarioqueseencuentraalprincipiodelaclasede
analizadordeHTML.
23/61
25/3/2015
Elanalizadoranalizalaentradatokenizadaylaconvierteeneldocumento,lo
quecreaelrboldeldocumento.Sieldocumentoestbienconstruido,el
anlisisresultasencillo.
Lamentablemente,debemostratarconmuchosdocumentosHTMLquenoestn
bienconstruidos,porloqueelanalizadordebesertoleranteconestoserrores.
Sedebetenercuidado,comomnimo,conlossiguienteserrores:
1. Elelementoquesedebeaadirestprohibidoexplcitamenteenalguna
etiquetaexterna.Enestecaso,debemoscerrartodaslasetiquetashasta
llegaralaqueprohbeelelementoyaadirloacontinuacin.
2. Noestpermitidoaadirelelementodirectamente.Esposiblequeelautor
deldocumentohayaolvidadoincluirunaetiquetaenmedio(oquela
etiquetaseaopcional).Estepodraserelcasodeestasetiquetas:HTML
HEADBODYTBODYTRTDLI(heolvidadoalguna?).
3. Sequiereaadirunelementodebloquedentrodeunelementointegrado.
Hayquecerrartodosloselementosintegradoshastallegaralsiguiente
elementodebloquesuperior.
4. Siestonofunciona,sedebencerrarelementoshastaquesepuedaaadir
elelementooignorarlaetiqueta.
VeamosalgunosejemplosdetoleranciaaerroresdeWebKit:
</br> en lugar de <br>

Algunossitiosutilizan</br>enlugarde<br>.ParapodersercompatibleconInternet
ExploreryFirefox,WebKittratalaetiquetacomosifuera<br>.
Cdigo:
if (t->isCloseTag(brTag) && m_document->inCompatMode()) {
reportError(MalformedBRError);
t->beginTag = true;
}
Nota:loserroressegestionandeformainterna,esdecir,nosemuestranalusuario.
Tabla perdida
24/61
25/3/2015
Unatablaperdidaesunatablaincluidaenelcontenidodeotratabla,peronoenuna
celda.
Ejemplo:
<table>
<table>
<tr><td>inner table</td></tr>
</table>
<tr><td>outer table</td></tr>
</table>
WebKitcambiarlajerarquadedostablassecundarias:
<table>
<tr><td>outer table</td></tr>
</table>
<table>
<tr><td>inner table</td></tr>
</table>
Cdigo:
if (m_inStrayTableContent && localName == tableTag)
popBlock(tableTag);
WebKitutilizaunapilaparaelcontenidodelelementoactualysacalatablainterna
delapiladelatablaexterna.Lastablasseencontrarnenelmismoniveldela
jerarqua.
Elementos de un formulario anidado

Sielusuarioincluyeunformulariodentrodeotro,elsegundoseignorar.
Cdigo:
if (!m_currentFormElement) {
m_currentFormElement = new HTMLFormElement(formTag,
m_document);
}
25/61
25/3/2015
Jerarqua de etiquetas demasiado profunda

Elcomentariohablaporssolo.
www.liceo.edu.mxesunejemplodeunsitioconunniveldeanidamientode
unas1.500etiquetas,todasellasprocedentesdeunaseriedeetiquetas<b>s.
Nosepermiteutilizarmsde20etiquetasanidadasdelmismotipo.Apartirde
esenmero,seignorantodas.
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;
}
Etiquetas finales de cuerpo o HTML colocadas incorrectamente

Denuevo,elcomentariohablaporssolo.
SetoleraqueHTMLserompatotalmente.Nuncacerramoslaetiquetadel
cuerpo(body),yaquealgunaspginaswebcometenelerrordecerrarlaantes
dequehayaacabadoeldocumento.Poreso,nosfijamosenlallamada"end()"
paracerrarelementos.
if (t->tagName == htmlTag || t->tagName == bodyTag )

return;
Asqueyasabis:amenosquequerisaparecercomoejemploenunfragmentode
cdigodetoleranciaaerroresdeWebKit,escribidelcdigoHTMLcorrectamente.
26/61
25/3/2015
Anlisis de CSS
Osacordisdelosconceptosdeanlisisquevimosenlaintroduccin?A
diferenciadellenguajeHTML,CSStieneunagramticalibredecontextoysepuede
analizarconlostiposdeanalizadoresdescritosenlaintroduccin.Dehecho,la
especificacindellenguajeCSSdefinesugramticasintcticaylxica.
Veamosalgunosejemplos:
Lagramticalxica(elvocabulario)sedefinemedianteexpresionesregularespara
cadatoken:
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"eslaabreviaturadeidentificador,comoelnombredeunaclase."name"esel
identificadordeunelemento(ysehacereferenciaalmediante"#").
LagramticasintcticasedescribeenBNF.
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
27/61
25/3/2015
: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*

[ IDENT | STRING ] S* ] ']'
;
pseudo
: ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ]
;
Explicacin:unconjuntodereglasesunaestructuracomolaquesemuestraa
continuacin.
div.error , a.error {
color:red;
font-weight:bold;
}
"div.error"y"a.error"sonselectores.Laparteentrellavescontienelasreglasquese
aplicanaesteconjuntodereglas.Estaestructurasedefineformalmenteenesta
definicin:
ruleset
: selector [ ',' S* selector ]*
'{' S* declaration [ ';' S* declaration ]* '}' S*
;
Estosignificaqueunconjuntodereglasesunselectorounnmeroopcionalde
selectoresseparadosporunacomayporespacios(Ssignificaespacioenblanco).
Unconjuntodereglascontieneunadeclaracinentrellavesu,opcionalmente,una
seriededeclaracionesseparadasporpuntoycoma."declaration"y"selector"se
definirnenlassiguientesdefinicionesdeBNF.
Analizador de CSS de WebKit

WebKitutilizageneradoresdeanalizadoresFlexyBisonparacrearanalizadores
automticamenteapartirdelosarchivosdegramticadeCSS.Comoyadijimosen
laintroduccinalosanalizadores,Bisoncreaunanalizadorascendentede
desplazamientoreduccin.Firefoxutilizaunanalizadordescendenteescrito
manualmente.Enamboscasos,losarchivosCSSseanalizanyseconviertenen
objetos"StyleSheet",cadaunodeloscualescontienereglasdeCSS.Losobjetosde
28/61
25/3/2015
regladeCSScontienenobjetosdedeclaracionesyselectores,ascomootros
objetosrelacionadosconlagramticadeCSS.
Figura:anlisisdeCSS
Orden de procesamiento de secuencias de comandos y

hojas de estilo
Secuencias de comandos
ElmodelodelaWebessncrono.Losautoresesperanquelassecuenciasde
comandosseanalicenyseejecuteninmediatamentecuandoelanalizadorllegaala
etiqueta<script>.Elanlisisdeldocumentosedetienehastaquelasecuenciade
comandosseejecuta.Lasecuenciadecomandosesexterna,porloqueanteses
necesariorecuperarelrecursodelared.Estaaccinserealizatambindeuna
formasncrona,esdecir,queelanlisissedetienehastaqueserecuperael
recurso.Estemodeloseutilizdurantemuchosaosyestincluidoenlas
especificacionesdeHTML4y5.Losautorespuedenmarcarlasecuenciade
comandoscomo"aplazada".Deesemodo,nosedetieneelanlisisdeldocumento
ylasecuenciaseejecutaunavezquesehacompletadoelanlisis.HTML5aade
unaopcinquepermitemarcarlasecuenciadecomandoscomoasncronaparaque
29/61
25/3/2015
seanaliceyseejecuteenunsubprocesodiferente.
Anlisis especulativo
TantoWebKityFirefoxutilizanestaoptimizacin.Alejecutarlassecuenciasde
comandos,otrosubprocesoanalizaelrestodeldocumento,buscaenlaredotros
recursosnecesariosyloscarga.Deestaforma,losrecursossepuedencargar
medianteconexionesparalelas,loquemejoralavelocidadgeneral.Nota:el
analizadorespeculativonomodificaelrboldeDOM(deesoseencargael
analizadorprincipal),soloanalizalasreferenciasarecursosexternos,como
secuenciasdecomandosexternas,hojasdeestiloeimgenes.
Hojas de estilo
Lashojasdeestilo,porotrolado,tienenunmodelodiferente.Conceptualmente,
pareceque,dadoquelashojasdeestilonomodificanelrboldeDOM,nohay
raznparaesperarlasydetenerelanlisisdeldocumento.Sinembargo,seproduce
unaincidenciacuandolassecuenciasdecomandossolicitaninformacindeestilo
durantelafasedeanlisisdeldocumento.Sielestiloannosehacargadoni
analizado,lasecuenciadecomandosobtendrrespuestasincorrectasy,
aparentemente,estocausarmuchascomplicaciones.Parecequesetratadeun
casoextremo,peroesbastantecomn.Firefoxbloqueatodaslassecuenciasde
comandossitodavaseestcargandoyanalizandounahojadeestilo.WebKit
bloquealassecuenciasdecomandossolocuandointentanaccederadeterminadas
propiedadesdeestiloquesepuedenverafectadasporlashojasdeestilo
descargadas.
Construccin del rbol de renderizacin

MientrasseestconstruyendoelrbolDOM,elnavegadorconstruyeotrorbol:el
rbolderenderizacin.Esterbolestformadoporelementosvisualesquese
muestranenelmismoordenenqueaparecern.Eslarepresentacinvisualdel
documento.Elpropsitodeesterbolespoderrepresentarelcontenidoenelorden
correcto.
Firefoxdenominaaloselementosdelrbolderenderizacin"marcos"(o"frames").
WebKitutilizaeltrmino"renderizador"u"objetoderenderizacin"(o"render").
Unrenderizadorescapazderepresentarseasmismoyasuselementos
secundarios.
30/61
25/3/2015
Laclase"RenderObject"deWebKit,laclasebsicadelosrenderizadores,tienela
siguientedefinicin:
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
}
Cadarenderizadorrepresentaunrearectangularquenormalmentesecorresponde
conlacajadeCSSdelnodo,segnsedescribeenlaespecificacindeCSS2.
Contieneinformacingeomtricacomoelancho,laalturaylaposicin.
Eltipodecajaseveafectadoporelatributodeestilo"display"relevanteparael
nodo(consultalaseccinComputacindeestilos).EsteeselcdigodeWebKitque
seutilizaparadecidirqutipoderenderizadorsedebecrearparaunnodoDOM,
segnelatributodevisualizacin:
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:
o = new (arena) RenderBlock(node);
break;
case LIST_ITEM:
o = new (arena) RenderListItem(node);
break;
31/61
25/3/2015
...
}
return o;
}
Eltipodeelementotambinsetieneencuenta.Porejemplo,lastablasylos
controlesdelosformulariostienenmarcosespeciales.
EnWebKit,siunelementoquierecrearunrenderizadorespecial,sobrescribeel
mtodocreateRenderer.Losrenderizadoresapuntanaobjetosdeestiloque
contienenlainformacinnogeomtrica.
Relacin del rbol de renderizacin con el rbol de DOM

LosrenderizadorescorrespondenaelementosDOM,perolarelacinnoesdeunoa
uno.LoselementosDOMnovisualesnoseinsertanenelrbolderenderizacin.Un
ejemploseraelelemento"head".Loselementoscuyoatributodevisualizacinse
haasignadoa"none"tampocoaparecenenelrbol(loselementosconelatributo
devisibilidad"hidden"saparecenenelrbol).
AlgunoselementosDOMcorrespondenavariosobjetosvisuales.Estossuelenser
elementosconunaestructuracomplejaquenosepuedendescribirenunsolo
rectngulo.Porejemplo,elelemento"select"tienetresrenderizadores:unoparael
readevisualizacin,otroparaelcuadrodelistadesplegableyotroparaelbotn.
Adems,cuandoeltextosedivideenvariaslneasporqueelanchonoessuficiente
paraunalnea,lasnuevaslneasseaadencomorenderizadoresadicionales.
OtroejemploconvariosrenderizadoresserauncdigoHTMLroto.Segnla
especificacindeCSS,unelementointegradodebecontenernicamenteelementos
debloqueoelementosintegrados.Sielcontenidoesmixto,secreanrenderizadores
debloquesannimosparaincluirloselementosintegrados.
AlgunosobjetosderenderizacincorrespondenaunnodoDOMdeunlugardel
rboldiferente.Loselementosflotantesyaquellosconposicinabsolutaquedan
fueradelflujo,enunlugardiferentedelrbolyasignadosalmarcoreal.Deberan
haberestadoenunmarcodemarcador.
32/61
25/3/2015
Figura:elrbolrenderizadoryelrboldeDOMcorrespondiente
(3.1)La"ventanagrfica"eselbloquecontenedorinicial.EnWebKit,
serelobjeto"RenderView".
El flujo de construccin del rbol

EnFirefox,lapresentacinseregistracomoundetectordeactualizacionesdeDOM.
LapresentacindelegalacreacindemarcosenFrameConstructoryel
constructorresuelveelestilo(consultalaseccinComputacindeestilos)ycreaun
marco.
EnWebKit,elprocesopararesolverelestiloycrearunrenderizadorsedenomina
"asociacin".CadanodoDOMdisponedeunmtodode"asociacin".Elprocesode
asociacinessncrono,esdecir,quelainsercindenodosenelrboldeDOM
activaelmtodode"asociacin"delnuevonodo.
Alprocesarlasetiquetas"html"y"body",seconstruyelarazdelrbolde
renderizacin.Elobjetoderenderizacinrazsecorrespondeconloquela
especificacindeCSSdenomina"bloquecontenedor",esdecir,elbloquesuperior
quecontieneelrestodelosbloques.Susdimensionessecorrespondenconla
ventanagrfica,esdecir,conlasdimensionesdelreadevisualizacindela
ventanadelnavegador.FirefoxlodenominaViewPortFrameyWebKitRenderView.
33/61
25/3/2015
Esteeselobjetoderenderizacinalqueapuntaeldocumento.Elrestodelrbolse
construyecomounainsercindenodosDOM.
ConsultalaespecificacindeCSS2enelmodelodeprocesamiento.
Computacin de estilos
Paracrearelrbolderenderizacin,esnecesariocalcularlaspropiedadesvisuales
decadaunodelosobjetosderenderizacin.Parahacerlo,hayquecalcularlas
propiedadesdeestilodecadaelemento.
Elestiloincluyehojasdeestilodevariosorgenes,elementosdeestilointegradosy
propiedadesvisualesenelcdigoHTML(comolapropiedad"bgcolor").Estas
ltimassetransformanenlaspropiedadesdeestilodeCSScorrespondientes.
Losorgenesdelashojasdeestilosonlashojasdeestilopredeterminadasdel
navegador,lasproporcionadasporelautordelapginaylasproporcionadasporel
usuariodelnavegador(losnavegadorespermitenalusuariodefinirsuestilofavorito.
EnFirefox,porejemplo,sepuedehacercolocandounahojadeestiloenlacarpeta
deperfilesdelnavegador).
Lacomputacindeestilosconllevaalgunasdificultades:
1. Alcontenerlasnumerosaspropiedadesdelosestilos,losdatosdeestilo
lleganaalcanzarunasdimensionesconsiderables,loquepuedeprovocarun
usoexcesivodememoria.
2. Labsquedadelasreglascoincidentesdecadaelementopuedeafectaral
rendimientosinoseoptimizaelproceso.Recorrerlalistacompletadereglas
decadaelementoparaencontrarcoincidenciasesunatareamuypesada.Los
selectorespuedentenerunaestructuracompleja,loquepuedehacerquese
empieceabuscarenunarutaqueaparentementeseabuena,peroque
finalmentenoseaasysedebaprobarconotraruta.
Pongamoscomoejemploesteselectorcomplejo:
div div div div{
...
}
Significaquelasreglasseaplicanaunelemento<div>queesel
34/61
25/3/2015
descendientedetreselementos"div".Supongamosquequierescomprobarsi
lareglaseaplicaaunelemento<div>determinado.Debesseleccionaruna
rutasuperiordelrbolparacomprobarlo.Esposiblequedebasascenderpor
todoelrboldenodossoloparaaveriguarquenicamenteexistendos
elementos"div"yquelareglanoseaplica.Acontinuacin,debesprobarcon
otrasrutasdelrbol.
3. Paraaplicarlasreglas,esnecesarioutilizarreglasencascadabastante
complejasquedefinenlajerarquadelasreglas.
Veamoscmoseenfrentanlosnavegadoresaestasdificultades:
Datos de estilo compartidos

LosnodosdeWebKithacenreferencialosobjetosdeestilo(RenderStyle).Los
nodospuedencompartirestosobjetosenalgunascircunstancias.Losnodossondel
mismonivel,yapertenezcanalmismonodoprincipaloaotronododelmismonivel
queeste,y:
1. Loselementosdebentenerelmismoestadoderatn(porejemplo,unono
puedeestaren":hover"yelotroenotroestado).
2. Ningunodeloselementosdebetenerunidentificador.
3. Losnombresdelasetiquetasdebencoincidir.
4. Losatributosdeclasedebencoincidir.
5. Elconjuntodeatributosasignadosdebeseridntico.
6. Losestadosdeenlacedebencoincidir.
7. Losestadosdeenfoquedebencoincidir.
8. Ningnelementosedebeverafectadoporselectoresdeatributos,esdecir,no
debepresentarningunacoincidenciaconningnselectorqueutiliceun
selectordeatributoenningunaposicindentrodelselector.
9. Nodebehaberningnatributodeestilointegradoenloselementos.
10. Nodebehaberningnselectordelmismonivelenuso.WebCoresimplemente
aplicauncambioglobalsidetectaunselectordelmismoniveleinhabilitala
opcindecompartirestilosentodoeldocumentocuandoestpresente.Esto
incluyeelselector+yselectorescomo":firstchild"y":lastchild".
rbol de reglas de Firefox

Firefoxcuentacondosrbolesadicionalesparaunacomputacindeestilosms
35/61
25/3/2015
sencilla:elrboldereglasyelrboldecontextosdeestilo.WebKittambincuenta
conobjetosdeestilo,peronosealmacenanenunrbolcomoelrboldecontextos
deestilo.SoloelnododeDOMindicaelestilopertinente.
Figura:rboldecontextosdeestilo(2.2)
Loscontextosdeestiloincluyenvaloresfinales.Paracomputarlosvalores,se
aplicantodaslasreglasconlasquesehayanencontradocoincidenciasenelorden
correctoyserealizanmanipulacionesquetransformanlosvaloreslgicosen
concretos.Porejemplo,sielvalorlgicoesunporcentajedelapantalla,se
calcularysetransformarenunidadesabsolutas.Laideadelrboldereglases
muyingeniosa,yaquepermitecompartirestosvaloresentrenodosparaevitarque
sevuelvanacomputar.Adems,ahorraespacio.
Todaslasreglasconlasqueseencuentraalgunacoincidenciasealmacenanenun
rbol.Losnodosinferioresdeunarutatienenmayorprioridad.Elrbolincluyetodas
lasrutasdelascoincidenciasquesehanencontradoparaunaregla.Lasreglasse
almacenanlentamente.Elrbolnosecomputaalprincipiodecadanodo,pero
siemprequesedebecomputarelestilodeunnodo,lasrutasseaadenalrbol.
Laideaesquelasrutasdelrbolsemuestrencomolaspalabrasdeunlexicn.
36/61
25/3/2015
Imaginemos,porejemplo,queyahemoscomputadoesterboldereglas:
Supongamosquenecesitamosencontrarcoincidenciasparareglasdeotros
elementosdelrboldecontenidoyobtenemoslassiguientesreglas(enelorden
correcto):BEI.Yatenamosestarutadelrbolporqueyahabamoscomputado
larutaABEIL,porloqueahoratendremosmenostrabajoquehacer.
Vamosacomprobarcmoguardaelrbolnuestrotrabajo.
Divisin en estructuras
Loscontextosdeestilosedividenenestructurasqueincluyeninformacindeestilo
deunaciertacategora,comoelbordeoelcolor.Todaslaspropiedadesdeun
estructurapuedenserheredadasonoheredadas.Laspropiedadesheredadasson
propiedadesque,amenosquelasdefinaelelemento,seheredandelelemento
principal.Laspropiedadesnoheredadas(denominadaspropiedades"reset")utilizan
losvalorespredeterminadosencasodequenosedefinan.
Elrbolguardaencachestructurascompletas(queincluyenlosvaloresfinales
computados)delrbol.Deesaforma,sielnodoinferiornoproporcionauna
definicinparaunaestructura,sepuedeutilizarunaestructuraguardadaencach
deunnodosuperior.
Cmo computar los contextos de estilo con el rbol de reglas

Cuandosecomputaelcontextodeestilodeunelementoespecfico,primerose
computaunarutadelrboldereglasoseutilizaunaexistente.Acontinuacin,se
aplicanlasreglasdelarutaparacompletarlasestructurasdelnuevocontextode
estilo.Empezamosporelnodoinferiordelaruta,esdecir,elnododemayor
37/61
25/3/2015
prioridad(normalmenteelselectormsespecfico),yrecorremoselrbolensentido
ascendentehastacompletarlaestructura.Siestenododereglasnoincluyeninguna
especificacinparalaestructura,podemosoptimizarloconsiderablemente(lamejor
formaesrecorrerelrbolensentidoascendentehastaencontrarunnodoque
incluyaunaespecificacincompletayapuntardespusaestenodo)ycompartirla
estructuracompleta.Graciasaestemtodoahorramosvaloresfinalesymemoria.
Siencontramosdefinicionesparciales,recorremoselrbolensentidoascendente
hastacompletarlaestructura.
Sinoencontramosdefinicionesparalaestructura,encasodequeestaseadetipo
"heredada",apuntamosalaestructuradelelementoprincipaldelrbolde
contextos.Enestecaso,tambinconseguimoscompartirlasestructuras.Sila
estructuraesdetipo"noheredada",seutilizarnlosvalorespredeterminados.
Sielnodomsespecficonoaadevalores,tendremosqueefectuarclculos
adicionalesparatransformarlosenvaloresreales.Posteriormente,almacenamosen
cachenelrbolelresultadodelnodoparaquesepuedautilizarcomoelemento
secundario.
Encasodequeunelementotengaunelementodesumismonivelqueapunteal
mismonododelrbol,amboselementospuedencompartirelcontextodeestilo
completo.
Veamosunejemplo.SupongamosquetenemoselsiguientecdigoHTML:
<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>
Ylassiguientesreglas:
38/61
25/3/2015
1.
2.
3.
4.
5.
6.
div {margin:5px;color:black}
.err {color:red}
.big {margin-top:3px}
div span {margin-bottom:4px}
#div1 {color:blue}
#div2 {color:green}
Parasimplificarlatarea,digamosquetenemosquecompletarsolodosestructuras:
laestructuradecolorylaestructurademargen.Laestructuradecolorsolocontiene
unmiembro,elcolor,mientrasquelaestructurademargencontieneloscuatro
lados.
Elrboldereglasqueseobtienetendrlasiguienteapariencia(losnodosse
marcanas:"nombredelnodo:nmerodelareglaalaqueapunta"):
Figura:rboldereglas
Elrboldecontextostendrlasiguienteapariencia(nombredelnodo:nodode
reglaalaqueapunta):
39/61
25/3/2015
Figura:rboldecontextos
SupongamosqueanalizamoselcdigoHTMLyobtenemoslasegundaetiqueta
<div>.Tendremosquecrearuncontextodeestiloparaelnodoycompletarsus
estructurasdeestilo.
Buscamoslasreglasquecoincidancon<div>ydescubrimosqueson1,2y6.Esto
significaqueyaexisteunarutadelrbolquepodemosutilizarparanuestro
elemento,porloquesolonecesitamosaadirotronodoparalaregla6(nodoFdel
rboldereglas).
Crearemosuncontextodeestiloyloincluiremosenelrboldecontextos.Elnuevo
contextodeestiloapuntaralnodoFdelrboldereglas.
Ahoranecesitamoscompletarlasestructurasdeestilo.Empezaremoscompletando
laestructurademargen.Comoelltimonododeregla(F)noseaadeala
estructurademargen,podemosascenderporelrbolhastaencontraruna
estructuraalmacenadaencachcomputadaenlainsercindeunnodoanteriory
utilizarla.EncontraremosestaestructuraenelnodoB,queeselnododenivelms
superiorqueespecificareglasdemargen.
Yatenemosunadefinicinparalaestructuradecolor,porloquenopodemosutilizar
unaestructuraalmacenadaencach.Comoelcolortieneunatributo,no
necesitamosascenderporelrbolparacompletarotrosatributos.Computamosel
valorfinal(convertimoslacadenaaRGB,etc.)yalmacenamosencacheneste
nodolaestructuracomputada.
Eltrabajorelacionadoconelelemento<span>esanmssencillo.Buscamoslas
40/61
25/3/2015
reglasquecoincidenconesteelementoyllegamosalaconclusindequelareglaa
laqueapuntaesG,comoelelemento"span"anterior.Comotenemoselementosdel
mismonivelqueapuntanalmismonodo,podemoscompartirelcontextodeestilo
completoyapuntarsoloalcontextodelelemento"span"anterior.
Enelcasodelasestructurasqueincluyenreglasheredadasdelelementoprincipal,
elprocesodealmacenamientoencachsellevaacaboenelrboldecontextos
(aunquelapropiedaddecolorsehereda,Firefoxtrataestapropiedadcomono
heredadaylaguardaencachenelrboldereglas).
Porejemplo,imaginemosqueaadimosreglasparalasfuentesdeunpargrafo:
p {font-family:Verdana;font size:10px;font-weight:bold}
Elelementodeprrafo,queesunelementosecundariodelelemento"div"delrbol
decontextos,podracompartirlamismaestructuradefuentequeelelemento
principal.Estecasosepodraaplicarsinoseespecificasenreglasdefuenteparael
prrafo.
EnWebKit,noexistenlosrbolesdereglas,porloquelasdeclaracionesque
coincidenserecorrencuatroveces.Enprimerlugar,seaplicanlaspropiedadesde
altaprioridaddemenorimportancia(estaspropiedadessedebenaplicarprimero
porquehayotrasquedependendeellas,como"display")acontinuacin,seaplican
laspropiedadesdealtaprioridaddemayorimportanciaposteriormente,las
propiedadesdeprioridadnormaldemenorimportanciay,porltimo,lasreglasde
prioridadnormaldemayorimportancia.Estosignificaquelaspropiedadesque
aparezcanvariasvecesseresolvernsegnelordendecascadacorrecto.Laltima
eslamsimportante.
Enresumen,compartirobjetosdeestilo(yaseaensutotalidadocompartiendo
solamentealgunasdesusestructuras)solucionalasincidencias1y3.Elrbolde
reglasdeFirefoxtambinayudaaaplicarlaspropiedadesenelordencorrecto.
Cmo manipular las reglas para obtener coincidencias

fcilmente
Acontinuacinsemuestranlasdistintasfuentesdereglasdelosmodificadoresde
estilo.
ReglasdeCSS,tantoenhojasdeestilointernascomoenelementosdeestilo:
41/61
25/3/2015
p {color:blue}
Atributosdeestilointegrados,comoelsiguiente:
<p style="color:blue" />
AtributosvisualesHTML(queseasignanareglasdeestilorelevantes):
<p bgcolor="blue" />
Lasdosltimasfuentescoincidenfcilmenteconelelemento,yaqueesteincluye
losatributosdeestilo,ylosatributosHTMLsepuedenasignarutilizandoelelemento
comoclave.
Comosecomentpreviamenteenlaincidencia2,buscarunacoincidenciaconla
regladeCSSpuederesultarbastantecomplicado.Pararesolverestadificultad,las
reglassemanipulanparafacilitarelacceso.
Despusdeanalizarlahojadeestilo,lasreglasseaadenaunodevariosmapas
hash,deacuerdoconelselector.ExistenmapasorganizadosporID,nombrede
claseynombredeetiqueta,yunmapageneralparatodoloquenosepuedeincluir
enestascategoras.SielselectoresunID,lareglaseaadiralmapadeIDsies
unaclase,seaadiralmapadeclase,etc.
Estamanipulacinfacilitaconsiderablementelatareadeasignacindereglas.No
hacefaltarevisarcadadeclaracin,podemosextraerlasreglasrelevantesparaun
elementodelosmapas.Estaoptimizacineliminamsdel95%delasreglas,porlo
quenisiquieraesnecesariotenerlasencuentaduranteelprocesodebsquedade
coincidencias(4.1).
Analicemoslasreglasdeestiloqueseincluyenacontinuacin:
p.error {color:red}
#messageDiv {height:50px}
div {margin:5px}
42/61
25/3/2015
Laprimerareglaseinsertarenelmapadeclase,lasegundaenelmapadeIDyla
terceraenelmapadeetiquetas.
ParaelsiguientefragmentodeHTML:
<p class="error">an error occurred </p>
<div id=" messageDiv">this is a message</div>
Enprimerlugar,intentaremosbuscarreglasparaelelemento"p".Elmapadeclase
incluirunaclave"error"dentrodelaqueseencuentralareglapara"p.error".El
elemento"div"tendrreglasrelevantesenelmapadeID(laclaveeselID)yel
mapadeetiqueta.Portanto,soloquedaaveriguarqureglasextradasdelasclaves
realmentecoinciden.
Porejemplo,silaregladelelemento"div"fueralasiguiente:
table div {margin:5px}
seextraeradelmapadeetiqueta,porquelaclaveeselselectorsituadomsala
derecha,peronocoincidiraconelelemento"div",quenocuentaconunantecesor
detabla.
TantoWebKitcomoFirefoxutilizanestamanipulacin.
Cmo aplicar las reglas en el orden de cascada correcto

Elobjetodeestilotienepropiedadesquesecorrespondenconcadaatributovisual
(todoslosatributosCSS,peromsgenricos).Siningunadelasreglasque
coincidendefinelapropiedad,algunaspropiedadessepuedenheredardelelemento
principaldelobjetodeestilo.Otraspropiedadestienenvalorespredeterminados.
Laincidenciaseproducecuandoexistemsdeunadefinicin,yesentonces
cuandosedebeutilizarelordenencascadapararesolverla.
Orden en cascada de la hoja de estilo

Unadeclaracindeunapropiedaddeestilopuedeaparecerenvariashojasdeestilo
yvariasvecesdentrodeunamismahoja.Poresemotivo,elordendeaplicacinde
lasreglastieneunagranimportancia.Esteordenseconocecomo"cascada".De
acuerdoconlasespecificacionesdeCSS2,elordenencascadaeselsiguiente(de
43/61
25/3/2015
menoramayor):
1. declaracionesdelnavegador,
2. declaracionesnormalesdelusuario,
3. declaracionesnormalesdelautor,
4. declaracionesimportantesdelautor,
5. declaracionesimportantesdelusuario.
Lasdeclaracionesdelnavegadorsonlasquetienenmenosimportanciaylasdel
usuariosolotienenprioridadsobrelasdelautorsiestnmarcadascomo
importantes.Lasdeclaracionesconelmismoordenseordenansegnla
especificidady,posteriormente,segnelordenenelquesehanespecificado.Los
atributosvisualesHTMLsetraducenenlasdeclaracionesCSScorrespondientes.
Setratancomoreglasdeautordeprioridadbaja.
Especificidad
LaespecificacindeCSS2definelaespecificidaddelselectorcomoseindicaa
continuacin:
"1"siladeclaracinesdeunatributo"style"enlugardeunareglaconun
selectorencasocontrario,"0"(=a),
nmerodeatributosdeIDdelselector(=b),
nmerodeotrosatributosypseudoclasesdelselector(=c),
nmerodenombresdeelementosydepseudoelementosdelselector(=d).
Laespecificidadseobtienealconcatenarloscuatronmerosabcd(enunsistema
denmerosdebaseamplia).
Labasenumricaquesedebeutilizareselnmeroderecuentomselevadode
unadelascategoras.
Porejemplo,sia=14,sepuedeutilizarunabasehexadecimal.Enelimprobable
casodequea=17,sedeberutilizarunabasenumricade17dgitos.Elltimo
casoseraeldeunselectorcomohtmlbodydivdivp...con17etiquetasenel
selector,peroestoesmuypocoprobable.
Algunosejemplos:
*
*/
{}
/* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0
44/61
25/3/2015
li
{}
*/
li:first-line {}
*/
ul li
{}
*/
ul ol+li
{}
*/
h1 + *[rel=up]{}
*/
ul ol li.red {}
*/
li.red.level {}
*/
#x34y
{}
*/
style=""
*/

Cmo ordenar las reglas

Despusdebuscarcoincidencias,lasreglasseordenansegnlasreglasde
cascada.WebKitutilizaelordenamientodeburbujaparalistaspequeasyel
ordenamientopormezclaparalistasgrandes.WebKitordenalasreglas
sobrescribiendoeloperador">"paralasreglas:
static bool operator >(CSSRuleData& r1, CSSRuleData& r2)
{
int spec1 = r1.selector()->specificity();
int spec2 = r2.selector()->specificity();
return (spec1 == spec2) : r1.position() > r2.position() :
spec1 > spec2;
}
Proceso gradual
WebKitutilizaunindicadorquemuestrasisehancargadotodaslashojasdeestilo
denivelsuperior(incluidaslasde@imports).Silashojasdeestilonosecarganpor
completoalasociarlas,seutilizanmarcadoresdeposicin(indicndoloenel
documento),quesevuelvenacalcularunavezquesehancargadolashojasde
estilo.
45/61
25/3/2015
Diseo
Cuandoelrenderizadorsecreayseaadealrbol,notieneposicinnitamao.El
clculodeestosvaloresseconocecomodiseooreflujo.
HTMLutilizaunmodelodediseobasadoenflujo,loquesignificaque,lamayora
delasveces,losclculosgeomtricossepuedenrealizarconunasolaoperacin.
Loselementosqueentranposteriormente"enelflujo"nosueleninfluirenla
geometradeloselementosqueyaseencuentranenl,porloqueeldiseose
puedeaplicardeizquierdaaderechaydearribaaabajoentodoeldocumento.Hay
excepciones,comolastablasHTML,quepuedenrequerirmsdeunclculo(3.5).
Elsistemadecoordenadasserefierealmarcoraz.Seutilizanlascoordenadas
superioreizquierda.
Eldiseoconsisteenunprocesorecurrente.Seiniciaenelrenderizadorraz,que
correspondealelemento<html>deldocumentoHTML.Eldiseoseaplicadeforma
recurrenteatravsdetodalajerarquademarcosodeunapartedeella,calculando
informacingeomtricaparacadarenderizadorquelorequiere.
Laposicindelrenderizadorrazes0,0ysudimensineslaventanagrfica,es
decir,lapartevisibledelaventanadelnavegador.
Todoslosrenderizadoresincluyenunmtodode"diseo"ode"reflujo"ycadauno
activaelmtododediseodelelementosecundarioalquesedebeaplicarel
diseo.
Sistema de bit de modificacin (dirty bit)

Paranoiniciarunprocesodediseocompletoconcadapequeamodificacin,el
navegadorutilizaunsistemadebitdemodificacin(dirtybit).Cuandoseaadeose
modificaunrenderizador,tantoelpropiorenderizadorcomosuelementosecundario
semarcanconelindicador"dirty",loquesignificaquesedebensometeraun
procesodediseo.
Existendosindicadores:"dirty"y"childrenaredirty".Elindicador"childrenaredirty"
especificaque,aunqueelrenderizadornohayasufridocambios,almenosunode
suselementossecundariosnecesitasometerseaunprocesodediseo.
Diseo global e incremental

Elprocesodediseosepuedeactivarentodoelrbolderenderizacin,loquese
46/61
25/3/2015
conocecomodiseo"global".Acontinuacinseindicanalgunosmotivosporlosque
puedesernecesarioundiseoglobal:
1. uncambiodeestiloglobalqueafecteatodoslosrenderizadores,comoun
cambiodetamaodefuente,
2. uncambiodetamaodelapantalla.
Eldiseopuedeserincremental,encuyocasosolosesometernaunprocesode
diseolosrenderizadoresmarcadoscomo"dirty"(estehechopuedeprovocardaos
quepuedenrequerirprocesosdediseoadicionales).
Cuandolosrenderizadoresestnmarcadoscomo"dirty",seactiva(deforma
asncrona)eldiseoincremental(porejemplo,cuandoseaadenrenderizadores
nuevosalrbolderenderizacindespusdeincluircontenidoadicionaldelareden
elrboldeDOM).
Figura:diseoincrementalenelquesolosesometenaunproceso
dediseolosrenderizadoresmodificadosysuselementos
secundarios(3.6)
Diseo asncrono y sncrono

Eldiseoincrementalseefectadeformaasncrona.Firefoxalmacena"comandos
dereflujo"paralosdiseosincrementalesyunprogramadoractivalaejecucinen
lotedeestoscomandos.WebKittambinincluyeuntemporizadorqueejecutael
47/61
25/3/2015
diseoincremental(serecorreelrbolyseaplicadiseoalosrenderizadores
marcadoscomo"dirty").
Lassecuenciasdecomandosquesolicitaninformacindeestilo,como
"offsetHeight",puedenactivareldiseoincrementaldeformasncrona.
Eldiseoglobalsesueleactivardeformasncrona.
Aveces,eldiseoseactivacomounadevolucindellamadaposterioraundiseo
inicialdebidoaloscambiosquesufrenalgunosatributos,comolaposicinde
desplazamiento.
Optimizaciones
Cuandoseactivaunprocesodediseoporun"cambiodetamao"oporuncambio
enlaposicindelrenderizador(noensutamao),eltamaodelosrenderizadores
setomadeunacachenlugarderecalcularse.
Enalgunoscasos,solosemodificaunsubrbol,porloqueelprocesodediseono
seiniciadesdelaraz.Estopuedesucederenaquelloscasosenlosqueelcambio
eslocalynoafectaaloselementosquelorodean,comoeltextoinsertadoen
camposdetexto(delocontrario,cadateclaactivaraundiseodesdelaraz).
El proceso de diseo
Elprocesodediseosueleseguirelpatrnqueseindicaacontinuacin:
1. Elrenderizadorprincipaldeterminasupropioancho.
2. Elrenderizadorprincipalanalizaloselementossecundariosy:
1. Sitaelrenderizadorsecundario(establecesuvalorxey).
2. Activalaaplicacindeldiseodelrenderizadorsecundarioencaso
necesario(siestmarcadocomo"dirty",sisetratadeundiseoglobalo
poralgunaotracausa),loquehacequesecalculelaalturadel
renderizadorsecundario.
3. Elrenderizadorprincipalutilizalasalturasacumulativasdeloselementos
secundariosylasalturasdelosmrgenesyelrellenoparaestablecersu
propiaaltura,queutilizarelelementoprincipaldelrenderizadorprincipal.
4. Estableceelbitdemodificacin(dirtybit)en"false".
Firefoxutilizaunobjeto"state"(nsHTMLReflowState)comoparmetrodediseo
(conocidocomo"reflujo").Entreotrosvalores,elobjetodeestadoincluyeelancho
48/61
25/3/2015
deloselementosprincipales.
ElresultadodeldiseodeFirefoxesunobjeto"metrics"(nsHTMLReflowMetrics)
queincluirlaalturacomputadadelrenderizador.
Clculo del ancho

Elanchodelrenderizadorsecalculautilizandoelanchodelbloquecontenedor,la
propiedaddeestilo"width"delrenderizador,losmrgenesylosbordes.
Utilicemosparanuestroejemploelsiguienteelemento"div":
<div style="width:30%"/>
WebKitcalcularasuanchodelasiguienteforma(clase"RenderBox",mtodo
"calcWidth"):
Elanchodelcontenedoreselvalormximodelapropiedad"availableWidth"
deloscontenedoresy0.Enestecaso,lapropiedad"availableWidth"esla
propiedad"contentWidth",quesecalculaas:
clientWidth() - paddingLeft() - paddingRight()
Laspropiedades"clientWidth"y"clientHeight"representanelinteriordeun
objeto,excluyendoelbordeylabarradedesplazamiento.
Elanchodeloselementoseselatributodeestilo"width",quesecalculacomo
unvalorabsolutocomputandoelporcentajedelanchodelcontenedor.
Acontinuacin,seaadenelrellenoylosbordeshorizontales.
Hastaahora,hemoscalculadoel"anchopreferente".Ahoravamosacalcularlos
anchosmnimoymximo.
Sielanchopreferenteessuperioralanchomximo,seutilizaelanchomximo.Si,
porelcontrario,esinferioralanchomnimo(launidadindivisiblemspequea),se
utilizaelanchomnimo.
Losvaloressealmacenanencachencasodequesenecesiteactivarunproceso
dediseosinquevareelancho.
Salto de lnea
49/61
25/3/2015
Elsaltodelneaseproducecuandounrenderizadordecidequedebeinterrumpirse
enmitaddeldiseo.Sedetieneycomunicaelsaltoalrenderizadorprincipal.El
renderizadorprincipalcrearenderizadoresadicionalesyactivasusprocesosde
diseo.
Pintura
Enlafasedepintura,serecorreelrbolderenderizacinyseactivaelmtodode
"pintura"delosrenderizadoresparaquesemuestresucontenidoenlapantalla.En
lafasedepintura,seutilizaelcomponentedeinfraestructuradelainterfaz.
Global e incremental
Aligualqueocurreenlafasedediseo,lapinturatambinpuedeserunproceso
global(sepintaelrbolderenderizacincompleto)oincremental.Enelcasodela
pinturaincremental,algunosdelosrenderizadoressemodificandeunaformaque
noafectaalatotalidaddelrbol.Elrenderizadormodificadoinvalidasurectngulo
correspondienteenlapantalla.Estohacequeelsistemaoperativoconsidereesta
regincomomodificadayquegenereuneventode"pintura".Elsistemaoperativo
fusionaingeniosamentevariasregionesenuna.EnChrome,estaoperacinresulta
mscomplicada,yaqueelrenderizadorseencuentraenunprocesodiferenteal
procesoprincipal.Chromesimulaelcomportamientodelsistemaoperativohasta
ciertopunto.Lapresentacinescuchaestoseventosydelegaelmensajeenlaraz
delarenderizacin.Serecorreelrbolhastallegaralrenderizadorcorrespondiente.
Enconsecuencia,sevuelveapintarelrenderizadory,normalmente,suselementos
secundarios.
Orden del proceso de pintura

HazclicaquparaconocerelordendelprocesodepinturaenCSS2.Eselordenen
elqueseapilanloselementosenloscontextosdepila.Esteordeninfluyeenla
pintura,yaquelaspilassepintandeatrshaciadelante.Elordendeapilamientode
unrenderizadordebloqueeselsiguiente:
1. colordefondo,
2. imagendefondo,
3. borde,
4. elementossecundarios,
5. contorno.
50/61
25/3/2015
Lista de visualizacin de Firefox

Firefoxanalizaelrbolderenderizacinycreaunalistadevisualizacinparael
rearectangularpintadaqueincluyelosrenderizadoresrelevantesparaelrea
rectangularenelordendepinturacorrecto(primerolosfondosdelos
renderizadores,luegolosbordes,etc.).Deestaforma,sisequierevolverapintarel
rbol,solosetendrquerecorrerunavez(primerosepintantodoslosfondos,
despustodaslasimgenes,acontinuacintodoslosbordes,etc.).
Paraoptimizarelproceso,Firefoxnoaadeelementosquevayanaquedarocultos,
comoloselementosquequedantotalmenteocultosbajootroselementosopacos.
Almacenamiento de figuras rectangulares de WebKit

Antesdevolverainiciarunprocesodepintura,WebKitguardaelrectnguloantiguo
comounmapadebits.Posteriormente,solopintaelreadiferencialexistenteentre
losrectngulosnuevoyantiguo.
Cambios dinmicos
Losnavegadoresintentanejecutarlamenorcantidadposibledeaccionescuandose
produceuncambio.Portanto,siseproducencambiosenelcolordeunelemento,
solosevolverapintareseelemento.Siseproducencambiosenlaposicindeun
elemento,sevolveradisearyapintareseelemento,suselementossecundarios
y,posiblemente,loselementosqueestnasumismonivel.Siseaadeunnodo
DOM,seactivarunprocesodediseoydenuevapinturadelnodo.Siseproducen
cambiosdemayorimportancia,comoelaumentodeltamaodefuentedelelemento
"html",seinvalidarnlascachsyseactivarunnuevoprocesodediseoyde
pinturadelrbolcompleto.
Subprocesos del motor de renderizacin

Elmotorderenderizacinsoloconstadeunsubproceso.Casitodaslas
operaciones,exceptolasdered,sedesarrollanenunnicosubproceso.EnFirefox
ySafari,eselsubprocesoprincipaldelnavegador.EnChrome,eselsubproceso
principaldelprocesodepestaa.
Lasoperacionesderedsepuedenrealizarmediantevariossubprocesosparalelos.
Elnmerodeconexionesparalelaseslimitado(normalmente,dedosaseis
conexiones.Porejemplo,Firefox3utilizaseis).
51/61
25/3/2015
Bucle de eventos
Elsubprocesoprincipaldelnavegadoresunbucledeeventos,queconsisteenun
bucleinfinitoquemantieneactivoelproceso.Esperaaqueseinicieneventos(como
losdediseoypintura)ylosprocesa.EsteeselcdigodeFirefoxparaelbuclede
eventosprincipal:
while (!mExiting)
NS_ProcessNextEvent(thread);
Modelo de formato visual de CSS2

El elemento canvas
DeacuerdoconlaespecificacindeCSS2,eltrminocanvasdescribe"elespacio
enelqueserepresentalaestructuradeformato",esdecir,ellugarenelqueel
navegadorpintaelcontenido.Aunqueelelementocanvasesinfinitoparacada
dimensindelespacio,losnavegadoreseligenunanchoinicialenfuncindelas
dimensionesdelaventanagrfica.
Deacuerdoconlasindicacionesdelapginawww.w3.org/TR/CSS2/zindex.html,el
elementocanvasestransparentesiseincluyedentrodeotroelementootieneun
colordefinidoporelnavegadorsinoseincluyeenningnelemento.
Modelo de cajas de CSS

ElmodelodecajasdeCSSdescribelascajasrectangularesquesegeneranpara
loselementosdelrboldeldocumentoyquesediseandeacuerdoconelmodelo
deformatovisual.
Cadacajaconstadeunreadecontenido(porejemplo,texto,unaimagen,etc.)y
dereascircundantesopcionalesdemargen,bordeyrelleno.
52/61
25/3/2015
Figura:modelodecajasdeCSS2
Cadanodogeneraentre0yncajasdeestetipo.
Todosloselementostienenunapropiedad"display"quedeterminaeltipodecaja
quesegenerar.Ejemplos:
block - generates a block box.
inline - generates one or more inline boxes.
none - no box is generated.
Aunqueeltipodecajapredeterminadoes"inline",lahojadeestilodelnavegador
estableceotrostipospredeterminados.Porejemplo,eltipodevisualizacin
predeterminadodeunelemento"div"es"block".
Puedesconsultarunejemplodehojadeestilopredeterminadaenlapgina
www.w3.org/TR/CSS2/sample.html.
Esquema de posicionamiento
Acontinuacinseindicanlostrestiposdeesquemasdisponibles.
1. Flujonormal:elobjetosecolocaenfuncindellugarqueocupaenel
documento(estosignificaqueellugarqueocupaenelrbolderenderizacin
essimilarallugarqueocupaenelrboldeDOM)ysediseadeacuerdocon
53/61
25/3/2015
susdimensionesyconeltipodecaja.
2. Flotante:elobjetosediseaprimerosegnelflujonormaly,posteriormente,
semuevehacialaderechaohacialaizquierdatodoloposible.
3. Posicionamientoabsoluto:elobjetosecolocaenelrbolderenderizacinde
unaformadiferentealaqueseutilizaparacolocarloenelrboldeDOM.
Lapropiedad"position"yelatributo"float"determinanelesquemade
posicionamiento.
Siseutilizan"static"y"relative",segeneraunflujonormal.
Siseutilizan"absolute"y"fixed",seproduceunposicionamientoabsoluto.
Cuandoelposicionamientoesesttico,nosedefineningunaposicin,porloquese
utilizaelposicionamientopredeterminado.Enotrosesquemas,elautorespecificala
posicin:arriba,abajo,izquierda,derecha.
Lossiguientesvaloresdeterminaneldiseodelacaja:
tipodecaja,
dimensionesdelacaja,
esquemadeposicionamiento,
informacinexterna,comoeltamaodelasimgenesyeltamaodela
pantalla.
Tipos de cajas
Cajadebloque:formaunbloque(tienesupropiorectnguloenlaventanadel
navegador).
Figura:cajadebloque
Cajaintegrada:notienebloquepropio,sinoqueseincluyeenunbloquede
contencin.
54/61
25/3/2015
Figura:cajasintegradas
Lascajasdebloquesecolocanenvertical,unadetrsdeotra,mientrasquelas
cajasintegradassedistribuyenhorizontalmente.
Figura:formatodecajasdebloqueeintegradas
Lascajasintegradassecolocandentrodelneaso"cajasdelnea".Cuandolas
cajassealineantomandocomopuntodereferenciasubase,esdecir,laparte
inferiordeunelementosealineaconotracajatomandocomoreferenciaunaparte
diferentealainferior,laslneastienencomomnimolamismaalturaquelacajams
alta,aunquepuedensermsaltas.Encasodequeelanchodelcontenedornosea
suficiente,lascajasintegradassecolocanendiferenteslneas.Estoesloquesuele
55/61
25/3/2015
ocurrirenunprrafo.
Figura:lneas
Posicionamiento
Relativo
Posicionamientorelativo:elelementosecolocanormalmentey,acontinuacin,se
muevesegneldiferencialcorrespondiente.
Figura:posicionamientorelativo
Flotante
56/61
25/3/2015
Unacajaflotantesedesplazaalaizquierdaoaladerechadeunalnea.Loms
interesantedeesteposicionamientoesquelasdemscajasfluyenasualrededor.A
continuacin,seincluyeunejemploconcdigoHTML:
<p>
<img style="float:right" src="images/image.gif" width="100"
height="100">
Lorem ipsum dolor sit amet, consectetuer...
</p>
Laaparienciaseralasiguiente:
Figura:cajaflotante
Absoluto y fijo
Eldiseosedefineconexactitudindependientementedelflujonormal.Elelemento
noparticipaenelflujonormal.Lasdimensionessonrelativasalcontenedor.Enel
posicionamientofijo,elcontenedoreslaventanagrfica.
57/61
25/3/2015
Figura:posicionamientofijo
Nota:lacajafijanosemoveraunqueelusuariosedesplaceporeldocumento.
Representacin en capas
Lascapasseespecificanconlapropiedad"zindex"deCSS.Representalatercera
dimensindelacaja,esdecir,suposicinalolargodel"ejez".
Lascajassedividenenpilas(denominadas"contextosdepila").Encadapila,los
elementosquequedandebajosepintanenprimerlugar,yloselementosque
quedanencimasecolocanenlapartesuperior,mscercadelusuario.Encasode
superposicin,seocultaelelementoquequedadebajo.
Laspilasseordenansegnlapropiedad"zindex".Lascajasquetienenla
propiedad"zindex"formanunapilalocal.Laventanagrficaformalapilaexterior.
Ejemplo:
<style type="text/css">
div {
position: absolute;
left: 2in;
top: 2in;
}
58/61
25/3/2015
</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>
Seobtendrelsiguienteresultado:
Figura:posicionamientofijo
Aunqueelelemento"div"rojoprecedaalverdeenelmarcadoysepinteenprimer
lugarenunflujonormal,elvalordelapropiedad"zindex"essuperior,porloquese
encuentramsadelantadoenlapiladelacajaraz.
Recursos
1. Arquitecturadelnavegador
1. Grosskurth,Alan.AReferenceArchitectureforWebBrowsers(pdf)
2. Gupta,Vineet.HowBrowsersWorkPart1Architecture
2. Anlisis
1. Aho,Sethi,Ullman,Compilers:Principles,Techniques,andTools,
59/61
25/3/2015
tambinconocidocomo"TheDragonBook"(Ellibrodeldragn),
AddisonWesley,1986
2. RickJelliffe.TheBoldandtheBeautiful:twonewdraftsforHTML5
3. Firefox
1. L.DavidBaron,FasterHTMLandCSS:LayoutEngineInternalsforWeb
Developers
2. L.DavidBaron,FasterHTMLandCSS:LayoutEngineInternalsforWeb
Developers(vdeodeGoogleTechTalks)
3. L.DavidBaron,Mozilla'sLayoutEngine
4. L.DavidBaron,MozillaStyleSystemDocumentation
5. ChrisWaterson,NotesonHTMLReflow
6. ChrisWaterson,GeckoOverview
7. AlexanderLarsson,ThelifeofanHTMLHTTPrequest
4. WebKit
1. DavidHyatt,ImplementingCSS(part1)
2. DavidHyatt,AnOverviewofWebCore
3. DavidHyatt,WebCoreRendering
4. DavidHyatt,TheFOUCProblem
5. EspecificacionesdeW3C
1. HTML4.01Specification
2. W3CHTML5Specification
3. CascadingStyleSheetsLevel2Revision1(CSS2.1)Specification
6. Instruccionesdecreacindenavegadores
1. Firefox:https://developer.mozilla.org/en/Build_Documentation
2. WebKit:http://webkit.org/building/build.html
TaliGarsielesunadesarrolladoradeIsrael.Empezsuandadura
comodesarrolladorawebenelao2000ysefamiliarizconel
"malfico"modelodecapasdeNetscape.AligualqueRichard
Feynmann,sentafascinacinpordescubrircmofuncionabanlascosas,porlo
queempezainvestigarlosmecanismosdefuncionamientointernodelos
60/61
25/3/2015
navegadoresyadocumentartodossusdescubrimientos.Talitambinha
publicadounapequeaguasobrerendimientodeaplicacionescliente.
Traducciones
Estapginasehatraducidoaljaponsdosveces!Cmofuncionanlos
navegadores:loquehaydetrsdelosnavegadoreswebactuales(ja)por@_kosei_
yWEBpor
@ikeike443y@kiyoto01.Graciasatodos!
61/61

Cómo Funcionan Los Navegadores - Lo Que Hay Detrás de Los Navegadores Web Actuales - HTML5 Rocks

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Cómo Funcionan Los Navegadores - Lo Que Hay Detrás de Los Navegadores Web Actuales - HTML5 Rocks

Enviado por

Direitos autorais:

Formatos disponíveis

25/3/2015

Cmo funcionan los navegadores: lo que hay

Los navegadores de los que hablaremos

La funcin principal de un navegador

Componentes principales del navegador

Ejemplos del flujo principal

Analizador: combinacin de analizadores lxicos

Definiciones formales de vocabulario y sintaxis

Cmo generar analizadores automticamente

Definicin de gramtica HTML

No es una gramtica libre de contexto

Algoritmo de construccin de rbol

Acciones al finalizar el anlisis

Tolerancia a errores de los navegadores

</br> en lugar de <br>

Elementos de un formulario anidado

Jerarqua de etiquetas demasiado profunda

bool HTMLParser::allowNestedRedundantTag(const AtomicString&

Etiquetas finales de cuerpo o HTML colocadas incorrectamente

if (t->tagName == htmlTag || t->tagName == bodyTag )

: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S*

Analizador de CSS de WebKit

Orden de procesamiento de secuencias de comandos y

Construccin del rbol de renderizacin

Relacin del rbol de renderizacin con el rbol de DOM

El flujo de construccin del rbol

Datos de estilo compartidos

rbol de reglas de Firefox

Cmo computar los contextos de estilo con el rbol de reglas

Cmo manipular las reglas para obtener coincidencias

Cmo aplicar las reglas en el orden de cascada correcto

Orden en cascada de la hoja de estilo

/* a=0 b=0 c=0 d=0 -> specificity = 0,0,0,0

/* a=0 b=0 c=0 d=1 -> specificity = 0,0,0,1

Cmo ordenar las reglas

Sistema de bit de modificacin (dirty bit)

Diseo global e incremental

Diseo asncrono y sncrono

Clculo del ancho

Orden del proceso de pintura

Lista de visualizacin de Firefox

Almacenamiento de figuras rectangulares de WebKit

Subprocesos del motor de renderizacin

Modelo de formato visual de CSS2

Modelo de cajas de CSS

Você também pode gostar