Analizador de HTML5

Gecko 2 introduce un nuevo analizador basado en HTML 5. El analizador de HTML es una de las piezas más complicadas y delicadas de un navegador. Controla la forma en que tu código fuente HTML es convertido en páginas web y, como tal, los cambios en él son poco habituales. El nuevo analizador es más rápido, cumple con el estándar HTML 5 y permite muchas funcionalidades nuevas.

El nuevo analizador presenta estas mejoras importantes:

• Ahora puedes utilizar SVG y MathML alineado en las páginas de HTML 5, sin sintaxis de espacio de nombres XML.
• El análisis se hace ahora en un tema aparte del hilo principal de la interfaz de usuario de Firefox, mejorando la capacidad de respuesta global del navegador.
• Las llamadas a innerHTML son mucho más rápidas.
• Se han corregido decenas de errores relacionados desde hace tiempo con el analizador.

La especificación de HTML 5 ofrece una descripción más detallada que los anteriores estándares HTML sobre cómo convertir una secuencia de bytes en un árbol DOM. Esto dará lugar a un comportamiento más consistente a través de las implementaciones del navegador. En otras palabras, al ser compatibles con HTML5, Gecko, WebKit, e Internet Explorer (IE) se comportarán de forma más coherente entre sí.

Conductas del analizador modificadas

Algunos cambios en la forma en que se comporta el analizador de Gecko 2, en comparación con versiones anteriores de Gecko, pueden afectar a los desarrolladores web, dependiendo de cómo hayas escrito anteriormente el código y en qué navegadores lo hayas probado.

Tokenización del ángulo izquierdo del soporte dentro de una etiqueta

Teniendo en cuenta la cadena <foo<bar> , el nuevo analizador la lee como una etiqueta llamada foo<bar . Este comportamiento es compatible con IE y Opera, y es diferente de Gecko 1.x y WebKit, que lo leen como dos etiquetas, foo y bar . Si anteriormente has probado tu código en Internet Explorer y Opera, entonces probablemente no tendrás ningunas etiquetas así. Si hiciste la prueba de tu sitio sólo con Gecko 1.x o WebKit (por ejemplo, intranets exclusivas de Firefox o sitios móviles orientados hacia WebKit), entonces podrías tener etiquetas que coincidan con este modelo y se comportarán de manera diferente con Gecko 2.

Llamar a document.write () durante el análisis

Antes de HTML5, Gecko y WebKit permitían las llamadas a document.write() durante el análisis para insertar contenido en la secuencia de origen. Este comportamiento daba lugar inherentemente a condiciones de carrera, puesto que el contenido se insertaba, en la secuencia de origen, en un punto dependiente de los tiempos de ejecución. Si la llamada ocurría después de que el análisis acabara, el contenido insertado sustituía al documento. En IE, este tipo de llamadas son ignoradas o implican una llamada a document.open(), sustituyendo el documento. En HTML5, document.write() sólo se puede llamar desde un script que creado mediante la etiqueta <script> que no tenga establecidos los atributos async o defer. Con el analizador de HTML 5, las llamadas a document.write() en cualquier otro contexto o se ignoran o sustituyen el documento.

Algunos contextos en los que no debes llamar a document.write() incluyen:

• scripts creados con document.createElement ()
• controladores de eventos
• setTimeout ()
• setInterval ()
• <script async src="...">
• <script defer src="...">

Si utilizas el mismo mecanismo para cargar bibliotecas de scripts para todos los navegadores, incluyendo Internet Explorer, entonces tu código probablemente no se vea afectado por este cambio. Los scripts que pueden provocar condiciones de carrera en Firefox, pero que resultarían seguros en Internet Explorer, se comportarán de manera diferente debido a este cambio. Firefox escribe una advertencia en la consola de JavaScript cuando ignora una llamada a document.write() .

Falta de repetición del análisis

