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

25/3/2015 Cmofuncionanlosnavegadores:loquehaydetrsdelosnavegadoreswebactualesHTML5Rocks

http://www.html5rocks.com/es/tutorials/internals/howbrowserswork/ 1/61

Cmo funcionan los navegadores: lo que haydetrs de los navegadores web actuales

ByTaliGarsielandPaulIrish

Publicacin:agosto5th,2011Comments:132

EstecompletomanualsobrelasoperacionesinternasdeWebKityGeckoeselresultadodelasextensasinvestigacionesrealizadasporladesarrolladoraisraelTaliGarsiel.Durantevariosaoshaestadorevisandotodalainformacinpublicadasobrelascaractersticasinternasdelosnavegadoresweb(consultalaseccinRecursos)yhapasadomuchotiempoleyendosucdigofuente.Taliescribilosiguiente:

Talihapublicadosuinvestigacinensusitioweb,perocomosabamosquesemerecaunpblicomsamplio,lohemospublicadoaqutambintrashaceralgunasmodificaciones.

Comodesarrolladoraweb,conocerlascaractersticasinternasdelasoperacionesdelosnavegadoressirveparatomarmejoresdecisionesyparaconocerlosmotivosquejustificanlasprcticasdedesarrollorecomendadas.Aunquesetratadeundocumentobastanteextenso,terecomendamosquedediquesunpocodetutiempoaexaminarlo.Tenporseguroquenotearrepentirs.

PaulIrish,RelacionescondesarrolladoresdeChrome

Prlogo

"EnlosaosenlosqueInternetExploreracaparabael90%delmercado,elnavegadorsepodaconsiderarpocomsque"cajanegra",peroahoraquelosnavegadoresdecdigoabiertodominanmsdelamitaddelmercado,esunbuenmomentoparaecharunvistazoalinteriordelosnavegadoresyverloqueesconden.Bueno,loqueescondenmillonesdelneasdecdigoenC++..."
http://www.html5rocks.com/profiles/#taligarsielhttp://techcrunch.com/2011/08/01/open-web-browsers/http://taligarsiel.com/http://www.html5rocks.com/profiles/#taligarsielhttp://www.html5rocks.com/profiles/#paulirishhttp://www.html5rocks.com/profiles/#paulirish



Losnavegadoressonprobablementeelsoftwaremsutilizadodetodos.Enestemanualseexplicasufuncionamientointerno.Veremosquocurrecuandoescribesgoogle.comenlabarradedireccioneshastaquelapginadeGoogleapareceenlapantalla.

1. Introduccin

1. Losnavegadoresdelosquehablaremos2. Lafuncinprincipaldeunnavegador3. Componentesprincipalesdelnavegador

2. Elmotorderenderizacin

1. Motoresderenderizacin2. Elflujoprincipal3. Ejemplosdelflujoprincipal

3. AnlisisyconstruccindelrboldeDOM

1. Anlisis(general)

1. Gramticas2. Analizador:combinacindeanalizadoreslxicos3. Traduccin4. Ejemplodeanlisis5. Definicionesformalesdevocabularioysintaxis6. Tiposdeanalizadores7. Cmogeneraranalizadoresautomticamente

2. AnalizadordeHTML

1. DefinicindegramticaHTML2. Noesunagramticalibredecontexto3. DTDdeHTML4. DOM5. Elalgoritmodeanlisis6. Elalgoritmodetokenizacin7. Algoritmodeconstruccinderbol8. Accionesalfinalizarelanlisis9. Toleranciaaerroresdelosnavegadores

Introduccin

ndice



3. AnlisisdeCSS

1. AnalizadordeCSSdeWebKit

4. Ordendeprocesamientodesecuenciasdecomandosyhojasdeestilo

1. Secuenciasdecomandos2. Anlisisespeculativo3. Hojasdeestilo

4. Construccindelrbolderenderizacin

1. RelacindelrbolderenderizacinconelrboldeDOM2. Elflujodeconstruccindelrbol3. Computacindeestilos

1. Datosdeestilocompartidos2. rboldereglasdeFirefox

1. Divisinenestructuras2. Cmocomputarloscontextosdeestiloconelrboldereglas

3. Cmomanipularlasreglasparaobtenercoincidenciasfcilmente4. Cmoaplicarlasreglasenelordendecascadacorrecto

1. Ordenencascadadelahojadeestilo2. Especificidad3. Cmoordenarlasreglas

4. Procesogradual

5. Diseo

1. Sistemadebitdemodifiacin(dirtybit)2. Diseoglobaleincremental3. Diseoasncronoysncrono4. Optimizaciones5. Elprocesodediseo6. Clculodelancho7. Saltodelnea

6. Pintura

1. Globaleincremental2. Ordendelprocesodepintura3. ListadevisualizacindeFirefox4. AlmacenamientodefigurasrectangularesdeWebKit

7. Cambiosdinmicos8. Subprocesosdelmotorderenderizacin



1. Bucledeeventos

9. ModelodeformatovisualdeCSS2

1. Elelementocanvas2. ModelodecajasdeCSS3. Esquemadeposicionamiento4. Tiposdecajas5. Posicionamiento

1. Relativo2. Flotante3. Absolutoyfijo

6. Representacinencapas

10. Recursos

Enlaactualidadseutilizanprincipalmentecinconavegadores:InternetExplorer,Firefox,Safari,ChromeyOpera.Losejemplosdeestedocumentoserefierenanavegadoresdecdigoabierto,comoFirefox,ChromeySafari(esteltimoesenpartedecdigoabierto).SegnlasestadsticassobrenavegadoresdeStatCounter,actualmente(agostode2011)elusoconjuntodeFirefox,SafariyChromerepresentael60%.Portanto,enestosmomentoslosnavegadoresdecdigoabiertoconstituyenunaparteimportantedelmercadodelosnavegadores.

Lafuncinprincipaldeunnavegadoressolicitaralservidorlosrecursoswebqueelijaelusuarioymostrarlosenunaventana.ElrecursosueleserundocumentoHTML,perotambinpuedeserunarchivoPDF,unaimagenounobjetodeotrotipo.ElusuarioespecificalaubicacindelrecursomedianteelusodeunaURI(siglasdeUniformResourceIdentifier,identificadoruniformederecurso).

LaformaenlaqueelnavegadorinterpretaymuestralosarchivosHTMLsedeterminaenlasespecificacionesdeCSSyHTML.EstasespecificacioneslasestableceelconsorcioW3C(WorldWideWebConsortium),queeslaorganizacindeestndaresdeInternet.Duranteaos,losnavegadorescumplansolounapartedelasespecificacionesydesarrollabansuspropiasextensiones.Estoprovocgravesproblemasdecompatibilidadparaloscreadoresdecontenidoweb.Enlaactualidad,lamayorade

Los navegadores de los que hablaremos

La funcin principal de un navegador
http://gs.statcounter.com/



losnavegadorescumplenlasespecificacionesenmayoromenorgrado.

Lasinterfacesdeusuariodelosdistintosnavegadorestienenmuchoselementosencomn.Estossonalgunosdeloselementoscomunesdelasinterfacesdeusuario:

unabarradedireccionesdondeinsertarlasURI,

botonesdeavanceyretroceso,

opcionesdemarcadores,

unbotnparadetenerlacargadelosdocumentosactualesyotroparavolveracargarlos,

unbotndeinicioquepermitevolveralapginadeinicio.

Estascoincidenciasresultanextraas,yaquelainterfazdeusuariodelosnavegadoresnoseincluyeenningunadelasespecificacionesformales,sinoqueprocededelaexperienciaacumuladaalolargodelosaosydeloselementosquelosnavegadoreshanimitadounosdeotros.LaespecificacindeHTML5nodefineloselementosquedebeincluirlainterfazdeusuariodelosnavegadores,peromuestraalgunoselementoscomunes.Entreestoselementosseencuentranlabarradedirecciones,labarradeestadoylabarradeherramientas.Existen,porsupuesto,caractersticasnicasdecadanavegador,comoeladministradordedescargasdeFirefox.

Acontinuacinseespecificanloscomponentesprincipalesdeunnavegador(1.1).

1. Interfazdeusuario:incluyelabarradedirecciones,elbotndeavance/retroceso,elmendemarcadores,etc.(engeneral,todaslaspartesvisiblesdelnavegador,exceptolaventanaprincipaldondesemuestralapginasolicitada).

2. Motordebsqueda:coordinalasaccionesentrelainterfazyelmotorderenderizacin.

3. Motorderenderizacin:esresponsabledemostrarelcontenidosolicitado.Porejemplo,sielcontenidosolicitadoesHTML,serelresponsabledeanalizarelcdigoHTMLyCSSydemostrarelcontenidoanalizadoenlapantalla.

4. Red:esresponsabledelasllamadasdered,comolassolicitudesHTTP.Tieneunainterfazindependientedelaplataformayrealizaimplementacionesensegundoplanoparacadaplataforma.

Componentes principales del navegador



5. Servidordelainterfaz:permitepresentarwidgetsbsicos,comoventanasycuadroscombinados.Muestraunainterfazgenricaquenoesespecficadeningunaplataforma.Utilizamtodosdelainterfazdeusuariodelsistemaoperativoensegundoplano.

6. IntrpretedeJavaScript:permiteanalizaryejecutarelcdigoJavaScript.7. Almacenamientodedatos:esunacapadepersistencia.Elnavegador

necesitaguardartodotipodedatoseneldiscoduro(porejemplo,lascookies).LanuevaespecificacindeHTML(HTML5)defineelconceptode"basededatosweb",queconsisteenunacompleta(aunqueligera)basededatosdelnavegador.

Figura:componentesprincipalesdelnavegador

EsimportantedecirqueChrome,adiferenciadelamayoradelosnavegadores,implementavariasinstanciasdelmotorderenderizacin,unaporcadapestaa.Cadapestaarepresentaunprocesoindependiente.

Laresponsabilidaddelmotorderenderizacines"renderizar",esdecir,mostrarelcontenidosolicitadoenlapantalladelnavegador.

Deformapredeterminada,elmotorderenderizacinpuedemostrarimgenesy

El motor de renderizacin



documentosHTMLyXML.Puedemostrarotrostiposmedianteelusodecomplementos(oextensiones)porejemplo,puedemostrardocumentosPDFmedianteuncomplementocapazdeleerarchivosPDF.Sinembargo,enestecaptulonoscentraremosensuusoprincipal:mostrarimgenesycdigoHTMLconformatodefinidoconCSS.

Nuestrosnavegadoresdereferencia(Firefox,ChromeySafari)estnbasadosendosmotoresderenderizacin.FirefoxutilizaGecko,unmotorderenderizacinpropiodeMozilla.TantoSafaricomoChromeutilizanWebKit.

WebKitesunmotorderenderizacindecdigoabiertoqueempezsiendounmotordelaplataformaLinuxyquefuemodificadoposteriormenteporAppleparahacerlocompatibleconMacyWindows.Puedesobtenermsinformacinenwebkit.org.

