¿Realmente has aprendido las etiquetas HTML?
De hecho, hay algunas etiquetas que no aparecen en la página pero que son muy importantes. La mayoría de estas etiquetas se encuentran en la etiqueta principal de la página. Aunque son invisibles en la página, si se usan en escenas específicas, pueden tener efectos inesperados. A continuación, hablaré sobre las etiquetas HTML ignoradas desde tres aspectos: optimización de la interacción, optimización del rendimiento y optimización de la búsqueda.
Optimización interactiva
Metaetiqueta: salto/actualización automática
Supongamos que queremos implementar una página similar a la reproducción automática, en primer lugar, nuestra primera reacción será be Utilice el temporizador js para controlar los saltos de página. Pero en realidad existe una manera más sencilla, a través de la función de actualización de la metaetiqueta.
El código anterior saltará automáticamente a la página view2.html en el mismo dominio después de 10 segundos. Para implementar la función de reproducción automática, solo necesitamos configurar la dirección de la página siguiente en la metaetiqueta de cada página.
Si desea implementar la función de actualización programada, simplemente elimine la siguiente URL:
Tenga en cuenta que el proceso de actualización/salto con metaetiquetas no se puede cancelar, por lo que, si es necesario, Si desea cancelar manualmente, debe usar js timer honestamente, pero para una simple actualización programada o salto, aún puede practicar el uso de meta usted mismo.
Etiqueta de título: Recordatorio de mensaje
Antes del lanzamiento del estándar HTML5, los navegadores no abrían las API para el parpadeo de iconos, la reproducción de audio, las ventanas emergentes de mensajes del sistema, etc., por lo que Solo se pueden utilizar otros medios no convencionales para lograr efectos similares, como modificar la etiqueta del título.
El siguiente código implementa la función de recordatorio de mensajes modificando periódicamente el contenido de la etiqueta del título, de modo que los usuarios puedan descubrir rápidamente los mensajes devueltos por el servidor cuando navegan por otras páginas.
Por supuesto, el propósito de modificar dinámicamente la etiqueta del título no es solo proporcionar recordatorios de mensajes, sino también mostrar algunas tareas asincrónicas, como el progreso de la descarga y el progreso de la carga.
Optimización del rendimiento
Etiqueta de script: ajustar el orden de carga para aumentar la velocidad de renderizado
No sé si alguna vez has tenido una experiencia así: abrir una página en un navegador y descubrí que la página se ha estado cargando en un bucle o que la página tardó mucho en responder. Además de la velocidad de la red, este fenómeno se debe principalmente a un diseño de estructura de página poco razonable, lo que provoca tiempos de carga prolongados. Por lo tanto, si desea mejorar la velocidad de representación de la página, debe comprender el proceso de representación de la página del navegador y resolver el problema fundamentalmente.
Los navegadores utilizan subprocesos de representación GUI y subprocesos del motor JavaScript al cargar páginas. El hilo de representación de la GUI es responsable de representar los elementos HTML de la interfaz del navegador, y el hilo del motor de JavaScript es el principal responsable de procesar los scripts de JavaScript. Debido a que JavaScript puede cambiar la estructura y el estilo de la interfaz durante la ejecución, están diseñados para ser mutuamente excluyentes. En otras palabras, cuando se ejecuta el motor JavaScript, el subproceso de la GUI se suspenderá. Después de ejecutar el programa de script JavaScript, el subproceso de la GUI cambiará para continuar representando la página.
Entonces podemos saber que el proceso de representación de la página incluye el tiempo de solicitar y ejecutar archivos de script, pero es posible que la primera representación de la página no necesite ejecutar todos los archivos, y las acciones de solicitar y ejecutar archivos son prolongados Reduce el tiempo que tardan los usuarios en ver la página, reduciendo así la experiencia del usuario.
Para presentar rápidamente el contenido al usuario y reducir el tiempo de espera del usuario, esto se puede lograr a través de los tres atributos de la etiqueta script:
Async: indica que el script El archivo se solicita inmediatamente, pero no bloquea el motor de renderizado de la GUI, sino que bloquea el motor de renderizado de la GUI y ejecuta el contenido del archivo inmediatamente después de cargarlo.
Diferido. Solicite el script inmediatamente, pero no bloquee el motor de renderizado de la GUI y espere hasta que se analice el HTML antes de ejecutar el contenido del archivo.
Tipo estándar HTML5, el valor correspondiente es "módulo". Deje que el navegador analice el archivo en un módulo de acuerdo con el estándar ECMA Script 6. El efecto de bloqueo predeterminado es el mismo que aplazar, o se puede ejecutar inmediatamente después de que se complete la solicitud con async.
Así podemos saber que el atributo diferido y el tipo="módulo" pueden garantizar la ejecución prioritaria del motor de renderizado, reduciendo así el tiempo dedicado a ejecutar el contenido del archivo y permitiendo a los usuarios ver las páginas más rápido (incluso si es posible que el contenido de estas páginas no se muestre en su totalidad). Además, debe saber que cuando el motor de renderizado analiza HTML y encuentra una etiqueta de script introducida en el archivo, se procesará inmediatamente. Es por eso que las etiquetas de script que hacen referencia al código JavaScript se colocan en la parte inferior de la etiqueta del cuerpo.
Etiqueta de enlace: Mejore la velocidad de renderizado mediante preprocesamiento
Al optimizar el rendimiento de proyectos medianos y grandes, a menudo restamos (compresión gzip, almacenamiento en caché, etc.) o dividimos recursos. (Empaquetado bajo demanda, carga bajo demanda), pero si puede pensar en el valor del atributo rel de la etiqueta de enlace para la precarga, también puede acelerar la velocidad de representación de la página.
dns prefetch. Cuando el valor del atributo rel de la etiqueta del enlace es "dns-prefetch", el navegador pre-dns un nombre de dominio y lo almacenará en caché. De esta forma, cuando el navegador solicita recursos con el mismo nombre de dominio, se puede omitir el proceso de consulta de IP (consulta DNS) del nombre de dominio, reduciendo la pérdida de tiempo. (Nota: este atributo aún se encuentra en la etapa experimental y es compatible con algunas versiones de algunos navegadores).
Antes de enviar oficialmente una solicitud HTTP al servidor, deje que el navegador realice algunas operaciones. de antemano, incluida la resolución DNS, la negociación TLS y el protocolo de enlace TCP, lo que ahorra tiempo a los usuarios al eliminar retrasos de ida y vuelta. (Nota: este atributo aún se encuentra en la etapa experimental y es compatible con algunas versiones de algunos navegadores).
Prefetch/preload. Ambos valores permiten que el navegador descargue y almacene en caché un recurso por adelantado, pero son diferentes Sí, cuando el navegador está ocupado, es posible que se ignore la captación previa, mientras que la carga previa definitivamente se descargará antes.
Requisito previo. El navegador no solo cargará recursos, sino que también analizará y ejecutará la página para su renderización previa. (Nota: este atributo aún se encuentra en la etapa experimental y es compatible con algunas versiones de algunos navegadores).
Optimización de búsqueda
El código de interfaz de usuario que escriba no solo mejora el navegador. funcionan mejor y también facilitan la comprensión de otros programas (como los motores de búsqueda). El uso razonable de metaetiquetas y etiquetas de enlaces puede ayudar a los motores de búsqueda a comprender e incluir mejor nuestras páginas.
Metaetiqueta: extrae información clave
La metaetiqueta puede establecer la información de descripción de la página, lo que permite a los motores de búsqueda mostrar mejor los resultados de búsqueda.
Por ejemplo, si busca "Taobao" en Baidu, encontrará información descriptiva sobre el sitio web, que está especialmente configurada para los motores de búsqueda a través de metaetiquetas para facilitar a los usuarios la vista previa de los resultados de la búsqueda.
Para permitir que los motores de búsqueda identifiquen mejor la página, puede utilizar palabras clave además de la información de descripción, de modo que incluso si otras partes de la página no contienen contenido de búsqueda, aún se pueda buscar. (Por supuesto, los motores de búsqueda tienen su propio peso y algoritmo, el mal uso de las palabras clave se degradará. Por ejemplo, el motor de Google penalizará una gran cantidad de páginas con las mismas palabras clave y reducirá su peso).
Cuando buscamos la palabra clave "comprar con confianza", los resultados de la búsqueda mostrarán información de Taobao, aunque las palabras "comprar con confianza" no se pueden ver en el contenido de la búsqueda mostrado. Esto se debe a que esta palabra clave es. Ambientado en la página de Taobao.
El código correspondiente es el siguiente:
En el trabajo real, se recomienda utilizar algunas herramientas de palabras clave para la selección, como
Etiqueta de enlace: reducir la duplicación
A veces, para comodidad del usuario o por motivos históricos, la misma página tendrá varias URL o habrá algunas páginas redirigidas, como por ejemplo:
- /a.html
-/Detalles? id=abcd
Luego puedes configurarlo en la siguiente página:
Esto permite a los motores de búsqueda evitar perder tiempo rastreando páginas duplicadas. Sin embargo, cabe señalar que también tiene una limitación, es decir, el sitio web al que apunta no puede cruzar dominios.
Por supuesto, existen otras formas de fusionar URL, como usar un mapa del sitio o agregar rel="canonical" al encabezado de la respuesta de la solicitud HTTP.