Resumen: Ya sea en el trabajo o en una entrevista, optimizar el rendimiento del front-end web es muy importante. Entonces, ¿qué aspectos necesitamos para comenzar con la optimización? Puede seguir las 34 reglas generales de Yahoo para la optimización del front-end, pero ahora son 35, por lo que se puede decir que es el Catch-35 de Yahoo para la optimización del front-end. Se ha clasificado, lo cual es bueno. De esta manera tenemos una dirección más clara para la optimización.
parte del contenido 1. Minimizar la cantidad de solicitudes HTTPEl 80% del tiempo de respuesta del usuario final se dedica al front-end y la mayor parte de ese tiempo se dedica a descargar los distintos componentes de la página: imágenes, hojas de estilo, scripts, Flash, etc. Reducir la cantidad de componentes inevitablemente reducirá la cantidad de solicitudes HTTP enviadas por la página. Esta es la clave para hacer que su página sea más rápida.
Una forma de reducir la cantidad de componentes de la página es simplificar el diseño de la página. Pero, ¿hay alguna manera de crear páginas complejas y al mismo tiempo acelerar los tiempos de respuesta? Bueno, de hecho hay una manera de tener tu pastel y comértelo también.
La combinación de archivos reduce la cantidad de solicitudes al colocar todos los scripts en un solo archivo. Por supuesto, también puede combinar todos los CSS. Fusionar archivos puede ser una tarea engorrosa si las secuencias de comandos y los estilos de cada página son diferentes, pero hacerlo como parte del proceso de publicación del sitio puede mejorar los tiempos de respuesta. Los Sprites CSS son la forma preferida de reducir la cantidad de solicitudes de imágenes. Integre todas las imágenes de fondo en una sola imagen y luego use las propiedades CSS background-image y background-position para posicionar la parte que se mostrará. El mapeo de imágenes puede combinar varias imágenes en una sola, el tamaño total es el mismo, pero reduce la cantidad de solicitudes y acelera la carga de la página. El mapeo de imágenes solo es útil si la imagen es continua en la página, como en una barra de navegación. El proceso de establecer coordenadas para un mapa de imágenes es aburrido y propenso a errores, y utilizar mapas de imágenes para la navegación no es fácil, por lo que no se recomienda este método. Las imágenes en línea (codificadas en Base64) utilizan los datos: patrón de URL para incrustar imágenes en la página. Esto aumentará el tamaño del archivo HTML. Poner imágenes en línea en una hoja de estilo (en caché) es una buena idea y evita que la página sea pesada. Sin embargo, los navegadores convencionales actuales no admiten bien las imágenes en línea.Reducir el número de solicitudes HTTP para una página es un punto de partida. Este es un principio rector importante para mejorar la velocidad de la primera visita al sitio.
2. Reducir las búsquedas de DNSEl sistema de nombres de dominio establece una correlación entre los nombres de host y las direcciones IP, muy parecida a la correlación entre nombres y números en una guía telefónica. Cuando ingresa www.yahoo.com en el navegador, el navegador se comunicará con el solucionador de DNS para devolver la dirección IP del servidor. DNS tiene un costo: se necesitan entre 20 y 120 milisegundos para buscar la dirección IP de un nombre de host determinado. El navegador no puede descargar nada del nombre de host hasta que se complete la búsqueda de DNS.
Las búsquedas de DNS se almacenan en caché de manera más eficiente, en un servidor de almacenamiento en caché especial del ISP (proveedor de servicios de Internet) del usuario o en la red local, pero también se pueden almacenar en caché en la computadora del usuario individual. La información de DNS se almacena en la caché de DNS del sistema operativo (el servicio de cliente DNS en Microsoft Windows). La mayoría de los navegadores tienen su propia caché que es independiente del sistema operativo. Mientras el navegador conserve este registro en su caché, no consultará DNS al sistema operativo.
IE almacena en caché las búsquedas de DNS durante 30 minutos de forma predeterminada, como está escrito en la configuración del registro DnsCacheTimeout. Firefox almacena en caché durante 1 minuto, que se puede configurar mediante el elemento de configuración network.dnsCacheExpiration. (Fasterfox cambió el tiempo de caché a 1 hora. PS Fasterfox es un complemento de aceleración para FF)
Si la caché de DNS del cliente está vacía (incluidos el navegador y el sistema operativo), la cantidad de búsquedas de DNS es igual a la cantidad de nombres de host diferentes en la página, incluidas las URL de la página, imágenes, archivos de script, hojas de estilo, objetos Flash y otros. componentes Nombre de host, reducir diferentes nombres de host puede reducir las búsquedas de DNS.
Reducir la cantidad de nombres de host diferentes también reduce la cantidad de componentes que una página puede descargar en paralelo. Evitar las búsquedas de DNS reduce el tiempo de respuesta, mientras que reducir la cantidad de descargas paralelas aumenta el tiempo de respuesta. Mi regla es distribuir los componentes entre 2 y 4 nombres de host, lo cual es un compromiso entre reducir las búsquedas de DNS y permitir un alto número de descargas simultáneas.
3. Evite las redireccionesLos redireccionamientos utilizan códigos de estado 301 y 302. Aquí hay un encabezado HTTP con un código de estado 301:
HTTP/1.1 301 movido permanentemente Ubicación: http://example.com/newuriContent-Type: text/html
El navegador saltará automáticamente a la URL especificada en el campo Ubicación. Toda la información necesaria para la redirección se encuentra en el encabezado HTTP y el cuerpo de la respuesta suele estar vacío. De hecho, los encabezados HTTP adicionales, como Expires y Cache-Control, también representan redirecciones. Hay otras formas de redirigir: actualizar metaetiquetas y JavaScript, pero si debe realizar una redirección, es mejor utilizar el código de estado HTTP estándar 3xx, principalmente para que el botón Atrás pueda funcionar correctamente.
Tenga en cuenta que los redireccionamientos pueden ralentizar la experiencia del usuario. Insertar un redireccionamiento entre el usuario y el documento HTML retrasará todo lo que hay en la página. La página no se mostrará y los componentes no comenzarán a descargarse hasta que el documento HTML se entregue. navegador.
Existe una redirección común que desperdicia muchísimo recursos y los desarrolladores web generalmente no son conscientes de ella, y es entonces cuando a la URL le falta una barra al final. Por ejemplo, saltar a http://astrology.yahoo.com/astrology devolverá una respuesta 301 que redirige a http://astrology.yahoo.com/astrology/ (tenga en cuenta la barra diagonal). En Apache, puede utilizar las instrucciones Alias, mod_rewrite o DirectorySlash para cancelar redirecciones innecesarias.
El uso más común de la redirección es conectar el sitio antiguo al sitio nuevo. También puede conectar diferentes partes del mismo sitio y realizar algún procesamiento de acuerdo con las diferentes situaciones del usuario (tipo de navegador, tipo de cuenta de usuario, etc.). . Conectar dos sitios web mediante redirecciones es la forma más sencilla y requiere sólo una pequeña cantidad de código adicional. Aunque el uso de redireccionamientos en estos momentos reduce la complejidad del desarrollo para los desarrolladores, reduce la experiencia del usuario. Una alternativa es utilizar Alias y mod_rewrite, siempre que ambas rutas de código estén en el mismo servidor. Si se utiliza la redirección porque el nombre de dominio cambia, puede crear un CNAME (crear un registro DNS que apunte a otro nombre de dominio como alias) combinado con la directiva Alias o mod_rewrite.
4.Hacer que Ajax se pueda almacenar en cachéUno de los beneficios de Ajax es que puede proporcionar retroalimentación inmediata al usuario porque puede solicitar información de forma asincrónica desde el servidor backend. Sin embargo, con Ajax no hay garantía de que los usuarios no se aburran mientras esperan que regresen las respuestas asincrónicas de JavaScript y XML. En muchas aplicaciones, la capacidad del usuario para esperar depende de cómo se utiliza Ajax. Por ejemplo, en un cliente de correo electrónico basado en web, los usuarios permanecerán centrados en los resultados devueltos por las solicitudes de Ajax para encontrar mensajes de correo electrónico que coincidan con sus criterios de búsqueda. Es importante recordar que asincrónico no significa instantáneo.
Para mejorar el rendimiento, optimizar estas respuestas de Ajax es crucial. La forma más importante de mejorar el rendimiento de Ajax es hacer que la respuesta se pueda almacenar en caché, como se explica en Agregar encabezados HTTP Expires o Cache-Control. Las siguientes reglas adicionales se aplican a Ajax:
Veamos un ejemplo de un cliente de correo electrónico Web 2.0 que utiliza Ajax para descargar la libreta de direcciones del usuario para la función de autocompletar. Si el usuario no ha modificado su libreta de direcciones desde el último uso, y la respuesta Ajax se puede almacenar en caché y tiene un encabezado HTTP Expires o Cache-Control que no ha caducado, entonces la libreta de direcciones anterior se puede leer desde la caché. Se debe informar al navegador si debe continuar usando la respuesta de la libreta de direcciones previamente almacenada en caché o solicitar una nueva. Esto se puede lograr agregando una marca de tiempo a la URL Ajax de la libreta de direcciones que indique la hora de la última modificación de la libreta de direcciones del usuario, por ejemplo &t=1190241612. Si la libreta de direcciones no se ha modificado desde la última descarga y la marca de tiempo permanece sin cambios, la libreta de direcciones se leerá directamente desde la memoria caché del navegador, evitando así un viaje de ida y vuelta HTTP adicional. Si el usuario ha modificado la libreta de direcciones, la marca de tiempo también garantiza que la nueva URL no coincida con la respuesta almacenada en caché y el navegador solicitará la nueva entrada de la libreta de direcciones.
Aunque las respuestas Ajax se crean dinámicamente y es posible que sólo estén disponibles para un único usuario, se pueden almacenar en caché, lo que hará que su aplicación Web 2.0 sea más rápida.
5. Carga diferida de componentesMire más de cerca la página y pregúntese: ¿Qué es necesario para representar la página en primer lugar? El resto puede esperar.
JavaScript es una opción ideal para separar antes y después del evento de carga. Por ejemplo, si tiene código JavaScript y bibliotecas que admiten animaciones y arrastrar y soltar, estas pueden esperar porque el elemento de arrastrar y soltar ocurre después de que la página se representa inicialmente. Otras secciones que se pueden cargar de forma diferida incluyen contenido oculto (contenido que aparece después de una interacción) e imágenes contraídas.
Las herramientas pueden ayudar a reducir su carga de trabajo: YUI Image Loader puede cargar imágenes contraídas de forma diferida, y la utilidad YUI Get es una manera fácil de incorporar JS y CSS. La página de inicio de Yahoo! es un ejemplo. Puede abrir el panel de red de Firebug y echar un vistazo más de cerca.
Es mejor alinear los objetivos de rendimiento con otras mejores prácticas de desarrollo web, como la mejora progresiva. Si el cliente admite JavaScript, la experiencia del usuario se puede mejorar, pero debe asegurarse de que la página funcione correctamente cuando JavaScript no sea compatible. Entonces, una vez que esté seguro de que su página funciona correctamente, puede mejorarla con algunos scripts de carga diferida para admitir algunos efectos sofisticados como arrastrar y soltar y animaciones.
6. Precargar componentes
La precarga puede parecer lo opuesto a la carga diferida, pero en realidad tiene objetivos diferentes. Al precargar componentes, puede aprovechar al máximo el tiempo de inactividad del navegador para solicitar componentes (imágenes, estilos y scripts) que se utilizarán en el futuro. Cuando el usuario accede a la página siguiente, la mayoría de los componentes ya están en el caché, por lo que la página se cargará más rápido desde la perspectiva del usuario.
En aplicaciones reales, existen los siguientes tipos de precarga:
Una página compleja significa más bytes para descargar y acceder al DOM con JavaScript será más lento. Por ejemplo, cuando desea agregar un controlador de eventos, existe una diferencia entre recorrer 500 elementos DOM en la página y 5000 elementos DOM.
Una gran cantidad de elementos DOM es una señal de que hay algún marcado irrelevante en la página que debe limpiarse. ¿Está utilizando tablas anidadas para el diseño? ¿O agregaste un montón de <div>s solo para solucionar el problema de diseño? Quizás debería utilizarse un mejor marcado semántico.
Las utilidades YUI CSS son muy útiles para el diseño: grids.css es para el diseño general, y fonts.css y reset.css se pueden usar para eliminar el formato predeterminado del navegador. Esta es una buena oportunidad para comenzar a limpiar y pensar en su marcado, como por ejemplo usar <div> solo cuando tenga sentido semánticamente, no porque represente una nueva línea.
La cantidad de elementos DOM es fácil de probar, simplemente escriba en la consola Firebug:
document.getElementsByTagName('*').longitudEntonces, ¿cuántos elementos DOM son demasiados? Puede consultar otras páginas similares bien marcadas. Por ejemplo, la página de inicio de Yahoo! es una página bastante ocupada, pero tiene menos de 700 elementos (etiquetas HTML).
8. Separación de componentes entre dominios.La separación de componentes puede maximizar las descargas paralelas, pero asegúrese de no utilizar más de 2 a 4 dominios, ya que existe una penalización en la búsqueda de DNS. Por ejemplo, puede implementar HTML y contenido dinámico en www.example.org y separar los componentes estáticos en static1.example.org y static2.example.org.
9. Utilice iframes lo menos posiblePuede utilizar iframe para insertar un documento HTML en un documento principal. Es importante comprender cómo funciona el iframe y utilizarlo de manera eficiente.
Ventajas de <iframe>:
Desventajas de <iframe>:
Las solicitudes HTTP son costosas. No es necesario utilizar una solicitud HTTP para obtener una respuesta inútil (como 404 No encontrado. Solo ralentizará la experiencia del usuario sin ningún beneficio).
Algunos sitios utilizan el útil 404: ¿Quieres decir xxx? Esto es beneficioso para la experiencia del usuario, pero también desperdicia recursos del servidor (como bases de datos, etc.). Lo peor es que el JavaScript externo al que enlazas tiene un error y el resultado es un 404. Primero, esta descarga bloqueará las descargas paralelas. En segundo lugar, el navegador intentará analizar el cuerpo de la respuesta 404 porque es código JavaScript y necesita averiguar qué partes están disponibles.
parte css 11. Evite el uso de expresiones CSSUsar expresiones CSS para establecer dinámicamente propiedades CSS es una forma poderosa y peligrosa. Compatible con IE5, pero obsoleto desde IE8. Por ejemplo, puede utilizar una expresión CSS para configurar el color de fondo para que se alterne según las horas:
color de fondo: expresión ((nueva fecha()).getHours()%2? #B8D4FF: #F08A00);12. Seleccione <enlace> para descartar @import
Anteriormente se mencionó una mejor práctica: para lograr una representación progresiva, CSS debe colocarse en la parte superior.
Usar @import en IE tiene el mismo efecto que usar <enlace> en la parte inferior, por lo que es mejor no usarlo.
13. Evite el uso de filtrosEl filtro AlphaImageLoader patentado por IE se puede utilizar para solucionar el problema de las imágenes PNG translúcidas en versiones anteriores a IE7. Durante el proceso de carga de imágenes, este filtro bloqueará la renderización, congelará el navegador, aumentará el consumo de memoria y se aplicará a cada elemento, no a cada imagen, por lo que habrá muchos problemas.
La mejor manera es simplemente no usar AlphaImageLoader y, en su lugar, cambiar a una versión elegante para usar imágenes PNG8 que sean bien compatibles con IE. Si debe usar AlphaImageLoader, debe usar guión bajo hack:_filter para evitar afectar a los usuarios de IE7 y superiores.
14. Pon la hoja de estilo en la parte superior.Al estudiar el rendimiento en Yahoo!, descubrimos que colocar hojas de estilo en la sección HEAD del documento hacía que la página pareciera cargarse más rápido. Esto se debe a que colocar la hoja de estilo en el encabezado permite que la página se represente gradualmente.
Los ingenieros de front-end preocupados por el rendimiento quieren que la página se represente de forma incremental. En otras palabras, queremos que el navegador muestre el contenido existente lo más rápido posible, lo cual es particularmente importante cuando hay mucho contenido en la página o cuando la conexión a Internet del usuario es muy lenta. La importancia de mostrar comentarios a los usuarios (como indicadores de progreso) ha sido ampliamente estudiada y documentada. En nuestro caso, ¡la página HTML es el indicador de progreso! Cuando el navegador carga gradualmente el encabezado de la página, la barra de navegación, el logotipo superior, etc., los usuarios que esperan a que se cargue la página los utilizan como comentarios, lo que puede mejorar la experiencia general del usuario.
parte js 15. Eliminar scripts duplicadosLas páginas que contienen archivos de script duplicados pueden afectar el rendimiento más de lo que cree. En una revisión de los 10 principales sitios web de Estados Unidos, sólo se encontró que dos sitios contenían scripts duplicados. Dos razones principales aumentan las posibilidades de que aparezcan guiones duplicados en una sola página: el tamaño del equipo y la cantidad de guiones. En este caso, los scripts duplicados crean solicitudes HTTP innecesarias, ejecutan código JavaScript inútil y afectan el rendimiento de la página.
IE genera solicitudes HTTP innecesarias, pero Firefox no. En IE, si la página introduce dos veces un script externo que no se puede almacenar en caché, generará dos solicitudes HTTP cuando se cargue la página. Incluso si el script se puede almacenar en caché, generará solicitudes HTTP adicionales cuando el usuario vuelva a cargar la página.
Además de generar solicitudes HTTP sin sentido, evaluar el script varias veces es una pérdida de tiempo. Porque independientemente de si el script se puede almacenar en caché o no, se ejecutará código JavaScript redundante en Firefox e IE.
Una forma de evitar importar accidentalmente el mismo script dos veces es implementar un módulo de administración de scripts en el sistema de plantillas. Una forma típica de introducir scripts es utilizar etiquetas SCRIPT en páginas HTML:
<tipo de script=text/javascript src=menu_1.0.17.js></script>16. Minimizar el acceso DOM
El acceso a los elementos DOM con JavaScript es muy lento, por lo que para que la página responda mejor, debes:
A veces parece que la página no responde lo suficiente porque se han agregado demasiados controladores de eventos ejecutados con frecuencia a diferentes elementos del árbol DOM. Es por eso que se recomienda la delegación de eventos. Si hay 10 botones en un div, solo debes agregar un controlador de eventos al contenedor div en lugar de uno para cada botón. Los eventos pueden aparecer, por lo que puede capturar el evento y saber qué botón es la fuente del evento.
18. Pon el guión en la parte inferior.El script bloqueará las descargas paralelas. La documentación oficial HTTP/1.1 recomienda que el navegador no descargue más de dos componentes en paralelo por nombre de host. Si la imagen proviene de varios nombres de host, el número de descargas paralelas puede exceder dos. Si el script se está descargando, el navegador no iniciará ninguna otra tarea de descarga, incluso con un nombre de host diferente.
A veces, no es fácil mover el guión al final. Por ejemplo, si el script se inserta en el contenido de la página usando document.write, no hay forma de moverlo más hacia abajo. También puede haber problemas de alcance, que en la mayoría de los casos pueden resolverse.
Una sugerencia común es utilizar scripts diferidos. Los scripts con el atributo DEFER significan que no pueden contener document.write y solicitan al navegador que les indique que pueden continuar renderizando. Lamentablemente, Firefox no admite el atributo DEFER. En IE, el guión puede retrasarse, pero no como se esperaba. Si el script se puede aplazar, podemos moverlo al final de la página y la página se cargará más rápido.
javascript, css 19. Mantenga JavaScript y CSS fueraMuchos principios de rendimiento se refieren a cómo gestionar componentes externos; sin embargo, antes de que surjan estas preocupaciones, debería plantearse una pregunta más básica: ¿Deben colocarse JavaScript y CSS en archivos externos o escribirse directamente en la página?
De hecho, el uso de archivos externos puede hacer que la página sea más rápida porque los archivos JavaScript y CSS se almacenarán en caché en el navegador. JavaScript y CSS en línea en un documento HTML se vuelven a descargar cada vez que se solicita el documento HTML. Al hacerlo, se reduce la cantidad de solicitudes HTTP requeridas pero se aumenta el tamaño del documento HTML. Por otro lado, si JavaScript y CSS están en archivos externos y el navegador los ha almacenado en caché, entonces hemos logrado reducir el tamaño del documento HTML sin aumentar la cantidad de solicitudes HTTP.
20. Minimizar JavaScript y CSSLa compresión elimina específicamente los caracteres innecesarios del código para reducir el tamaño y así mejorar la velocidad de carga. La minimización del código significa eliminar todos los comentarios y espacios en blanco innecesarios (espacios, nuevas líneas y tabulaciones). Hacer esto en JavaScript puede mejorar la capacidad de respuesta porque el archivo a descargar es más pequeño. Las dos herramientas de compresión de código JavaScript más utilizadas son JSMin y YUI Compressor. El compresor YUI también puede comprimir CSS.
La ofuscación es una medida opcional de optimización del código fuente que es más compleja que la compresión, por lo que es más probable que el proceso de ofuscación produzca errores. En una encuesta de los diez sitios web más importantes de Estados Unidos, la compresión puede reducir el tamaño en un 21% y la ofuscación puede reducir el tamaño en un 25%. Aunque la ofuscación proporciona un mayor grado de reducción, es más riesgosa que la compresión.
Además de comprimir scripts y estilos externos, también se pueden comprimir bloques <script> y <style> en línea. Incluso con el módulo gzip habilitado, comprimir primero puede reducir el tamaño en un 5% o más. JavaScript y CSS se utilizan cada vez más, por lo que comprimir el código tendrá un buen efecto.
imagen 21. Optimizar imágenesIntente convertir el formato GIF al formato PNG y vea si ahorra espacio. Ejecute pngcrush (u otra herramienta de optimización de PNG) en todas las imágenes PNG
22. Optimizar CSS SpriteNo utilice imágenes más grandes de lo necesario sólo porque puede establecer el ancho y el alto en HTML. si es necesario
<img width=100 height=100 src=mycat.jpg Anfitrión: us.yimg.com Si se modifica desde: martes 12 de diciembre de 2006 03:03:59 GMT Si no coincide: 10c24bc-4ab-457e1c1f HTTP/ 1.1 304 No modificado32. Utilice la solicitud GET para Ajax
El equipo de Yahoo! Mailbox descubrió que cuando se utiliza XMLHttpRequest, la solicitud POST del navegador se implementa mediante un proceso de dos pasos: primero enviar el encabezado HTTP y luego enviar los datos. Por lo tanto, es mejor utilizar una solicitud GET, que solo necesita enviar un mensaje TCP (a menos que haya demasiadas cookies). La longitud máxima de la URL de IE es 2K, por lo que si los datos a enviar superan los 2K, no se puede utilizar GET.
Un efecto secundario interesante de las solicitudes POST es que en realidad no se envían datos, como las solicitudes GET. Como se describe en la documentación HTTP, las solicitudes GET se utilizan para recuperar información. Entonces, su semántica es solo usar solicitudes GET para solicitar datos, no enviar datos que deben almacenarse en el servidor.
33. Borre el búfer lo antes posibleCuando un usuario solicita una página, el servidor tarda entre 200 y 500 milisegundos en ensamblar la página HTML, tiempo durante el cual el navegador permanece inactivo y espera a que lleguen los datos. Existe una función flush () en PHP, que le permite enviar una parte de la respuesta HTML preparada al navegador, de modo que el navegador pueda comenzar a obtener los componentes mientras prepara la parte restante en segundo plano. en un fondo muy ocupado o una interfaz muy ligera en la página (PD: la ventaja se refleja mejor cuando el tiempo de respuesta se realiza principalmente en segundo plano).
El lugar ideal para borrar el búfer es después del HEAD, porque la parte HEAD del HTML suele ser más fácil de generar y permite la introducción de cualquier archivo CSS y JavaScript, lo que permite al navegador comenzar a buscar componentes en paralelo mientras el fondo aún está procesando. .
Por ejemplo:
... <!-- css, js --> </head> <?php flush() ?> <cuerpo> ... <!-- contenido -->34. Utilice una CDN (red de entrega de contenido)
La distancia física del usuario al servidor también influye en el tiempo de respuesta. La implementación de contenido en múltiples servidores dispersos geográficamente permite a los usuarios cargar páginas más rápido. ¿Pero cómo hacerlo?
El primer paso para lograr contenido distribuido geográficamente es: No intente rediseñar su aplicación web para acomodar una estructura distribuida. Dependiendo de la aplicación, cambiar la estructura puede incluir tareas de enormes proporciones, como sincronizar el estado de la sesión y replicar las transacciones de la base de datos entre servidores (las traducciones pueden no ser precisas). Las propuestas para acortar la distancia entre los usuarios y el contenido pueden retrasarse o simplemente ser imposibles de aprobar debido a esta dificultad.
Recuerde que entre el 80% y el 90% del tiempo de respuesta de un usuario final se dedica a descargar componentes de la página: imágenes, estilos, scripts, Flash, etc. Esta es una regla de oro de rendimiento. Es mejor distribuir primero el contenido estático en lugar de rediseñar la estructura de la aplicación desde el principio. Esto no sólo reduce en gran medida el tiempo de respuesta, sino que también facilita la demostración de la contribución de la CDN.
Una red de entrega de contenido (CDN) es un grupo de servidores web dispersos en diferentes ubicaciones geográficas para entregar contenido a los usuarios de manera más eficiente. Normalmente, el servidor elegido para entregar contenido se basa en una medida de distancia de la red. Por ejemplo: elija el servidor con la menor cantidad de saltos o el tiempo de respuesta más rápido.
35. Agregue el encabezado HTTP Expires o Cache-ControlEsta regla tiene dos aspectos:
El diseño web se está volviendo más rico, lo que significa que hay más scripts, imágenes y Flash en la página. Es posible que los nuevos visitantes del sitio aún tengan que enviar algunas solicitudes HTTP, pero al utilizar una fecha de vencimiento el componente se puede almacenar en caché, lo que evita solicitudes HTTP innecesarias durante sesiones de navegación posteriores. Los encabezados HTTP de vencimiento se usan normalmente en imágenes, pero deben usarse en todos los componentes, incluidos scripts, estilos y componentes Flash.
Los navegadores (y los servidores proxy) utilizan el almacenamiento en caché para reducir la cantidad y el tamaño de las solicitudes HTTP para que las páginas se carguen más rápido. El servidor web utiliza el encabezado de respuesta HTTP de vencimiento para indicarle al cliente cuánto tiempo debe almacenarse en caché cada componente de la página. Usar una hora en un futuro lejano como fecha de vencimiento le indica al navegador que esta respuesta no cambiará antes del 15 de abril de 2010.
Expira: jueves, 15 de abril de 2010 20:00:00 GMT
Si está utilizando el servidor Apache, utilice la directiva ExpiresDefault para establecer la fecha de vencimiento relativa a la fecha actual. El siguiente ejemplo establece un período de validez de 10 años desde el momento de la solicitud:
ExpiresAcceso predeterminado más 10 años
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.