Elmotorderenderizacinempiezarecibiendoelcontenidodeldocumentosolicitadodesdelacapadered,normalmenteenfragmentosde8.000bytes.

Acontinuacin,elmotorderenderizacinrealizaesteflujobsico:

Figura:flujobsicodelmotorderenderizacin

ElmotorderenderizacinempiezaaanalizareldocumentoHTMLyconviertelasetiquetasennodosDOMenunrboldenominado"rboldecontenido".Analizalosdatosdeestilo,tantoenlosarchivosCSSexternoscomoenloselementosdeestilo.Losdatosdeestilo,juntoconlasinstruccionesvisualesdelcdigoHTML,seutilizanparacrearotrorbol:elrbolderenderizacin.

Elrbolderenderizacincontienerectngulosconatributosvisuales,comoelcolorylasdimensiones.Losrectngulosestnorganizadosenelordenenelqueaparecernenlapantalla.

Unavezconstruidoelrbolderenderizacin,seiniciaunprocesode"diseo".Estosignificaqueacadanodoseleasignanlascoordenadasexactasdellugardela

Motores de renderizacin

El flujo principal
http://webkit.org/



pantallaenelquedebeaparecer.Lasiguientefaseesladepintura,enlaqueserecorreelrbolderenderizacinysepintacadaunodelosnodosutilizandolacapadeservidordelainterfazdeusuario.

Esimportantecomprenderquesetratadeunprocesogradual.Paramejorarlaexperienciadelusuario,elmotorderenderizacinintentarmostrarelcontenidoenpantallaloantesposible.NoesperaraqueseanaliceelcdigoHTMLparaempezaracrearydisearelrbolderenderizacin.Seanalizarnysemostrarnalgunaspartesdelcontenido,mientrasquesesigueprocesandoelrestodelcontenidoquellegadelared.

Figura:flujoprincipaldeWebKit

Ejemplos del flujo principal



Figura:flujoprincipaldelmotorderenderizacinGeckodeMozilla(3.6)

Enlasfiguras3y4sepuedeverque,aunqueWebKityGeckoutilizanunaterminologaligeramentediferente,elflujoesbsicamenteelmismo.

Geckodenominaalrboldeelementosformateadosvisualmente"rboldemarcos".Cadaunodeloselementosesunmarco.WebKitutilizalostrminos"rbolderenderizacin"y"objetosderenderizacin"enlugardelosanteriores.WebKitutilizaeltrmino"diseo"paracolocarloselementos,mientrasqueGeckolodenomina"reflujo".WebKitutilizaeltrmino"asociacin"paraconectarlosnodosDOMconinformacinvisualparacrearelrbolderenderizacin.UnapequeadiferencianosemnticaesqueGeckodisponedeunacapaextraentreelcdigoHTMLyelrboldeDOM.Estacapasedenomina"depsitodecontenido"yestdedicadaalacreacindeelementosDOM.Vamosavercadaunadelaspartesdelflujo:

Dadoqueelanlisisesunprocesomuyimportantedelmotordelrenderizacin,vamosaverlodeunaformamsdetallada.Comencemosporunabreveintroduccinaesteproceso.

Analizarundocumentosignificatraducirloaunaestructuraquetengasentido,esdecir,algoqueelcdigopuedacomprenderyutilizar.Elresultadodelanlisissueleserunrboldenodosquerepresentalaestructuradeldocumento.Esterbolsedenomina"rboldeanlisis"o"rboldesintaxis".

Anlisis (general)



Ejemplo:elanlisisdelaexpresin2 + 3 - 1 podradarcomoresultadoesterbol:

Figura:nododerboldeexpresinmatemtica

Elanlisissebasaenlasreglasdesintaxisporlasqueserigeeldocumento,esdecir,ellenguajeoelformatoenelqueestescrito.Todoslosformatosquesepuedenanalizardebentenerunagramticadeterministaformadaporunvocabularioyunasreglasdesintaxis.Estosedenominagramticalibredecontexto.Loslenguajeshumanosnosondeestetipoy,portanto,nosepuedenanalizarcontcnicasdeanlisisconvencionales.

Elprocesodeanlisissepuededividirendossubprocesos:anlisislxicoyanlisissintctico.

Elanlisislxicoeselprocesodedescomponerlosdatosdeentradaentokens.Lostokenssonelvocabulariodellenguaje,unconjuntodebloquesdeconstruccinvlidos.Enellenguajehumano,equivaldraatodaslaspalabrasqueapareceneneldiccionariodeundeterminadoidioma.

Elanlisissintcticoeslaaplicacindelasreglassintcticasdellenguaje.

Losanalizadoresnormalmentedivideneltrabajoentredoscomponentes:elanalizadorlxico(avecesdenominado"tokenizador"),responsablededescomponerlosdatosdeentradaentokensvlidos,yelanalizadornormal,responsabledeconstruirelrboltrasanalizarlaestructuradeldocumentosegnlasreglassintcticasdellenguaje.Elanalizadorlxicoescapazdeignorarcaracteresirrelevantes,comoespaciosenblancoysaltosdelnea.

Gramticas

Analizador: combinacin de analizadores lxicos



Figura:deldocumentooriginalalrboldeanlisis

Elprocesodeanlisisesiterativo.Elanalizadornormalmentepidealanalizadorlxicounnuevotokeneintentabuscarcoincidenciasentreeltokenyunadelasreglasdesintaxis.Siseencuentraunacoincidencia,seaadealrboldeanlisisunnodocorrespondientealtokenyelanalizadorsolicitaotrotoken.

Sinocoincideconningunaregla,elanalizadoralmacenaeltokeninternamenteysiguesolicitandotokenshastaqueencuentraunareglaquecoincidecontodoslostokensalmacenadosinternamente.Sinoencuentraningunaregla,lanzaunaexcepcin.Estosignificaqueeldocumentonoseconsideravlidoportenererroresdesintaxis.

Muchasveces,elrboldeanlisisnoeselproductofinal.Elanlisisseutilizafrecuentementeenlatraduccin,esdecir,enlaconversindeldocumentodeentradaaotroformato.Unejemploseralacompilacin.Elcompilador,quecompilauncdigofuenteencdigodemquina,enprimerlugarloconvierteenunrboldeanlisisy,acontinuacin,traduceelrbolaundocumentodecdigodemquina.

Traduccin



Figura:flujodecompilacin

Enlafigura5seobservaunrboldeanlisiscreadoapartirdeunaexpresinmatemtica.Intentemosdefinirunlenguajematemticosimpleyveamoselprocesodeanlisis.

Vocabulario:nuestrolenguajepuedeincluirnmerosenteros,elsignomsyelsignomenos.

Sintaxis:

1. Losbloquesdeconstruccindelasintaxisdellenguajesonexpresiones,trminosyoperaciones.

2. Nuestrolenguajepuedeincluircualquiercantidaddeexpresiones.

3. Unaexpresinestformadaporun"trmino"seguidodeuna"operacin"ydeotrotrmino.

4. Unaoperacinesuntokendesumaountokenderesta.

5. Untrminoesuntokendenmeroenteroounaexpresin.

Analicemoslaentrada2 + 3 - 1 .

Ejemplo de anlisis



Laprimerasubcadenaquecoincideconunareglaes2 segnlaregla5,esuntrmino.Lasegundacoincidenciaes2 + 3 ,quecoincideconlaterceraregla(untrminoseguidodeunaoperacinydeotrotrmino).Lasiguientecoincidenciasoloseutilizaralfinaldelaentrada.2 + 3 - 1 esunaexpresinporqueyasabemosque2+3 esuntrmino,asquetenemosuntrminoseguidodeunaoperacinydeotrotrmino.2 + + nocoincideconningunaregla,porloquenoseraunaentradavlida.

Elvocabulariosesueleexpresarmedianteexpresionesregulares.

Porejemplo,nuestrolenguajesedefinirdelasiguienteforma:

INTEGER :0|[1-9][0-9]*PLUS : +MINUS: -

Comosepuedeobservar,losnmerosenterossedefinenmedianteunaexpresinregular.

LasintaxisnormalmentesedefineenunformatodenominadonotacindeBackusNaur(BNF).Nuestroidiomasedefinirdelasiguienteforma:

expression := term operation termoperation := PLUS | MINUSterm := INTEGER | expression

Dijimosqueunlenguajesepuedeanalizarmedianteanalizadoresnormalessisugramticaesunagramticalibredecontexto.UnadefinicinintuitivadeunagramticalibredecontextoesunagramticaquesepuedeexpresarcompletamenteennotacindeBackusNaur(BNF).PuedesconsultarunadefinicinformalenesteartculodeWikipediasobrelasgramticaslibresdecontexto.

Existendostiposbsicosdeanalizadores:losdescendentesylosascendentes.Utilizandounaexplicacinintuitiva,podramosdecirquelosanalizadores

Definiciones formales de vocabulario y sintaxis

Tipos de analizadores
http://es.wikipedia.org/wiki/Gram%C3%A1tica_libre_de_contextohttp://www.regular-expressions.info/http://es.wikipedia.org/wiki/Notaci%C3%B3n_de_Backus-Naur



descendentescompruebanlaestructuradenivelsuperiordelasintaxiseintentanbuscarunacoincidencia,mientrasquelosanalizadoresascendentescomienzanconlosdatosdeentradaylosvantransformandogradualmentemediantelasreglassintcticasempezandoporelnivelmsbajohastaquesecumplenlasreglasdenivelsuperior.

Veamoscmoanalizanelcontenidodeejemploestosdostiposdeanalizadores:

Unanalizadordescendenteempiezadesdelaregladenivelsuperior:identifica2 +3 comounaexpresin.Acontinuacin,identifica2 + 3 - 1 comoexpresin(elprocesodeidentificarlaexpresinsedesarrollabuscandocoincidenciasconelrestodelasreglas,peroseempiezaporlaregladenivelsuperior).

Elanalizadorascendenteanalizalosdatosdeentradahastaqueencuentraunacoincidenciaconunareglay,acontinuacin,sustituyelaentradacoincidenteconlaregla.Esteprocesocontinahastaqueseanalizantodoslosdatosdeentrada.Lasexpresionesconcoincidenciasparcialessecolocanenlapiladelanalizador.

Pila Entrada 2 + 3 - 1

trmino + 3 - 1

operacindeltrmino 3 - 1

expresin - 1

operacindelaexpresin 1

expresin

Estetipodeanalizadorascendenteseconocecomoanalizadordedesplazamientoreduccindebidoaquelosdatosdeentradasedesplazanhacialaderecha(imaginaunpunteroqueapuntaprimeroaliniciodelosdatosdeentradayacontinuacinsedesplazahacialaderecha)ygradualmentesereducensegnlasreglassintcticas.

Existenherramientascapacesdegeneraranalizadoresautomticamente.Sedenominangeneradoresdeanalizadores.Estosgeneradorescreanautomticamenteunanalizadorfuncionalutilizandolagramticadellenguaje(vocabularioyreglassintcticas)establecidaporeldesarrollador.Losgeneradoresdeanalizadoressonmuytiles,yaque,paracrearunanalizador,esnecesariodisponerdeunprofundoconocimientodelprocesodeanlisis,ynoresultafcilcrearmanualmenteunanalizadoroptimizado.

