sencillas - ¿Por qué el código después de la etiqueta</ ​​html> se mueve antes que</ body>? ¿Hay una ganancia de rendimiento?

etiquetas basicas de html

Question

Leer otras publicaciones de Stack Overflow como esta pregunta SO me llevó a esta extraña recomendación de Google sobre la optimización de CSS. "Odd" siendo su recomendación para aplazar la carga de CSS que terminó así:

 <div class="blue">Hello, world!</div>
</body>
</html>
<noscript><link rel="stylesheet" href="small.css"></noscript>

Aparte de parecer excesivo, confuso, tener HTML no válido y decir "El orden de las aplicaciones de las reglas de CSS se mantiene ... a través de javascript". a pesar de que no se muestra javascript ... mi pregunta es esta:

Al probar su ejemplo e inspeccionar el resultado, todo el código que ocurre después de que </html> se mueve justo antes de </body> . ¿Mi pregunta es, porque?

1. ¿Por qué se movió? Parece que todos los navegadores principales intentan dar cuenta del código después de </html> moviéndolo a </body> . Busqué un poco y no pude encontrar documentos / estándares sobre esto.

2. ¿Por qué Google incluso lo recomendaría? Como en, ¿hay algún beneficio práctico real para hacer esto? Porque creo que ponerlo antes del </body> para empezar sería suficiente. (y con respecto a la buena explicación subjetiva de BoltClock, ¿hay alguna evidencia contundente de que haya de hecho un aumento en el rendimiento?)

Esto ocurrió en IE11, Firefox 26, Chrome 32.xy Windows Safari 5.1.7. El HTML examinado fue:

 <div class="blue">Hello, world!</div>
<noscript><link rel="stylesheet" href="small.css"></noscript>
</body>
</html>

Agregar más código después de </html> tuvo el mismo resultado.

Esto me recuerda a otras correcciones de errores extrañas, como cómo los navegadores mostrarán las etiquetas <image> como <img> ( ref ) ...

ACTUALIZACIÓN: Para probar, configuré esta URL para CSS no diferido y también esta URL para CSS diferido (bueno, lo que espero que ese artículo signifique) ...

Answer 1

Ahora eso es extraño. No tiene permitido tener elementos después de la etiqueta </html> end porque html es el elemento raíz de un documento HTML.

1. Pero esto es HTML, no XHTML. En lugar de fallar directamente (como lo haría con XHTML), el navegador simplemente toma lo que aparece al final de un documento (que no sean comentarios y creo que en blanco) y lo mueve al final del cuerpo del documento y pretende que todo está bien.

   Antes de HTML5, no había estándares para el manejo de errores en tales casos simplemente porque no es válido tener elementos después del elemento raíz. En HTML5, prácticamente todo el manejo de errores se contabiliza en la sección 8.2.5 . En particular, indica que en los modos de inserción " después del cuerpo " o " después del cuerpo ", si hay un token inesperado que no es un DOCTYPE, un comentario o una etiqueta </html> final, entonces el analizador debe cambiar el modo de inserción a "en cuerpo" para procesar el token, lo que significa que cualquier cosa que se encuentre allí debe insertarse en el cuerpo. Como implican los nombres de los modos de inserción, esto significa que el contenido se agrega al final del cuerpo.

2. No tengo una respuesta objetiva sobre por qué Google lo recomendaría, pero sí creo que Google prioriza el rendimiento sobre el cumplimiento de las normas, especialmente en los casos en que se sabe que el marcado inválido no causa problemas graves. Son personas que toman riesgos así (ver también: Google Chrome), pero estoy divagando.

   Menciona poner los elementos de noscript y de link justo antes de la etiqueta </body> end, que como ha visto es lo que termina de acuerdo con los navegadores y las especificaciones HTML5 de todos modos. Sin embargo, tenga en cuenta que, en primer lugar, no es válido tener un elemento de link en un elemento noscript fuera del encabezado de la página. Pero, de nuevo, este es probablemente un caso de rendimiento sobre el cumplimiento de estándares.