Antes de HTML5, los analizadores repetían el análisis del documento si alcanzaban el final del archivo dentro de ciertos elementos o dentro de los comentarios. Por ejemplo, si el documento carecía de una etiqueta de cierre </title>, el analizador repetía el análisis para buscar el primer "<" del documento, o si el comentario no estaba cerrado, buscaba el primer '>'. Este comportamiento creaba una vulnerabilidad de seguridad. Si un atacante forzaba un final de archivo prematuro, el analizador podía cambiar qué partes del documento consideraba scripts ejecutables. Además, la compatibilidad con la repetición de análisis dio lugar a código de análisis innecesariamente complejo.

Con HTML 5, los analizadores ya no repiten análisis de ningún documento. Este cambio tiene las siguientes consecuencias para los desarrolladores web:

• Si se omite la etiqueta de cierre para <title>, <style>, <textarea> o <XMP>, la página fallará el análisis. IE ya falla al analizar documentos si falta una etiqueta </ title>, así que si pruebas con IE, es probable que no tengas ese problema.
• Si olvidas cerrar un comentario, lo más probable es que la página falle al analizarse. Sin embargo, los comentarios no cerrados a menudo se rompen en los navegadores existentes, por una razón u otra, así que es poco probable que tengas este problema en los sitios que se han probado en varios navegadores.
• En un script alineado, con el fin de utilizar las cadenas literales </script> y <!-- , deberías evitar que se analicen literalmente, expresándolas como \u003c/script> y \u003c!-- . La práctica anterior de escapar de la cadena </script> rodeándola con los marcadores de comentario, aunque es compatible con HTML5, causa problemas en los casos en los que se omite el marcador de comentario (ver punto anterior). Puedes evitar estos problemas utilizando el código de carácter para el primer '<' en su lugar.

Mejora del rendimiento con el análisis especulativo

Sin relación con los requisitos de la especificación de HTML 5, el analizador de Gecko 2 utiliza el análisis especulativo, en el que continúa el análisis de un documento mientras que los scripts se están descargando y ejecutando. Esto se traduce en un mejor rendimiento en comparación con análisis anteriores, ya que la mayoría de las veces, Gecko puede realizar estas tareas en paralelo.

Para aprovechar al máximo el análisis especulativo y ayudar a que tus páginas se carguen lo más rápido posible, asegúrate de que cuando llames a document.write () , escribas un subárbol equilibrado dentro de ese trozo de script. Un subárbol equilibrado es el código HTML en el que todos los elementos que se abren también están cerrados, de forma que después de la secuencia de comandos, los elementos que se dejan abiertos son los mismos que fueron abiertos antes de la secuencia de comandos. Las etiquetas de apertura y cierra no necesitan ser escritas por la misma llamada document.write(), siempre y cuando estén dentro de la misma etiqueta <script>.

Ten en cuenta que no debes usar etiquetas de cierre para elementos nulos que no tienen etiquetas de cierre: <area>, <base>, <br>, <col>, <command>, <embed>, <hr>, <img>, <input>, <keygen>, <link>, <meta>, <param>, <source> and <wbr>. (También existe algún elemento cuyas etiquetas de cierre pueden omitirse en algunos casos, como <p> del ejemplo siguiente, pero es más fácil usar siempre etiquetas de cierre para dichos elementos que asegurarse de que las etiquetas de cierre sólo se omitan cuando no sean necesarias.)

Por ejemplo, el siguiente código escribe un subárbol equilibrado:

<script>
  document.write ("<div>");
  document.write ("<p> Aquí va el contenido. </ p>");
  document.write ("</ div>");
</ script>
<!-- Aquí va el HTML sin script. -->

Por el contrario, el siguiente código contiene dos scripts con subárboles no equilibrados, lo que hace que el análisis especulativo falle y por lo tanto el tiempo para analizar el documento sea más largo.

<script>document.write("<div>");</script>
<p>El contenido va aquí.</p>
<script>document.write("</div>");</script>

Para obtener más información, consulta Optimizar tus páginas para el análisis especulativo