Cmo generar analizadores automticamente



WebKitutilizadosgeneradoresdeanalizadoresmuyconocidos:Flex,paracrearunanalizadorlxico,yBison,paracrearunanalizadornormal(tambinseconocencomo"Lex"y"Yacc").LaentradadeFlexconsisteenunarchivocondefinicionesdeexpresionesregularesdelostokens.LaentradadeBisonconsisteenlasreglassintcticasdellenguajeenformatoBNF.

EltrabajodelanalizadordeHTMLesanalizarlasmarcasHTMLyorganizarlasenunrboldeanlisis.

EslasintaxisyelvocabulariodefinidosenlasespecificacionescreadasporlaorganizacinW3C.LaversinactualesHTML4yactualmenteseesttrabajandoenHTML5.

Comoyavimosenlaintroduccinalanlisis,lasintaxisdelagramticasepuededefinirformalmentemedianteformatoscomoBNF.

Lamentablemente,notodoslostemassobreanalizadoresconvencionalessepuedenaplicarallenguajeHTML(losheincluidoporqueseutilizarnenelanlisisdeCSSyJavaScript).EllenguajeHTMLnosepuededefinirfcilmentemediantelagramticalibredecontextoquenecesitanlosanalizadores.

ExisteunformatoformalparadefinirellenguajeHTML:DTD(definicindetipodedocumento)sinembargo,noesunagramticalibredecontexto.

Parecealgoextraoaprimeravista:ellenguajeHTMLesbastantesimilaralXML.HayunagranvariedaddeanalizadoresdeXMLdisponibles.ExisteunavariacinXMLdellenguajeHTML,elXHTML,asque,culesladiferencia?

LadiferenciaradicaenqueellenguajeHTMLesms"permisivo",yaquepermiteomitirciertasetiquetasqueseaadendeformaimplcita,avecesseomiteelprincipiooelfinaldelasetiquetas,etc.Enconjunto,esunasintaxis"flexible",enoposicinalasintaxisrgidayexigentedellenguajeXML.

Estadiferenciaaparentementepequeaes,enrealidad,abismal.Porunlado,estaeslaraznprincipalporlaqueelHTMLestanpopular:permiteerroresyfacilitalas

Analizador de HTML

Definicin de gramtica HTML

No es una gramtica libre de contexto
http://en.wikipedia.org/wiki/Flex_lexical_analyserhttp://www.gnu.org/software/bison/



cosasalosautoresdecontenidoweb.Porotrolado,hacequeresultedifcilescribirunagramticaformal.Enresumen:ellenguajeHTMLnosepuedeanalizarfcilmentemedianteanalizadoresconvencionales(porquenodisponedeunagramticalibredecontexto)nimedianteanalizadoresdeXML.

LadefinicindeHTMLestenformatoDTD.EsteformatoseutilizaparadefinirlenguajesdelafamiliaSGML.Contienedefinicionesdetodosloselementospermitidos,desusatributosydesujerarqua.Comovimosantes,ladefinicinDTDdellenguajeHTMLnoformaunagramticalibredecontexto.

ExistenalgunasvariacionesdeladefinicinDTD.Elmodoestrictoseajustanicamentealasespecificaciones,perootrosmodosadmitenelmarcadoutilizadoanteriormenteporlosnavegadores.Elobjetivoesmantenerlacompatibilidadconelcontenidomsantiguo.LadefinicinDTDestrictaactualseencuentraenlasiguientepgina:www.w3.org/TR/html4/strict.dtd

Elrboldesalida("rboldeanlisis")estformadoporelementosDOMynodosdeatributo.DOMsonlassiglasde"DocumentObjectModel"(modelodeobjetosdeldocumento).EslapresentacindeobjetosdeldocumentoHTMLylainterfazdeloselementosHTMLparaelmundoexterior,comoJavaScript.LarazdelrboleselobjetoDocument.

ElmodeloDOMguardaunarelacincasideunoaunoconelmarcado.Veamosunejemplodemarcado:

Hello World

ElmarcadoanteriorsetraduciraenelsiguienterboldeDOM:

DTD DE HTML

DOM
http://www.w3.org/TR/html4/strict.dtdhttp://www.w3.org/TR/1998/REC-DOM-Level-1-19981001/level-one-core.html#i-Documenthttp://es.wikipedia.org/wiki/SGML



Figura:rboldeDOMdelmarcadodeejemplo

AligualqueelHTML,laorganizacinW3ChaespecificadoelmodeloDOM.Puedesconsultarloenlapginawww.w3.org/DOM/DOMTR.Esunaespecificacingenricaparalamanipulacindedocumentos.UnmduloespecficodescribeelementosHTMLespecficos.PuedesconsultarlasdefinicionesHTMLenlapginawww.w3.org/TR/2003/RECDOMLevel2HTML20030109/idldefinitions.html.

CuandodigoqueelrbolcontienenodosDOM,quierodecirqueestconstruidoconelementosqueimplementanunadelasinterfacesDOM.Losnavegadoresutilizanimplementacionesconcretasquetienenotrosatributosqueelnavegadorutilizainternamente.

Comovimosenlasseccionesanteriores,ellenguajeHTMLnosepuedeanalizarmediantelosanalizadoresascendentesydescendentesnormales.

Lasrazonesson:

1. lanaturalezapermisivadellenguaje,

2. elhechodequelosnavegadorespresentenunatoleranciaaerrorestradicionalparaadmitircasosbienconocidosdeHTMLnovlido,

3. lanaturalezaiterativadelprocesodeanlisis.Normalmente,elcdigonocambiaduranteelanlisis.Sinembargo,enelcasodelcdigoHTML,lasetiquetasdesecuenciasdecomandosquecontienendocument.writepuedenaadirtokensadicionales,porloqueelprocesodeanlisisllegaamodificarlosdatosdeentrada.

Alnopoderutilizarlastcnicasdeanlisisnormales,losnavegadorescrean

El algoritmo de anlisis
http://www.w3.org/DOM/DOMTRhttp://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/idl-definitions.html



analizadorespersonalizadosparaanalizarelcdigoHTML.

ElalgoritmodeanlisissedescribedeformadetalladaenlaespecificacindeHTML5.Elalgoritmopresentadosfases:latokenizacinylaconstruccindelrbol.

Latokenizacineselanlisislxico,esdecir,elanlisisylaconversinentokensdelosdatosdeentrada.EntrelostokensHTMLseencuentranlasetiquetasiniciales,lasetiquetasfinalesylosvaloresdeatributos.

Eltokenizadorreconoceeltoken,loenvaalconstructordelrbolyconsumeelsiguientecarcterparareconocerelsiguientetoken,yassucesivamentehastallegaralfinaldelosdatos.

Figura:flujodeanlisisdeHTML(tomadodelaespecificacindeHTML5)

ElalgoritmoproduceuntokenHTML.Elalgoritmoseexpresacomounamquinadeestado.Cadaestadoconsumeunoovarioscaracteresdelflujodeentradayactualizaelsiguienteestadodeacuerdoconesoscaracteres.Ladecisinestinfluenciadaporelestadodetokenizacinactualyporelestadodeconstruccindelrbol.Estosignificaqueelmismocarcterconsumidoproducirresultados

El algoritmo de tokenizacin
http://www.whatwg.org/specs/web-apps/current-work/multipage/parsing.html



diferentesparaelsiguienteestadocorrectoenfuncindelestadoactual.Elalgoritmoesdemasiadocomplejoparadescribirloensutotalidad,asqueveremosalgunosejemplossencillosquenosayudarnacomprenderelprincipio.

EjemplobsicodetokenizacindelsiguientecdigoHTML:

Hello world

Elestadoinicialeselde"estadodedatos".Cuandoseencuentraelcarcter.Todosloscaracteresseaadenalnombredelnuevotoken.Ennuestrocaso,elnuevotokenesuntokenhtml.

Alllegaralaetiqueta>,seemiteeltokenactualyelestadocambiaaestadodedatos.Sesiguenlosmismospasosparalaetiqueta.Hastaahora,sehanemitidolasetiquetashtmlybody.Ahoravolvemosalestadodedatos.AlconsumirelcarcterHdeHello world,secreayseemiteuntokendecarcter,yassucesivamentehastallegaralcarcter.Acontinuacin,seemiteeltokendelanuevaetiquetaysevuelvealestadodedatos.Laentradasetratarcomoelcasoanterior.



Figura:tokenizacindelaentradadeejemplo

Cuandosecreaunanalizador,secreaelobjeto"Document".Durantelafasedeconstruccin,semodificaelrboldeDOMqueincluyeelobjeto"Document"ensurazyseaadenelementos.Elconstructordelrbolprocesacadanodoemitidoporeltokenizador.Porcadatoken,laespecificacindefinequelementosdeDOMsonrelevantesyculessedebencrearparaestetoken.AdemsdeaadirsealrboldeDOM,elelementoseaadeaunapiladeelementosabiertos.Estapilapermitecorregirincidenciasdeanidacinydeetiquetasnocerradas.Elalgoritmotambinsedescribecomounamquinadeestado.Losestadossedenominan"modosdeinsercin".

Veamosculseraelprocesodeconstruccindelrbolparalosdatosdeentradadelejemplo:

Hello world

Algoritmo de construccin de rbol



Laentradaalafasedeconstruccindelrbolesunasecuenciadetokensdelafasedetokenizacin.Elprimermodoesel"modoinicial".Siserecibeeltokenhtml,sepasaralmodo"previoahtml"ysevolveraprocesareltokenenesemodo.Estoharqueelelemento"HTMLHtmlElement"secreeyseaadaalobjetoraz"Document".

Elestadocambiara"antesdelencabezado".Recibimoseltoken"body".Secrearimplcitamenteunelemento"HTMLHeadElement",aunquenotengamosningntoken"head",yeseelementoseaadiralrbol.

Ahorapasamosalmodo"enelencabezado"y,acontinuacin,almodo"despusdelencabezado".Eltokendelcuerposevuelveaprocesar,secreayseinsertaunelemento"HTMLBodyElement"y,porltimo,elmodopasaa"enelcuerpo".

Acontinuacin,serecibenlostokensdeloscaracteresdelacadena"Helloworld".Elprimeroharquesecreeyseinserteelnodo"Text",alqueseaadirelrestodecaracteres.

Larecepcindeltokendefinalizacindelcuerpoprovocarunatransferenciaalmodo"despusdelcuerpo".Acontinuacin,serecibirlaetiquetaHTMLfinal,queharquesepasealmododespusdelcuerpo.Cuandoserecibaelfinaldeltokendelarchivo,alanlisisfinalizar.



Figura:construccinderboldelcdigoHTMLdeejemplo

Enestafase,elnavegadormarcareldocumentocomointeractivoyempezara

