Introducción al artículo de wulin.com (www.vevb.com): Muchas personas preguntan qué es HTML5. Decimos que el método que podemos usar HTML5 primero es cambiar primero Doctype, porque muchas páginas todavía están en la manera tradicional en la actualidad. El método HTML5 es compatible con el navegador IE, y puede usarse de IE6 a IE10, y puede ser compatible con navegadores avanzados.
[Nota del editor] El siguiente artículo fue escrito por un técnico de TI llamado Zhang Liming, publicado en la página web de InfoQ. Esta vez, analizó el rendimiento de HTML5 de 9 aspectos diferentes en el texto completo, que vale la pena leer los desarrolladores correspondientes.
Desde una perspectiva de rendimiento, HTML5 primero reduce los documentos HTML, lo que lo hace más simple. Primero, desde la perspectiva de la legibilidad del usuario, hubo muchas cosas que originalmente no fueron entendidas por principiantes por primera vez para ver estas cosas, y el método de declaración HTML5 es obviamente más amigable para los usuarios. En segundo lugar, la declaración de codificación del documento es muy simple si está en HTML5. Muchas personas preguntan qué es HTML5. Decimos que el método que podemos usar HTML5 primero es cambiar primero Doctype, porque muchas páginas todavía están en la manera tradicional en la actualidad. El método HTML5 es compatible con el navegador IE, y puede usarse de IE6 a IE10, y puede ser compatible con navegadores avanzados. Entonces, la forma más fácil de abrazar HTML5 es cambiar Doctype.
1. Una etiqueta más simple
Lo siguiente puede no ser algo muy común, pero es algo que prefiero, usando un método de etiqueta más simple. Como puede ver en este nombre, HTML5 se hereda de HTML4. HTML4 tiene modo estricto y modo de transición. HTML5 admite este modo de transición, lo que significa que no puede cerrar algunas etiquetas. Sin embargo, no recomiendo todas las etiquetas, por ejemplo, la etiqueta del cuerpo no está cerrada, lo que no recomendamos. Pero la etiqueta P más comúnmente utilizada es también la etiqueta de la lista LI. ¿Por qué lo dices? En primer lugar, desde una perspectiva visual, este método es un poco más simple. Luego, la clave es que durante el proceso de transferencia de documentos, habrá menos contenido.
La declaración de los atributos de la etiqueta HTML5 admite tres maneras: soportes individuales, soportes dobles y soportes no ramificados. Para reducir el tamaño del documento, elegí el método sin cotizaciones dobles o citas individuales. Sin embargo, debe tenerse en cuenta que suponiendo que sea una declaración de atributos de clase, porque los atributos pueden incluir múltiples clases, y cuando múltiples clases, deben estar encerradas en los soportes. En este sentido, déjame mostrarte una práctica de Google. Google tiene una página que practica completamente lo anterior, reduciendo el tamaño del documento en un 20%, reduciendo la transferencia de documentos HTML en un 20%. Si se practica todo, puede lograr una disminución de entre 5% y 20%. Este es el primer paso, reduciendo el tamaño del documento HTML.
2. Optimización de imágenes
Lo siguiente es sobre la optimización de las imágenes, que siempre son elementos que aman y odian. Porque cuando hay demasiadas imágenes, arrastrará seriamente la velocidad de carga de toda la página. Con respecto a los métodos de optimización de imágenes, hay muchas presentaciones en el libro "Sitio web de alto rendimiento". Para resumir, hay tres puntos principales: usar elfos, optimizar el tamaño de las imágenes y usar URI de datos. No entraré en detalles aquí.
Otra idea de optimización de imágenes es: sin imagen. Abandonar las fotos y abrazar CSS3. Originalmente, necesitaba establecer una imagen con un efecto de esquina redondeado, pero ahora usé Border-Radius en CSS3; Solía establecer un efecto de sombra, pero ahora uso Shadow de caja en CSS3; Solía establecer una imagen de fondo de gradiente, pero ahora uso gradiente en CSS3.
3. Pre-FOCHET
A continuación, hablemos sobre la captación previa, que es otra forma de optimización. Nuestras ideas de optimización actuales no son más que pocas. Muchos de ellos son desde la perspectiva de menos cosas, por ejemplo, el tamaño del documento se redujo antes y el tamaño de la imagen se redujo. Muchas imágenes se convierten en elfos, para reducir la cantidad de solicitudes de envío. Para la captura previa, es otra forma de pensar. Carga de recursos temprano. Cuando el usuario va al punto, en realidad se ha cargado, por lo que definitivamente será más rápido.
Hay dos partes para la captura previa: una es la captación previa de los recursos, y la otra es la resolución previa de DNS.
Hay varios puntos a tener en cuenta cuando la precarga de los recursos:
La precarga solo se tirará cuando el navegador esté inactivo, pero no se garantiza que lo tire. Este es un punto muy importante. Porque el navegador en sí tiene un oyente global, que es una interfaz interna. Cuando el aire de navegación está inactivo, ejecutará el navegador cuando esté inactivo, pero esta devolución de llamada inactiva no puede activarse, por lo que no garantiza que se realizará la precarga.
Chrome no admite la precarga de los recursos HTTPS. Por ejemplo, Alipay es una página HTTPS, Chrome no se realizará previamente.
Aunque una página previa a la punta no es visible después de que existe, en realidad está analizando normalmente. Si pre-pullen la página de inicio de sesión, la página de inicio de sesión tiene muchos recursos, como imágenes, archivos CSS y archivos JS. Se analizará normalmente de arriba a abajo. Durante el proceso de análisis, esta página no aparece, pero en realidad existe. En HTML5, puede obtener el estado de la página actual a través de document.visibilityState. Por lo general, la página tiene dos estados, visibles e invisibles, pero ahora hay un nuevo estado llamado estado previo a la renderización. Puede determinar directamente si la página está en el estado prerender por si document.VisibilityState es igual al prerender.