Acciones al finalizar el anlisis



analizarlassecuenciasdecomandosqueseencuentrenenmodo"aplazado",esdecir,aquellasquesedebenejecutarunavezquesehaanalizadoeldocumento.Acontinuacin,elestadodeldocumentoseestablecercomo"completado"yseactivaruneventode"carga".

SepuedenverlosalgoritmoscompletosparatokenizacinylaconstruccindelrbolenlaespecificacindeHTML5.

Nuncaseobtieneunerrorpor"sintaxisnovlida"enunapginaHTML.Losnavegadorescorrigenelcontenidonovlidoysiguen.

TomemosestecdigoHTMLcomoejemplo:

Really lousy HTML

Hedebidodeinfringirunmillndereglas("mytag"noesunaetiquetaestndar,loselementos"p"y"div"estnmalanidados,etc.),peroelnavegadorsiguemostrndolocorrectamenteynomuestraningnerror.Porlotanto,unagranpartedelcdigodelanalizadorcorrigeloserroresdelautordecontenidoHTML.

Lagestindeerroresesbastanteconsistenteenlosnavegadores,perolomsincrebleesquenoformapartedelaespecificacinactualdeHTML.Aligualquelosmarcadoresylosbotonesdeavanceyretroceso,esalgoquesehaidodesarrollandoalolargodelosaos.HayalgunasconstruccionesHTMLconocidasquenosonvlidasyqueserepitenenmuchossitios.Losnavegadoresintentancorregirlasdeacuerdoconotrosnavegadores.

Encambio,enlaespecificacindeHTML5ssedefinenalgunosdeestosrequisitos.WebKitloresumeenelcomentarioqueseencuentraalprincipiodelaclasedeanalizadordeHTML.

Tolerancia a errores de los navegadores
http://www.w3.org/TR/html5/syntax.html#html-parser



VeamosalgunosejemplosdetoleranciaaerroresdeWebKit:

Algunossitiosutilizanenlugarde
.ParapodersercompatibleconInternetExploreryFirefox,WebKittratalaetiquetacomosifuera
.Cdigo:

if (t->isCloseTag(brTag) && m_document->inCompatMode()) { reportError(MalformedBRError); t->beginTag = true;}

Nota:loserroressegestionandeformainterna,esdecir,nosemuestranalusuario.

Elanalizadoranalizalaentradatokenizadaylaconvierteeneldocumento,loquecreaelrboldeldocumento.Sieldocumentoestbienconstruido,elanlisisresultasencillo.

Lamentablemente,debemostratarconmuchosdocumentosHTMLquenoestnbienconstruidos,porloqueelanalizadordebesertoleranteconestoserrores.

Sedebetenercuidado,comomnimo,conlossiguienteserrores:

1. Elelementoquesedebeaadirestprohibidoexplcitamenteenalgunaetiquetaexterna.Enestecaso,debemoscerrartodaslasetiquetashastallegaralaqueprohbeelelementoyaadirloacontinuacin.

2. Noestpermitidoaadirelelementodirectamente.Esposiblequeelautordeldocumentohayaolvidadoincluirunaetiquetaenmedio(oquelaetiquetaseaopcional).Estepodraserelcasodeestasetiquetas:HTMLHEADBODYTBODYTRTDLI(heolvidadoalguna?).

3. Sequiereaadirunelementodebloquedentrodeunelementointegrado.Hayquecerrartodosloselementosintegradoshastallegaralsiguienteelementodebloquesuperior.

4. Siestonofunciona,sedebencerrarelementoshastaquesepuedaaadirelelementooignorarlaetiqueta.

en lugar de

Tabla perdida



Unatablaperdidaesunatablaincluidaenelcontenidodeotratabla,peronoenunacelda.Ejemplo:

inner table outer table

WebKitcambiarlajerarquadedostablassecundarias:

outer table inner table

Cdigo:

if (m_inStrayTableContent && localName == tableTag) popBlock(tableTag);

WebKitutilizaunapilaparaelcontenidodelelementoactualysacalatablainternadelapiladelatablaexterna.Lastablasseencontrarnenelmismoniveldelajerarqua.

Sielusuarioincluyeunformulariodentrodeotro,elsegundoseignorar.Cdigo:

if (!m_currentFormElement) { m_currentFormElement = new HTMLFormElement(formTag, m_document);}

Elementos de un formulario anidado



Elcomentariohablaporssolo.

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;}

Denuevo,elcomentariohablaporssolo.

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

Asqueyasabis:amenosquequerisaparecercomoejemploenunfragmentodecdigodetoleranciaaerroresdeWebKit,escribidelcdigoHTMLcorrectamente.

Jerarqua de etiquetas demasiado profunda

www.liceo.edu.mxesunejemplodeunsitioconunniveldeanidamientodeunas1.500etiquetas,todasellasprocedentesdeunaseriedeetiquetass.Nosepermiteutilizarmsde20etiquetasanidadasdelmismotipo.Apartirdeesenmero,seignorantodas.

Etiquetas finales de cuerpo o HTML colocadas incorrectamente

SetoleraqueHTMLserompatotalmente.Nuncacerramoslaetiquetadelcuerpo(body),yaquealgunaspginaswebcometenelerrordecerrarlaantesdequehayaacabadoeldocumento.Poreso,nosfijamosenlallamada"end()"paracerrarelementos.



Osacordisdelosconceptosdeanlisisquevimosenlaintroduccin?AdiferenciadellenguajeHTML,CSStieneunagramticalibredecontextoysepuedeanalizarconlostiposdeanalizadoresdescritosenlaintroduccin.Dehecho,laespecificacindellenguajeCSSdefinesugramticasintcticaylxica.

Veamosalgunosejemplos:Lagramticalxica(elvocabulario)sedefinemedianteexpresionesregularesparacadatoken:

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"eselidentificadordeunelemento(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

Anlisis de CSS
http://www.w3.org/TR/CSS2/grammar.html



: '[' S* IDENT S* [ [ '=' | INCLUDES | DASHMATCH ] S* [ IDENT | STRING ] S* ] ']' ;pseudo : ':' [ IDENT | FUNCTION S* [IDENT S*] ')' ] ;

Explicacin:unconjuntodereglasesunaestructuracomolaquesemuestraacontinuacin.

div.error , a.error { color:red; font-weight:bold;}

"div.error"y"a.error"sonselectores.Laparteentrellavescontienelasreglasqueseaplicanaesteconjuntodereglas.Estaestructurasedefineformalmenteenestadefinicin:

ruleset : selector [ ',' S* selector ]* '{' S* declaration [ ';' S* declaration ]* '}' S* ;

Estosignificaqueunconjuntodereglasesunselectorounnmeroopcionaldeselectoresseparadosporunacomayporespacios(Ssignificaespacioenblanco).Unconjuntodereglascontieneunadeclaracinentrellavesu,opcionalmente,unaseriededeclaracionesseparadasporpuntoycoma."declaration"y"selector"sedefinirnenlassiguientesdefinicionesdeBNF.

WebKitutilizageneradoresdeanalizadoresFlexyBisonparacrearanalizadoresautomticamenteapartirdelosarchivosdegramticadeCSS.Comoyadijimosenlaintroduccinalosanalizadores,Bisoncreaunanalizadorascendentededesplazamientoreduccin.Firefoxutilizaunanalizadordescendenteescritomanualmente.Enamboscasos,losarchivosCSSseanalizanyseconviertenenobjetos"StyleSheet",cadaunodeloscualescontienereglasdeCSS.Losobjetosde

Analizador de CSS de WebKit



regladeCSScontienenobjetosdedeclaracionesyselectores,ascomootrosobjetosrelacionadosconlagramticadeCSS.

Figura:anlisisdeCSS

ElmodelodelaWebessncrono.Losautoresesperanquelassecuenciasdecomandosseanalicenyseejecuteninmediatamentecuandoelanalizadorllegaalaetiqueta.Elanlisisdeldocumentosedetienehastaquelasecuenciadecomandosseejecuta.Lasecuenciadecomandosesexterna,porloqueantesesnecesariorecuperarelrecursodelared.Estaaccinserealizatambindeunaformasncrona,esdecir,queelanlisissedetienehastaqueserecuperaelrecurso.EstemodeloseutilizdurantemuchosaosyestincluidoenlasespecificacionesdeHTML4y5.Losautorespuedenmarcarlasecuenciadecomandoscomo"aplazada".Deesemodo,nosedetieneelanlisisdeldocumentoylasecuenciaseejecutaunavezquesehacompletadoelanlisis.HTML5aadeunaopcinquepermitemarcarlasecuenciadecomandoscomoasncronaparaque

Orden de procesamiento de secuencias de comandos yhojas de estilo

Secuencias de comandos



seanaliceyseejecuteenunsubprocesodiferente.

TantoWebKityFirefoxutilizanestaoptimizacin.Alejecutarlassecuenciasdecomandos,otrosubprocesoanalizaelrestodeldocumento,buscaenlaredotrosrecursosnecesariosyloscarga.Deestaforma,losrecursossepuedencargarmedianteconexionesparalelas,loquemejoralavelocidadgeneral.Nota:elanalizadorespeculativonomodificaelrboldeDOM(deesoseencargaelanalizadorprincipal),soloanalizalasreferenciasarecursosexternos,comosecuenciasdecomandosexternas,hojasdeestiloeimgenes.

Lashojasdeestilo,porotrolado,tienenunmodelodiferente.Conceptualmente,pareceque,dadoquelashojasdeestilonomodificanelrboldeDOM,nohayraznparaesperarlasydetenerelanlisisdeldocumento.Sinembargo,seproduceunaincidenciacuandolassecuenciasdecomandossolicitaninformacindeestilodurantelafasedeanlisisdeldocumento.Sielestiloannosehacargadonianalizado,lasecuenciadecomandosobtendrrespuestasincorrectasy,aparentemente,estocausarmuchascomplicaciones.Parecequesetratadeuncasoextremo,peroesbastantecomn.Firefoxbloqueatodaslassecuenciasdecomandossitodavaseestcargandoyanalizandounahojadeestilo.WebKitbloquealassecuenciasdecomandossolocuandointentanaccederadeterminadaspropiedadesdeestiloquesepuedenverafectadasporlashojasdeestilodescargadas.

MientrasseestconstruyendoelrbolDOM,elnavegadorconstruyeotrorbol:elrbolderenderizacin.Esterbolestformadoporelementosvisualesquesemuestranenelmismoordenenqueaparecern.Eslarepresentacinvisualdeldocumento.Elpropsitodeesterbolespoderrepresentarelcontenidoenelordencorrecto.

Firefoxdenominaaloselementosdelrbolderenderizacin"marcos"(o"frames").WebKitutilizaeltrmino"renderizador"u"objetoderenderizacin"(o"render").Unrenderizadorescapazderepresentarseasmismoyasuselementossecundarios.

Anlisis especulativo

Hojas de estilo

Construccin del rbol de renderizacin



Laclase"RenderObject"deWebKit,laclasebsicadelosrenderizadores,tienelasiguientedefinicin:

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}

CadarenderizadorrepresentaunrearectangularquenormalmentesecorrespondeconlacajadeCSSdelnodo,segnsedescribeenlaespecificacindeCSS2.Contieneinformacingeomtricacomoelancho,laalturaylaposicin.Eltipodecajaseveafectadoporelatributodeestilo"display"relevanteparaelnodo(consultalaseccinComputacindeestilos).EsteeselcdigodeWebKitqueseutilizaparadecidirqutipoderenderizadorsedebecrearparaunnodoDOM,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;



... }

return o;}

Eltipodeelementotambinsetieneencuenta.Porejemplo,lastablasyloscontrolesdelosformulariostienenmarcosespeciales.EnWebKit,siunelementoquierecrearunrenderizadorespecial,sobrescribeelmtodocreateRenderer.Losrenderizadoresapuntanaobjetosdeestiloquecontienenlainformacinnogeomtrica.

LosrenderizadorescorrespondenaelementosDOM,perolarelacinnoesdeunoauno.LoselementosDOMnovisualesnoseinsertanenelrbolderenderizacin.Unejemploseraelelemento"head".Loselementoscuyoatributodevisualizacinsehaasignadoa"none"tampocoaparecenenelrbol(loselementosconelatributodevisibilidad"hidden"saparecenenelrbol).

AlgunoselementosDOMcorrespondenavariosobjetosvisuales.Estossuelenserelementosconunaestructuracomplejaquenosepuedendescribirenunsolorectngulo.Porejemplo,elelemento"select"tienetresrenderizadores:unoparaelreadevisualizacin,otroparaelcuadrodelistadesplegableyotroparaelbotn.Adems,cuandoeltextosedivideenvariaslneasporqueelanchonoessuficienteparaunalnea,lasnuevaslneasseaadencomorenderizadoresadicionales.OtroejemploconvariosrenderizadoresserauncdigoHTMLroto.SegnlaespecificacindeCSS,unelementointegradodebecontenernicamenteelementosdebloqueoelementosintegrados.Sielcontenidoesmixto,secreanrenderizadoresdebloquesannimosparaincluirloselementosintegrados.

AlgunosobjetosderenderizacincorrespondenaunnodoDOMdeunlugardelrboldiferente.Loselementosflotantesyaquellosconposicinabsolutaquedanfueradelflujo,enunlugardiferentedelrbolyasignadosalmarcoreal.Deberanhaberestadoenunmarcodemarcador.

Relacin del rbol de renderizacin con el rbol de DOM



Figura:elrbolrenderizadoryelrboldeDOMcorrespondiente(3.1)La"ventanagrfica"eselbloquecontenedorinicial.EnWebKit,

serelobjeto"RenderView".

EnFirefox,lapresentacinseregistracomoundetectordeactualizacionesdeDOM.LapresentacindelegalacreacindemarcosenFrameConstructoryelconstructorresuelveelestilo(consultalaseccinComputacindeestilos)ycreaunmarco.

EnWebKit,elprocesopararesolverelestiloycrearunrenderizadorsedenomina"asociacin".CadanodoDOMdisponedeunmtodode"asociacin".Elprocesodeasociacinessncrono,esdecir,quelainsercindenodosenelrboldeDOMactivaelmtodode"asociacin"delnuevonodo.

Alprocesarlasetiquetas"html"y"body",seconstruyelarazdelrbolderenderizacin.ElobjetoderenderizacinrazsecorrespondeconloquelaespecificacindeCSSdenomina"bloquecontenedor",esdecir,elbloquesuperiorquecontieneelrestodelosbloques.Susdimensionessecorrespondenconlaventanagrfica,esdecir,conlasdimensionesdelreadevisualizacindelaventanadelnavegador.FirefoxlodenominaViewPortFrameyWebKitRenderView.

El flujo de construccin del rbol



Esteeselobjetoderenderizacinalqueapuntaeldocumento.ElrestodelrbolseconstruyecomounainsercindenodosDOM.

ConsultalaespecificacindeCSS2enelmodelodeprocesamiento.

Paracrearelrbolderenderizacin,esnecesariocalcularlaspropiedadesvisualesdecadaunodelosobjetosderenderizacin.Parahacerlo,hayquecalcularlaspropiedadesdeestilodecadaelemento.

Elestiloincluyehojasdeestilodevariosorgenes,elementosdeestilointegradosypropiedadesvisualesenelcdigoHTML(comolapropiedad"bgcolor").EstasltimassetransformanenlaspropiedadesdeestilodeCSScorrespondientes.

Losorgenesdelashojasdeestilosonlashojasdeestilopredeterminadasdelnavegador,lasproporcionadasporelautordelapginaylasproporcionadasporelusuariodelnavegador(losnavegadorespermitenalusuariodefinirsuestilofavorito.EnFirefox,porejemplo,sepuedehacercolocandounahojadeestiloenlacarpetadeperfilesdelnavegador).

Lacomputacindeestilosconllevaalgunasdificultades:

1. Alcontenerlasnumerosaspropiedadesdelosestilos,losdatosdeestilolleganaalcanzarunasdimensionesconsiderables,loquepuedeprovocarunusoexcesivodememoria.

2. Labsquedadelasreglascoincidentesdecadaelementopuedeafectaralrendimientosinoseoptimizaelproceso.Recorrerlalistacompletadereglasdecadaelementoparaencontrarcoincidenciasesunatareamuypesada.Losselectorespuedentenerunaestructuracompleja,loquepuedehacerqueseempieceabuscarenunarutaqueaparentementeseabuena,peroquefinalmentenoseaasysedebaprobarconotraruta.

Pongamoscomoejemploesteselectorcomplejo:

div div div div{ ...}

Significaquelasreglasseaplicanaunelementoqueesel

Computacin de estilos
http://www.w3.org/TR/CSS21/intro.html#processing-model



descendientedetreselementos"div".Supongamosquequierescomprobarsilareglaseaplicaaunelementodeterminado.Debesseleccionarunarutasuperiordelrbolparacomprobarlo.Esposiblequedebasascenderportodoelrboldenodossoloparaaveriguarquenicamenteexistendoselementos"div"yquelareglanoseaplica.Acontinuacin,debesprobarconotrasrutasdelrbol.

3. Paraaplicarlasreglas,esnecesarioutilizarreglasencascadabastantecomplejasquedefinenlajerarquadelasreglas.

Veamoscmoseenfrentanlosnavegadoresaestasdificultades:

LosnodosdeWebKithacenreferencialosobjetosdeestilo(RenderStyle).Losnodospuedencompartirestosobjetosenalgunascircunstancias.Losnodossondelmismonivel,yapertenezcanalmismonodoprincipaloaotronododelmismonivelqueeste,y:

1. Loselementosdebentenerelmismoestadoderatn(porejemplo,unonopuedeestaren":hover"yelotroenotroestado).

2. Ningunodeloselementosdebetenerunidentificador.

3. Losnombresdelasetiquetasdebencoincidir.

4. Losatributosdeclasedebencoincidir.

5. Elconjuntodeatributosasignadosdebeseridntico.

6. Losestadosdeenlacedebencoincidir.

7. Losestadosdeenfoquedebencoincidir.

8. Ningnelementosedebeverafectadoporselectoresdeatributos,esdecir,nodebepresentarningunacoincidenciaconningnselectorqueutiliceunselectordeatributoenningunaposicindentrodelselector.

9. Nodebehaberningnatributodeestilointegradoenloselementos.

10. Nodebehaberningnselectordelmismonivelenuso.WebCoresimplementeaplicauncambioglobalsidetectaunselectordelmismoniveleinhabilitalaopcindecompartirestilosentodoeldocumentocuandoestpresente.Estoincluyeelselector+yselectorescomo":firstchild"y":lastchild".

Firefoxcuentacondosrbolesadicionalesparaunacomputacindeestilosms

Datos de estilo compartidos

rbol de reglas de Firefox



sencilla:elrboldereglasyelrboldecontextosdeestilo.WebKittambincuentaconobjetosdeestilo,peronosealmacenanenunrbolcomoelrboldecontextosdeestilo.SoloelnododeDOMindicaelestilopertinente.

Figura:rboldecontextosdeestilo(2.2)

Loscontextosdeestiloincluyenvaloresfinales.Paracomputarlosvalores,seaplicantodaslasreglasconlasquesehayanencontradocoincidenciasenelordencorrectoyserealizanmanipulacionesquetransformanlosvaloreslgicosenconcretos.Porejemplo,sielvalorlgicoesunporcentajedelapantalla,secalcularysetransformarenunidadesabsolutas.Laideadelrboldereglasesmuyingeniosa,yaquepermitecompartirestosvaloresentrenodosparaevitarquesevuelvanacomputar.Adems,ahorraespacio.

Todaslasreglasconlasqueseencuentraalgunacoincidenciasealmacenanenunrbol.Losnodosinferioresdeunarutatienenmayorprioridad.Elrbolincluyetodaslasrutasdelascoincidenciasquesehanencontradoparaunaregla.Lasreglassealmacenanlentamente.Elrbolnosecomputaalprincipiodecadanodo,perosiemprequesedebecomputarelestilodeunnodo,lasrutasseaadenalrbol.

Laideaesquelasrutasdelrbolsemuestrencomolaspalabrasdeunlexicn.



Imaginemos,porejemplo,queyahemoscomputadoesterboldereglas:

Supongamosquenecesitamosencontrarcoincidenciasparareglasdeotroselementosdelrboldecontenidoyobtenemoslassiguientesreglas(enelordencorrecto):BEI.YatenamosestarutadelrbolporqueyahabamoscomputadolarutaABEIL,porloqueahoratendremosmenostrabajoquehacer.

Vamosacomprobarcmoguardaelrbolnuestrotrabajo.

Loscontextosdeestilosedividenenestructurasqueincluyeninformacindeestilodeunaciertacategora,comoelbordeoelcolor.Todaslaspropiedadesdeunestructurapuedenserheredadasonoheredadas.Laspropiedadesheredadassonpropiedadesque,amenosquelasdefinaelelemento,seheredandelelementoprincipal.Laspropiedadesnoheredadas(denominadaspropiedades"reset")utilizanlosvalorespredeterminadosencasodequenosedefinan.

Elrbolguardaencachestructurascompletas(queincluyenlosvaloresfinalescomputados)delrbol.Deesaforma,sielnodoinferiornoproporcionaunadefinicinparaunaestructura,sepuedeutilizarunaestructuraguardadaencachdeunnodosuperior.

Cuandosecomputaelcontextodeestilodeunelementoespecfico,primerosecomputaunarutadelrboldereglasoseutilizaunaexistente.Acontinuacin,seaplicanlasreglasdelarutaparacompletarlasestructurasdelnuevocontextodeestilo.Empezamosporelnodoinferiordelaruta,esdecir,elnododemayor

Divisin en estructuras

Cmo computar los contextos de estilo con el rbol de reglas



prioridad(normalmenteelselectormsespecfico),yrecorremoselrbolensentidoascendentehastacompletarlaestructura.Siestenododereglasnoincluyeningunaespecificacinparalaestructura,podemosoptimizarloconsiderablemente(lamejorformaesrecorrerelrbolensentidoascendentehastaencontrarunnodoqueincluyaunaespecificacincompletayapuntardespusaestenodo)ycompartirlaestructuracompleta.Graciasaestemtodoahorramosvaloresfinalesymemoria.Siencontramosdefinicionesparciales,recorremoselrbolensentidoascendentehastacompletarlaestructura.

Sinoencontramosdefinicionesparalaestructura,encasodequeestaseadetipo"heredada",apuntamosalaestructuradelelementoprincipaldelrboldecontextos.Enestecaso,tambinconseguimoscompartirlasestructuras.Silaestructuraesdetipo"noheredada",seutilizarnlosvalorespredeterminados.

Sielnodomsespecficonoaadevalores,tendremosqueefectuarclculosadicionalesparatransformarlosenvaloresreales.Posteriormente,almacenamosencachenelrbolelresultadodelnodoparaquesepuedautilizarcomoelementosecundario.

Encasodequeunelementotengaunelementodesumismonivelqueapuntealmismonododelrbol,amboselementospuedencompartirelcontextodeestilocompleto.

Veamosunejemplo.SupongamosquetenemoselsiguientecdigoHTML:

this is a big error this is also a very big error error
another error
Ylassiguientesreglas:



1. div {margin:5px;color:black}2. .err {color:red}3. .big {margin-top:3px}4. div span {margin-bottom:4px}5. #div1 {color:blue}6. #div2 {color:green}

Parasimplificarlatarea,digamosquetenemosquecompletarsolodosestructuras:laestructuradecolorylaestructurademargen.Laestructuradecolorsolocontieneunmiembro,elcolor,mientrasquelaestructurademargencontieneloscuatrolados.Elrboldereglasqueseobtienetendrlasiguienteapariencia(losnodossemarcanas:"nombredelnodo:nmerodelareglaalaqueapunta"):

Figura:rboldereglas

Elrboldecontextostendrlasiguienteapariencia(nombredelnodo:nododereglaalaqueapunta):



Figura:rboldecontextos

SupongamosqueanalizamoselcdigoHTMLyobtenemoslasegundaetiqueta.Tendremosquecrearuncontextodeestiloparaelnodoycompletarsusestructurasdeestilo.Buscamoslasreglasquecoincidanconydescubrimosqueson1,2y6.Estosignificaqueyaexisteunarutadelrbolquepodemosutilizarparanuestroelemento,porloquesolonecesitamosaadirotronodoparalaregla6(nodoFdelrboldereglas).Crearemosuncontextodeestiloyloincluiremosenelrboldecontextos.ElnuevocontextodeestiloapuntaralnodoFdelrboldereglas.

Ahoranecesitamoscompletarlasestructurasdeestilo.Empezaremoscompletandolaestructurademargen.Comoelltimonododeregla(F)noseaadealaestructurademargen,podemosascenderporelrbolhastaencontrarunaestructuraalmacenadaencachcomputadaenlainsercindeunnodoanterioryutilizarla.EncontraremosestaestructuraenelnodoB,queeselnododenivelmssuperiorqueespecificareglasdemargen.

Yatenemosunadefinicinparalaestructuradecolor,porloquenopodemosutilizarunaestructuraalmacenadaencach.Comoelcolortieneunatributo,nonecesitamosascenderporelrbolparacompletarotrosatributos.Computamoselvalorfinal(convertimoslacadenaaRGB,etc.)yalmacenamosencachenestenodolaestructuracomputada.

Eltrabajorelacionadoconelelementoesanmssencillo.Buscamoslas



reglasquecoincidenconesteelementoyllegamosalaconclusindequelareglaalaqueapuntaesG,comoelelemento"span"anterior.Comotenemoselementosdelmismonivelqueapuntanalmismonodo,podemoscompartirelcontextodeestilocompletoyapuntarsoloalcontextodelelemento"span"anterior.

Enelcasodelasestructurasqueincluyenreglasheredadasdelelementoprincipal,elprocesodealmacenamientoencachsellevaacaboenelrboldecontextos(aunquelapropiedaddecolorsehereda,Firefoxtrataestapropiedadcomonoheredadaylaguardaencachenelrboldereglas).Porejemplo,imaginemosqueaadimosreglasparalasfuentesdeunpargrafo:

p {font-family:Verdana;font size:10px;font-weight:bold}

Elelementodeprrafo,queesunelementosecundariodelelemento"div"delrboldecontextos,podracompartirlamismaestructuradefuentequeelelementoprincipal.Estecasosepodraaplicarsinoseespecificasenreglasdefuenteparaelprrafo.

EnWebKit,noexistenlosrbolesdereglas,porloquelasdeclaracionesquecoincidenserecorrencuatroveces.Enprimerlugar,seaplicanlaspropiedadesdealtaprioridaddemenorimportancia(estaspropiedadessedebenaplicarprimeroporquehayotrasquedependendeellas,como"display")acontinuacin,seaplicanlaspropiedadesdealtaprioridaddemayorimportanciaposteriormente,laspropiedadesdeprioridadnormaldemenorimportanciay,porltimo,lasreglasdeprioridadnormaldemayorimportancia.Estosignificaquelaspropiedadesqueaparezcanvariasvecesseresolvernsegnelordendecascadacorrecto.Laltimaeslamsimportante.

Enresumen,compartirobjetosdeestilo(yaseaensutotalidadocompartiendosolamentealgunasdesusestructuras)solucionalasincidencias1y3.ElrboldereglasdeFirefoxtambinayudaaaplicarlaspropiedadesenelordencorrecto.

Acontinuacinsemuestranlasdistintasfuentesdereglasdelosmodificadoresdeestilo.

ReglasdeCSS,tantoenhojasdeestilointernascomoenelementosdeestilo:

Cmo manipular las reglas para obtener coincidenciasfcilmente



p {color:blue}

Atributosdeestilointegrados,comoelsiguiente:

AtributosvisualesHTML(queseasignanareglasdeestilorelevantes):

Lasdosltimasfuentescoincidenfcilmenteconelelemento,yaqueesteincluyelosatributosdeestilo,ylosatributosHTMLsepuedenasignarutilizandoelelementocomoclave.

Comosecomentpreviamenteenlaincidencia2,buscarunacoincidenciaconlaregladeCSSpuederesultarbastantecomplicado.Pararesolverestadificultad,lasreglassemanipulanparafacilitarelacceso.

Despusdeanalizarlahojadeestilo,lasreglasseaadenaunodevariosmapashash,deacuerdoconelselector.ExistenmapasorganizadosporID,nombredeclaseynombredeetiqueta,yunmapageneralparatodoloquenosepuedeincluirenestascategoras.SielselectoresunID,lareglaseaadiralmapadeIDsiesunaclase,seaadiralmapadeclase,etc.Estamanipulacinfacilitaconsiderablementelatareadeasignacindereglas.Nohacefaltarevisarcadadeclaracin,podemosextraerlasreglasrelevantesparaunelementodelosmapas.Estaoptimizacineliminamsdel95%delasreglas,porloquenisiquieraesnecesariotenerlasencuentaduranteelprocesodebsquedadecoincidencias(4.1).

Analicemoslasreglasdeestiloqueseincluyenacontinuacin:

p.error {color:red}#messageDiv {height:50px}div {margin:5px}



Laprimerareglaseinsertarenelmapadeclase,lasegundaenelmapadeIDylaterceraenelmapadeetiquetas.ParaelsiguientefragmentodeHTML:

an error occurred
this is a message
Enprimerlugar,intentaremosbuscarreglasparaelelemento"p".Elmapadeclaseincluirunaclave"error"dentrodelaqueseencuentralareglapara"p.error".Elelemento"div"tendrreglasrelevantesenelmapadeID(laclaveeselID)yelmapadeetiqueta.Portanto,soloquedaaveriguarqureglasextradasdelasclavesrealmentecoinciden.Porejemplo,silaregladelelemento"div"fueralasiguiente:

table div {margin:5px}

seextraeradelmapadeetiqueta,porquelaclaveeselselectorsituadomsaladerecha,peronocoincidiraconelelemento"div",quenocuentaconunantecesordetabla.

TantoWebKitcomoFirefoxutilizanestamanipulacin.

Elobjetodeestilotienepropiedadesquesecorrespondenconcadaatributovisual(todoslosatributosCSS,peromsgenricos).Siningunadelasreglasquecoincidendefinelapropiedad,algunaspropiedadessepuedenheredardelelementoprincipaldelobjetodeestilo.Otraspropiedadestienenvalorespredeterminados.

Laincidenciaseproducecuandoexistemsdeunadefinicin,yesentoncescuandosedebeutilizarelordenencascadapararesolverla.

Unadeclaracindeunapropiedaddeestilopuedeaparecerenvariashojasdeestiloyvariasvecesdentrodeunamismahoja.Poresemotivo,elordendeaplicacindelasreglastieneunagranimportancia.Esteordenseconocecomo"cascada".DeacuerdoconlasespecificacionesdeCSS2,elordenencascadaeselsiguiente(de

Cmo aplicar las reglas en el orden de cascada correcto

Orden en cascada de la hoja de estilo



menoramayor):

1. declaracionesdelnavegador,

2. declaracionesnormalesdelusuario,

3. declaracionesnormalesdelautor,

4. declaracionesimportantesdelautor,

5. declaracionesimportantesdelusuario.

Lasdeclaracionesdelnavegadorsonlasquetienenmenosimportanciaylasdelusuariosolotienenprioridadsobrelasdelautorsiestnmarcadascomoimportantes.Lasdeclaracionesconelmismoordenseordenansegnlaespecificidady,posteriormente,segnelordenenelquesehanespecificado.LosatributosvisualesHTMLsetraducenenlasdeclaracionesCSScorrespondientes.Setratancomoreglasdeautordeprioridadbaja.

LaespecificacindeCSS2definelaespecificidaddelselectorcomoseindicaacontinuacin:

"1"siladeclaracinesdeunatributo"style"enlugardeunareglaconunselectorencasocontrario,"0"(=a),

nmerodeatributosdeIDdelselector(=b),

nmerodeotrosatributosypseudoclasesdelselector(=c),

nmerodenombresdeelementosydepseudoelementosdelselector(=d).

Laespecificidadseobtienealconcatenarloscuatronmerosabcd(enunsistemadenmerosdebaseamplia).

Labasenumricaquesedebeutilizareselnmeroderecuentomselevadodeunadelascategoras.Porejemplo,sia=14,sepuedeutilizarunabasehexadecimal.Enelimprobablecasodequea=17,sedeberutilizarunabasenumricade17dgitos.Elltimocasoseraeldeunselectorcomohtmlbodydivdivp...con17etiquetasenelselector,peroestoesmuypocoprobable.

Algunosejemplos:

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

Especificidad
http://www.w3.org/TR/CSS2/cascade.html#specificity



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 */

Despusdebuscarcoincidencias,lasreglasseordenansegnlasreglasdecascada.WebKitutilizaelordenamientodeburbujaparalistaspequeasyelordenamientopormezclaparalistasgrandes.WebKitordenalasreglassobrescribiendoeloperador">"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;}

WebKitutilizaunindicadorquemuestrasisehancargadotodaslashojasdeestilodenivelsuperior(incluidaslasde@imports).Silashojasdeestilonosecarganporcompletoalasociarlas,seutilizanmarcadoresdeposicin(indicndoloeneldocumento),quesevuelvenacalcularunavezquesehancargadolashojasdeestilo.

Cmo ordenar las reglas

Proceso gradual



Cuandoelrenderizadorsecreayseaadealrbol,notieneposicinnitamao.Elclculodeestosvaloresseconocecomodiseooreflujo.

HTMLutilizaunmodelodediseobasadoenflujo,loquesignificaque,lamayoradelasveces,losclculosgeomtricossepuedenrealizarconunasolaoperacin.Loselementosqueentranposteriormente"enelflujo"nosueleninfluirenlageometradeloselementosqueyaseencuentranenl,porloqueeldiseosepuedeaplicardeizquierdaaderechaydearribaaabajoentodoeldocumento.Hayexcepciones,comolastablasHTML,quepuedenrequerirmsdeunclculo(3.5).

Elsistemadecoordenadasserefierealmarcoraz.Seutilizanlascoordenadassuperioreizquierda.

Eldiseoconsisteenunprocesorecurrente.Seiniciaenelrenderizadorraz,quecorrespondealelementodeldocumentoHTML.Eldiseoseaplicadeformarecurrenteatravsdetodalajerarquademarcosodeunapartedeella,calculandoinformacingeomtricaparacadarenderizadorquelorequiere.

Laposicindelrenderizadorrazes0,0ysudimensineslaventanagrfica,esdecir,lapartevisibledelaventanadelnavegador.

Todoslosrenderizadoresincluyenunmtodode"diseo"ode"reflujo"ycadaunoactivaelmtododediseodelelementosecundarioalquesedebeaplicareldiseo.

Paranoiniciarunprocesodediseocompletoconcadapequeamodificacin,elnavegadorutilizaunsistemadebitdemodificacin(dirtybit).Cuandoseaadeosemodificaunrenderizador,tantoelpropiorenderizadorcomosuelementosecundariosemarcanconelindicador"dirty",loquesignificaquesedebensometeraunprocesodediseo.

Existendosindicadores:"dirty"y"childrenaredirty".Elindicador"childrenaredirty"especificaque,aunqueelrenderizadornohayasufridocambios,almenosunodesuselementossecundariosnecesitasometerseaunprocesodediseo.

Elprocesodediseosepuedeactivarentodoelrbolderenderizacin,loquese

Diseo

Sistema de bit de modificacin (dirty bit)

Diseo global e incremental



conocecomodiseo"global".Acontinuacinseindicanalgunosmotivosporlosquepuedesernecesarioundiseoglobal:

1. uncambiodeestiloglobalqueafecteatodoslosrenderizadores,comouncambiodetamaodefuente,

2. uncambiodetamaodelapantalla.

Eldiseopuedeserincremental,encuyocasosolosesometernaunprocesodediseolosrenderizadoresmarcadoscomo"dirty"(estehechopuedeprovocardaosquepuedenrequerirprocesosdediseoadicionales).Cuandolosrenderizadoresestnmarcadoscomo"dirty",seactiva(deformaasncrona)eldiseoincremental(porejemplo,cuandoseaadenrenderizadoresnuevosalrbolderenderizacindespusdeincluircontenidoadicionaldelaredenelrboldeDOM).

Figura:diseoincrementalenelquesolosesometenaunprocesodediseolosrenderizadoresmodificadosysuselementos

secundarios(3.6)

Eldiseoincrementalseefectadeformaasncrona.Firefoxalmacena"comandosdereflujo"paralosdiseosincrementalesyunprogramadoractivalaejecucinenlotedeestoscomandos.WebKittambinincluyeuntemporizadorqueejecutael

Diseo asncrono y sncrono



diseoincremental(serecorreelrbolyseaplicadiseoalosrenderizadoresmarcadoscomo"dirty").Lassecuenciasdecomandosquesolicitaninformacindeestilo,como"offsetHeight",puedenactivareldiseoincrementaldeformasncrona.Eldiseoglobalsesueleactivardeformasncrona.Aveces,eldiseoseactivacomounadevolucindellamadaposterioraundiseoinicialdebidoaloscambiosquesufrenalgunosatributos,comolaposicindedesplazamiento.

Cuandoseactivaunprocesodediseoporun"cambiodetamao"oporuncambioenlaposicindelrenderizador(noensutamao),eltamaodelosrenderizadoressetomadeunacachenlugarderecalcularse.Enalgunoscasos,solosemodificaunsubrbol,porloqueelprocesodediseonoseiniciadesdelaraz.Estopuedesucederenaquelloscasosenlosqueelcambioeslocalynoafectaaloselementosquelorodean,comoeltextoinsertadoencamposdetexto(delocontrario,cadateclaactivaraundiseodesdelaraz).

Elprocesodediseosueleseguirelpatrnqueseindicaacontinuacin:

1. Elrenderizadorprincipaldeterminasupropioancho.

2. Elrenderizadorprincipalanalizaloselementossecundariosy:

1. Sitaelrenderizadorsecundario(establecesuvalorxey).

2. Activalaaplicacindeldiseodelrenderizadorsecundarioencasonecesario(siestmarcadocomo"dirty",sisetratadeundiseoglobaloporalgunaotracausa),loquehacequesecalculelaalturadelrenderizadorsecundario.

3. Elrenderizadorprincipalutilizalasalturasacumulativasdeloselementossecundariosylasalturasdelosmrgenesyelrellenoparaestablecersupropiaaltura,queutilizarelelementoprincipaldelrenderizadorprincipal.

4. Estableceelbitdemodificacin(dirtybit)en"false".

Firefoxutilizaunobjeto"state"(nsHTMLReflowState)comoparmetrodediseo(conocidocomo"reflujo").Entreotrosvalores,elobjetodeestadoincluyeelancho

Optimizaciones

El proceso de diseo



deloselementosprincipales.ElresultadodeldiseodeFirefoxesunobjeto"metrics"(nsHTMLReflowMetrics)queincluirlaalturacomputadadelrenderizador.

Elanchodelrenderizadorsecalculautilizandoelanchodelbloquecontenedor,lapropiedaddeestilo"width"delrenderizador,losmrgenesylosbordes.Utilicemosparanuestroejemploelsiguienteelemento"div":

WebKitcalcularasuanchodelasiguienteforma(clase"RenderBox",mtodo"calcWidth"):

Elanchodelcontenedoreselvalormximodelapropiedad"availableWidth"deloscontenedoresy0.Enestecaso,lapropiedad"availableWidth"eslapropiedad"contentWidth",quesecalculaas:

clientWidth() - paddingLeft() - paddingRight()

Laspropiedades"clientWidth"y"clientHeight"representanelinteriordeunobjeto,excluyendoelbordeylabarradedesplazamiento.

Elanchodeloselementoseselatributodeestilo"width",quesecalculacomounvalorabsolutocomputandoelporcentajedelanchodelcontenedor.

Acontinuacin,seaadenelrellenoylosbordeshorizontales.

Hastaahora,hemoscalculadoel"anchopreferente".Ahoravamosacalcularlosanchosmnimoymximo.Sielanchopreferenteessuperioralanchomximo,seutilizaelanchomximo.Si,porelcontrario,esinferioralanchomnimo(launidadindivisiblemspequea),seutilizaelanchomnimo.

Losvaloressealmacenanencachencasodequesenecesiteactivarunprocesodediseosinquevareelancho.

Clculo del ancho

Salto de lnea



Elsaltodelneaseproducecuandounrenderizadordecidequedebeinterrumpirseenmitaddeldiseo.Sedetieneycomunicaelsaltoalrenderizadorprincipal.Elrenderizadorprincipalcrearenderizadoresadicionalesyactivasusprocesosdediseo.

Enlafasedepintura,serecorreelrbolderenderizacinyseactivaelmtodode"pintura"delosrenderizadoresparaquesemuestresucontenidoenlapantalla.Enlafasedepintura,seutilizaelcomponentedeinfraestructuradelainterfaz.

Aligualqueocurreenlafasedediseo,lapinturatambinpuedeserunprocesoglobal(sepintaelrbolderenderizacincompleto)oincremental.Enelcasodelapinturaincremental,algunosdelosrenderizadoressemodificandeunaformaquenoafectaalatotalidaddelrbol.Elrenderizadormodificadoinvalidasurectngulocorrespondienteenlapantalla.Estohacequeelsistemaoperativoconsidereestaregincomomodificadayquegenereuneventode"pintura".Elsistemaoperativofusionaingeniosamentevariasregionesenuna.EnChrome,estaoperacinresultamscomplicada,yaqueelrenderizadorseencuentraenunprocesodiferentealprocesoprincipal.Chromesimulaelcomportamientodelsistemaoperativohastaciertopunto.Lapresentacinescuchaestoseventosydelegaelmensajeenlarazdelarenderizacin.Serecorreelrbolhastallegaralrenderizadorcorrespondiente.Enconsecuencia,sevuelveapintarelrenderizadory,normalmente,suselementossecundarios.

HazclicaquparaconocerelordendelprocesodepinturaenCSS2.Eselordenenelqueseapilanloselementosenloscontextosdepila.Esteordeninfluyeenlapintura,yaquelaspilassepintandeatrshaciadelante.Elordendeapilamientodeunrenderizadordebloqueeselsiguiente:

1. colordefondo,

2. imagendefondo,

3. borde,

4. elementossecundarios,

5. contorno.

Pintura

Global e incremental

Orden del proceso de pintura
http://www.w3.org/TR/CSS21/zindex.html



Firefoxanalizaelrbolderenderizacinycreaunalistadevisualizacinparaelrearectangularpintadaqueincluyelosrenderizadoresrelevantesparaelrearectangularenelordendepinturacorrecto(primerolosfondosdelosrenderizadores,luegolosbordes,etc.).Deestaforma,sisequierevolverapintarelrbol,solosetendrquerecorrerunavez(primerosepintantodoslosfondos,despustodaslasimgenes,acontinuacintodoslosbordes,etc.).

Paraoptimizarelproceso,Firefoxnoaadeelementosquevayanaquedarocultos,comoloselementosquequedantotalmenteocultosbajootroselementosopacos.

Antesdevolverainiciarunprocesodepintura,WebKitguardaelrectnguloantiguocomounmapadebits.Posteriormente,solopintaelreadiferencialexistenteentrelosrectngulosnuevoyantiguo.

Losnavegadoresintentanejecutarlamenorcantidadposibledeaccionescuandoseproduceuncambio.Portanto,siseproducencambiosenelcolordeunelemento,solosevolverapintareseelemento.Siseproducencambiosenlaposicindeunelemento,sevolveradisearyapintareseelemento,suselementossecundariosy,posiblemente,loselementosqueestnasumismonivel.SiseaadeunnodoDOM,seactivarunprocesodediseoydenuevapinturadelnodo.Siseproducencambiosdemayorimportancia,comoelaumentodeltamaodefuentedelelemento"html",seinvalidarnlascachsyseactivarunnuevoprocesodediseoydepinturadelrbolcompleto.

Elmotorderenderizacinsoloconstadeunsubproceso.Casitodaslasoperaciones,exceptolasdered,sedesarrollanenunnicosubproceso.EnFirefoxySafari,eselsubprocesoprincipaldelnavegador.EnChrome,eselsubprocesoprincipaldelprocesodepestaa.Lasoperacionesderedsepuedenrealizarmediantevariossubprocesosparalelos.Elnmerodeconexionesparalelaseslimitado(normalmente,dedosaseisconexiones.Porejemplo,Firefox3utilizaseis).

Lista de visualizacin de Firefox

Almacenamiento de figuras rectangulares de WebKit

Cambios dinmicos

Subprocesos del motor de renderizacin



Elsubprocesoprincipaldelnavegadoresunbucledeeventos,queconsisteenunbucleinfinitoquemantieneactivoelproceso.Esperaaqueseinicieneventos(comolosdediseoypintura)ylosprocesa.EsteeselcdigodeFirefoxparaelbucledeeventosprincipal:

while (!mExiting) NS_ProcessNextEvent(thread);

DeacuerdoconlaespecificacindeCSS2,eltrminocanvasdescribe"elespacioenelqueserepresentalaestructuradeformato",esdecir,ellugarenelqueelnavegadorpintaelcontenido.Aunqueelelementocanvasesinfinitoparacadadimensindelespacio,losnavegadoreseligenunanchoinicialenfuncindelasdimensionesdelaventanagrfica.

Deacuerdoconlasindicacionesdelapginawww.w3.org/TR/CSS2/zindex.html,elelementocanvasestransparentesiseincluyedentrodeotroelementootieneuncolordefinidoporelnavegadorsinoseincluyeenningnelemento.

ElmodelodecajasdeCSSdescribelascajasrectangularesquesegeneranparaloselementosdelrboldeldocumentoyquesediseandeacuerdoconelmodelodeformatovisual.Cadacajaconstadeunreadecontenido(porejemplo,texto,unaimagen,etc.)ydereascircundantesopcionalesdemargen,bordeyrelleno.

Bucle de eventos

Modelo de formato visual de CSS2

El elemento canvas

Modelo de cajas de CSS
http://www.w3.org/TR/CSS21/intro.html#processing-modelhttp://www.w3.org/TR/CSS2/zindex.htmlhttp://www.w3.org/TR/CSS2/box.html



Figura:modelodecajasdeCSS2

Cadanodogeneraentre0yncajasdeestetipo.Todosloselementostienenunapropiedad"display"quedeterminaeltipodecajaquesegenerar.Ejemplos:

block - generates a block box.inline - generates one or more inline boxes.none - no box is generated.

Aunqueeltipodecajapredeterminadoes"inline",lahojadeestilodelnavegadorestableceotrostipospredeterminados.Porejemplo,eltipodevisualizacinpredeterminadodeunelemento"div"es"block".Puedesconsultarunejemplodehojadeestilopredeterminadaenlapginawww.w3.org/TR/CSS2/sample.html.

Acontinuacinseindicanlostrestiposdeesquemasdisponibles.

1. Flujonormal:elobjetosecolocaenfuncindellugarqueocupaeneldocumento(estosignificaqueellugarqueocupaenelrbolderenderizacinessimilarallugarqueocupaenelrboldeDOM)ysediseadeacuerdocon

Esquema de posicionamiento
http://www.w3.org/TR/CSS2/sample.html



susdimensionesyconeltipodecaja.

2. Flotante:elobjetosediseaprimerosegnelflujonormaly,posteriormente,semuevehacialaderechaohacialaizquierdatodoloposible.

3. Posicionamientoabsoluto:elobjetosecolocaenelrbolderenderizacindeunaformadiferentealaqueseutilizaparacolocarloenelrboldeDOM.

Lapropiedad"position"yelatributo"float"determinanelesquemadeposicionamiento.

Siseutilizan"static"y"relative",segeneraunflujonormal.

Siseutilizan"absolute"y"fixed",seproduceunposicionamientoabsoluto.

Cuandoelposicionamientoesesttico,nosedefineningunaposicin,porloqueseutilizaelposicionamientopredeterminado.Enotrosesquemas,elautorespecificalaposicin:arriba,abajo,izquierda,derecha.

Lossiguientesvaloresdeterminaneldiseodelacaja:

tipodecaja,

dimensionesdelacaja,

esquemadeposicionamiento,

informacinexterna,comoeltamaodelasimgenesyeltamaodelapantalla.

Cajadebloque:formaunbloque(tienesupropiorectnguloenlaventanadelnavegador).

Figura:cajadebloque

Cajaintegrada:notienebloquepropio,sinoqueseincluyeenunbloquedecontencin.

Tipos de cajas



Figura:cajasintegradas

Lascajasdebloquesecolocanenvertical,unadetrsdeotra,mientrasquelascajasintegradassedistribuyenhorizontalmente.

Figura:formatodecajasdebloqueeintegradas

Lascajasintegradassecolocandentrodelneaso"cajasdelnea".Cuandolascajassealineantomandocomopuntodereferenciasubase,esdecir,laparteinferiordeunelementosealineaconotracajatomandocomoreferenciaunapartediferentealainferior,laslneastienencomomnimolamismaalturaquelacajamsalta,aunquepuedensermsaltas.Encasodequeelanchodelcontenedornoseasuficiente,lascajasintegradassecolocanendiferenteslneas.Estoesloquesuele



ocurrirenunprrafo.

Figura:lneas

Posicionamientorelativo:elelementosecolocanormalmentey,acontinuacin,semuevesegneldiferencialcorrespondiente.

Figura:posicionamientorelativo

Posicionamiento

Relativo

Flotante



Unacajaflotantesedesplazaalaizquierdaoaladerechadeunalnea.Lomsinteresantedeesteposicionamientoesquelasdemscajasfluyenasualrededor.Acontinuacin,seincluyeunejemploconcdigoHTML:

Lorem ipsum dolor sit amet, consectetuer...

Laaparienciaseralasiguiente:

Figura:cajaflotante

Eldiseosedefineconexactitudindependientementedelflujonormal.Elelementonoparticipaenelflujonormal.Lasdimensionessonrelativasalcontenedor.Enelposicionamientofijo,elcontenedoreslaventanagrfica.

Absoluto y fijo



Figura:posicionamientofijo

Nota:lacajafijanosemoveraunqueelusuariosedesplaceporeldocumento.

Lascapasseespecificanconlapropiedad"zindex"deCSS.Representalaterceradimensindelacaja,esdecir,suposicinalolargodel"ejez".

Lascajassedividenenpilas(denominadas"contextosdepila").Encadapila,loselementosquequedandebajosepintanenprimerlugar,yloselementosquequedanencimasecolocanenlapartesuperior,mscercadelusuario.Encasodesuperposicin,seocultaelelementoquequedadebajo.Laspilasseordenansegnlapropiedad"zindex".Lascajasquetienenlapropiedad"zindex"formanunapilalocal.Laventanagrficaformalapilaexterior.

Ejemplo:

div { position: absolute; left: 2in; top: 2in; }

Representacin en capas



Seobtendrelsiguienteresultado:

Figura:posicionamientofijo

Aunqueelelemento"div"rojoprecedaalverdeenelmarcadoysepinteenprimerlugarenunflujonormal,elvalordelapropiedad"zindex"essuperior,porloqueseencuentramsadelantadoenlapiladelacajaraz.

1. Arquitecturadelnavegador

1. Grosskurth,Alan.AReferenceArchitectureforWebBrowsers(pdf)

2. Gupta,Vineet.HowBrowsersWorkPart1Architecture

2. Anlisis

1. Aho,Sethi,Ullman,Compilers:Principles,Techniques,andTools,

Recursos
http://grosskurth.ca/papers/browser-refarch.pdfhttp://www.vineetgupta.com/2010/11/how-browsers-work-part-1-architecture/



tambinconocidocomo"TheDragonBook"(Ellibrodeldragn),AddisonWesley,1986

2. RickJelliffe.TheBoldandtheBeautiful:twonewdraftsforHTML5

3. Firefox

1. L.DavidBaron,FasterHTMLandCSS:LayoutEngineInternalsforWebDevelopers

2. L.DavidBaron,FasterHTMLandCSS:LayoutEngineInternalsforWebDevelopers(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.Empezsuandaduracomodesarrolladorawebenelao2000ysefamiliarizconel"malfico"modelodecapasdeNetscape.AligualqueRichard

Feynmann,sentafascinacinpordescubrircmofuncionabanlascosas,porloqueempezainvestigarlosmecanismosdefuncionamientointernodelos
http://www.w3.org/TR/CSS2/https://developer.mozilla.org/en/The_life_of_an_HTML_HTTP_requesthttp://weblogs.mozillazine.org/hyatt/WebCore/chapter2.htmlhttp://www.mozilla.org/newlayout/doc/style-system.htmlhttp://broadcast.oreilly.com/2009/05/the-bold-and-the-beautiful-two.htmlhttp://webkit.org/blog/66/the-fouc-problem/http://taligarsiel.com/http://www.mozilla.org/newlayout/doc/reflow.htmlhttp://dbaron.org/talks/2008-11-12-faster-html-and-css/slide-6.xhtmlhttp://webkit.org/blog/114/http://webkit.org/building/build.htmlhttp://www.w3.org/TR/html4/http://www.mozilla.org/newlayout/doc/layout-2006-07-12/slide-6.xhtmlhttps://developer.mozilla.org/en/Build_Documentationhttp://www.youtube.com/watch?v=a2_6bGNZ7bAhttp://www.mozilla.org/newlayout/doc/gecko-overview.htmhttp://weblogs.mozillazine.org/hyatt/archives/cat_safari.htmlhttp://dev.w3.org/html5/spec/Overview.html



navegadoresyadocumentartodossusdescubrimientos.Talitambinhapublicadounapequeaguasobrerendimientodeaplicacionescliente.

Estapginasehatraducidoaljaponsdosveces!Cmofuncionanlosnavegadores:loquehaydetrsdelosnavegadoreswebactuales(ja)por@_kosei_yWEBpor@[email protected]!

Traducciones
https://twitter.com/#!/kiyoto01https://twitter.com/#!/ikeike443http://taligarsiel.com/ClientSidePerformance.htmlhttp://cou929.nu/docs/how-browsers-work/https://twitter.com/#!/_kosei_http://shanon-tech.blogspot.com/2011/09/web.html

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

Documents

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