Hablemos hoy sobre la optimización del renderizado de gráficos front-end, porque puedo comenzar a estudiar webgl la próxima vez, así que resumiré el H5 que hice antes, y ahora está publicado en GERRY_BLOG, TiMiGerry Reimprime por favor mantén el enlace.
Imágenes de recursos estáticos
1. Formato de imagen
JPEG: en primer lugar, todo el proceso de compresión JPEG es convertir el color rgba () de la imagen, y luego volver a muestrear para distinguir la transformación de color de alta frecuencia y baja frecuencia, para llevar a cabo un proceso DTA, y luego el color de alta frecuencia Transforme los resultados de muestreo para una compresión, seguida de cuantificación y codificación, y finalmente obtenga una versión comprimida de JPEG. Esta versión comprimida de la imagen es diferente de la imagen de datos original, aunque algunos datos se pierden durante el proceso de compresión, estas diferencias son irreconocibles para el ojo humano. Por lo tanto, después de la compresión, el efecto general de la experiencia de navegación no se ve afectado. Al mismo tiempo, para la página, la capacidad de la imagen de recursos estáticos también se puede reducir mucho, mejorando así la velocidad de carga de la página web.
PNG: la imagen PNG es un formato de imagen que admite transparencia, y su esencia es una recopilación de datos de índice de color. Tiene tres formatos: PNG8, PNG24 y PNG32, a saber, índices de 8 bits, 24 bits y 32 bits. El formato de archivo PNG tiene una paleta de colores adentro. Tome PNG8 como ejemplo: PNG es un formato de 256 colores + función transparente. Hay 256 colores en su paleta de colores, es decir, el color de un píxel. Necesita una longitud de datos de 8 bits para indexar Es decir, el color de la imagen PNG8 solo aparece en estos 256 colores, por lo que el color PNG8 no es tan rico, hay desventajas y ventajas, y su tamaño de archivo también es el más pequeño en el formato de archivo PNG.
La imagen PNG24 necesita 2 ^ 24 colores, es decir, el color de un píxel necesita 24 bits para indexarse, por lo que la longitud de datos requerida para png24 para indexar un color es 3 veces mayor que png8, y no admite transparencia. La imagen png32 está en png24 Sobre la base de agregar una función transparente, la selección de imágenes PNG depende del color de la imagen. Si el color de la imagen no es muy rico y relativamente simple, puede considerar usar imágenes PNG8, si el color de la imagen es muy rico, puede elegir imágenes PNG24 o PNG32 bits para reducir el tamaño de los recursos de imagen. Hay algunas pequeñas diferencias en cada formato de imágenes PNG. En el desarrollo real, debe equilibrar la importancia del tamaño del archivo, el formato de la imagen, la calidad de la imagen y el tamaño de la imagen en el proyecto actual antes de decidir qué formato de imagen utilizar.
JPEG: la tasa de compresión de la imagen es relativamente alta, adecuada para su uso como imagen de fondo, y el caso de la imagen principal es adecuado para el caso de un fondo de área grande.
PNG: el formato admite transparencia. Las imágenes en este formato tienen buena compatibilidad. Se utilizan para algunos fondos o capas emergentes que deben ser transparentes, o en los siguientes casos, debe buscar la calidad de la experiencia y usar imágenes PNG para desarrollar toda la página.
SVG: El otro son los gráficos vectoriales SVG. La mayor ventaja de este formato es que puede ampliarse y reducirse sin distorsión y finura. Al mismo tiempo, el archivo es relativamente pequeño y el formato de imagen está incrustado en el código. Las imágenes, por supuesto, solo se pueden usar para escenarios comerciales simples, como iconos, botones, etc.
En segundo lugar, el
sprite CSS de procesamiento de imágenes : en la actualidad, a pesar de ser un método más común de clasificación de imágenes, su ventaja es fusionar imágenes grandes y pequeñas en una imagen grande, y luego usar el posicionamiento de la imagen para mostrar la imagen correspondiente, lo que puede reducir la página. Solicitud para aumentar la velocidad de carga de la página. Pero también existe la desventaja de que, dado que se sintetiza una imagen grande, muchas imágenes pequeñas dependen de esta imagen. Si esta imagen no se carga, básicamente falta toda la página, pero con la red actual, básicamente también puede ser Ignore este problema, básicamente la red 4G o wifi no es lenta.
Imagen en línea: el uso del formato BASE64 para incrustar en la página también es una buena manera de reducir las solicitudes htttp, pero generalmente se hace menos en el desarrollo real, porque incrustar imágenes en HTML no es fácil de mantener después. Según mi experiencia de desarrollo, el formato de imagen BASE64 se usa generalmente cuando no hay forma de hacerlo.
Por ejemplo, en proyectos de desarrollo, los recursos de imagen generalmente se colocan en direcciones en diferentes dominios. En el caso de utilizar CANVAS para generar imágenes, canvas.toDataUrl (...) contaminará la dirección original de la imagen, lo que provocará problemas entre dominios. Cuando la imagen se genera por separado, usar BASE64 es la solución más simple y grosera. Incrustar imágenes en html resuelve la situación entre dominios.
Compresión: coloque imágenes en algunas herramientas para la compresión por lotes.
Carga y renderizado de páginas HTML
1. El proceso de representación de la página web.
En el proceso de cargar la página web, lo primero que obtienes es un texto HTML, o puedes decir que obtienes una cadena de cadenas. El analizador de análisis del navegador realizará una serie de análisis léxico en esta cadena y generará cada etiqueta correspondiente Un token o un objeto correspondiente a cada etiqueta, luego analice estos tokens de arriba a abajo y luego generará nodos DOM correspondientes de arriba a abajo paso a paso.
Por supuesto, en el proceso de análisis léxico, se puede analizar la etiqueta del script de enlace y se solicitará que cargue el recurso web correspondiente. JavsScript será ejecutado por el motor V8 del núcleo del navegador, y css es similar a html. Será analizado en CSSOM, y luego HTML, CSSM, SCRIPT, combinado después del análisis, para generar esta información básica obtenida por Rander Tree, y luego Ingrese el diseño es el diseño, y finalmente renderice Paint.
En segundo lugar, las características de carga de HTML Carga
secuencial, carga concurrente: la carga
secuencial se refiere al análisis léxico mencionado anteriormente, es decir, cuando el navegador analiza la página HTML de arriba a abajo, se ejecuta en secuencia.
La carga concurrente se refiere al hecho de que los recursos estáticos en el mismo dominio iniciarán solicitudes al mismo tiempo, es decir, solicitudes concurrentes. Por supuesto, hay solicitudes concurrentes, y el servidor también tiene un límite superior para solicitudes concurrentes. Por ejemplo, Google Chrome solicita un recurso simultáneamente en un dominio unificado 6) Cuando necesitamos solicitar una gran cantidad de imágenes, necesitamos usar carga o precarga lenta para operar.
El bloqueo CSS y el bloqueo
CSS JS deben escribirse en la cabecera tanto como sea posible, porque la carga CSS bloqueará la carga de la página, lo cual es beneficioso. Esto evita la situación de que la página parpadee cuando el CSS no se carga cuando se carga la página. , La carga de CSS bloqueará la ejecución de JS, pero no bloquea la carga de JS importados.
js debe escribirse en la parte inferior del texto HTML tanto como sea posible, porque la introducción de js bloqueará la representación de la página y también depende del nodo DOM. Por lo tanto, primero debe cargar HTML y CSS primero, y luego cargar JS, JS cargando, por supuesto, sin afectar la pantalla inicial, también puede usar la carga asincrónica diferida, asíncrona, para cargar archivos JS que no se necesitan de inmediato, diferir Al cargar, en función de la finalización del DOM, cargar y ejecutar secuencialmente, y si el asíncrono se carga secuencialmente, quien cargue primero y luego ejecute, este método debe prestar atención a si JS es dependiente, y el orden de ejecución de JS también depende el uno del otro. Bloquee la ejecución posterior de la lógica JS, por lo que debe organizarlos en orden.
Además de diferir y acync, existe un uso directo de la carga dinámica de js. Generalmente, este método se usará en el caso de componentes, encapsulando un componente y luego cargando dinámicamente JS y CSS usando js.
Lazyload y Preload
Lazyload se usa para cargar una gran cantidad de imágenes, pero puede determinar la cantidad de cargas según la operación del usuario, el propósito es reducir la solicitud al servidor y reducir el desperdicio de tráfico de la red, al tiempo que mejora la experiencia del usuario. Por ejemplo, algunas páginas de comercio electrónico muestran productos y cargan los datos correspondientes en el lugar donde se desplaza el navegador, en lugar de enumerar todos los datos de una vez. También es muy común desplegar y actualizar en la página H5, y abrir para cargar, por supuesto, debido a las características del navegador del IOS, también se requiere algún procesamiento correspondiente.
La precarga se usa en algunas situaciones que deben prestar atención a la experiencia del usuario y a la interacción fluida de la página. Después de cargar la página, todos los datos se cargan primero y luego se abre la página. La forma más común es usar la barra de progreso de carga, primero almacenar todos los recursos estáticos en una matriz y luego cargar el porcentaje calculado por turno, y luego pasar al siguiente paso después de alcanzar el 100%.
Redibujar y refluir
Hablemos del concepto de un marco: en la actualidad, la frecuencia de actualización de la mayoría de las pantallas de los dispositivos es de 60 veces / segundo, es decir, 1000/60 = 1,6 ms es un marco. El navegador debe realizar cualquier procesamiento, por lo que su tiempo de procesamiento debe ser inferior a 1.6 ms o lo más cercano posible a 1.6 ms, de lo contrario, habrá un fenómeno de tartamudeo que afectará la experiencia del usuario. Suponiendo que el tiempo para que el navegador renderice una animación es exactamente un cuadro, entonces el cuadro de este cuadro recalculará primero el estilo (css / dom, etc.) y luego volverá a fluir, actualizará el árbol, luego volverá a pintar (pintar) y finalmente Realizar fusión de capas (Compuesto). Como se muestra a continuación
1. Redibujado y reflujo:
el aspecto más crítico de la optimización del rendimiento de front-end es reducir el rediseño y reflujo de la página.
Reflow (reflow) es el mecanismo que activa el reflujo cuando cambian el diseño y las propiedades geométricas de la página actual.
Repintar (repintar) es que algunas propiedades del árbol de renderizado en sí se han actualizado, pero no afecta el diseño general, solo cambia el fondo, el color, etc. Esto se llama repintar.
Segundo, optimización:
reduzca el redibujo y el reflujo para
evitar el uso de algunos atributos que activarán el reflujo, algunos atributos activarán el mecanismo de reflujo, como: arriba, altura y otros atributos relacionados con el diseño, por ejemplo: método de desplazamiento de animación @keyframes translateX reemplaza top, la siguiente imagen es un ejemplo: Obviamente, hay un paso menos de diseño, esto se debe a que el atributo top que activa el reflujo se reemplaza por translate, lo que reduce el paso de diseño en el proceso de renderizado y reduce el tiempo de renderizado para mejorar Rendimiento
Obviamente, hay un diseño menos, porque el atributo superior que desencadena el reflujo se reemplaza con traducir, lo que reduce el paso de diseño en el proceso de representación y reduce el tiempo de representación para mejorar el rendimiento.
Renderice las capas con frecuencia de forma independiente y elimine el bloque que necesita reflujo y redibujo frecuentes como una capa separada, de modo que se reduzca el rango de redibujo de reflujo del navegador, reduciendo así el consumo de recursos de la CPU. Porque, el proceso de representación del navegador es el siguiente: el
DOM ahora se divide en varias capas;
luego, cada capa se rasteriza y los nodos se dibujan en el gráfico;
luego, la capa se carga en la GPU como una textura; y
finalmente el gráfico Reorganización de capas, siempre que redibujemos y redibujemos independientemente la capa que necesita ser operada, no afectará a otras capas.
De acuerdo con el proceso de renderizado anterior, hablaremos sobre el concepto de aceleración de GPU. Dado que creamos una nueva capa de composición, que en realidad es la aceleración de GPU, existen varios métodos para crear nuevas capas:
conversión 3D o de perspectiva
Use el elemento de video para la decodificación de video acelerada;
el elemento de lienzo de contexto 2D con un contexto o acelerador 3D (WelGL);
el elemento para hacer la operación CSS o la conversión de webkit para su propia opacidad; el elemento
con filtrado CSS acelerado; el
elemento A tiene una z El elemento B con un índice más pequeño que él y el elemento B es una capa de composición (en otras palabras, el elemento se representa en la capa compuesta), entonces el elemento A se promocionará a una capa de composición;
Tome el punto 2 como ejemplo: abra el video en vivo del juego League of Legends:
Podemos ver por qué el video aquí se convierte en una capa, aquí hay una explicación.
Permítanme mencionar el séptimo punto, porque en el proyecto de desarrollo real, especialmente el terminal móvil a menudo encontrará problemas al hacer algunos efectos de animación.
De acuerdo con la imagen de arriba, el elemento B debe estar en una capa de composición separada, y la imagen final de la pantalla debe estar compuesta en la GPU. Pero el elemento A está encima del elemento B. No especificamos el nivel de los elementos A y B. Luego, el navegador forzará una nueva capa de composición para el elemento A en este momento, de modo que tanto A como B se conviertan en capas de composición separadas. Por lo tanto, cuando se usa la aceleración de GPU para mejorar el rendimiento de la animación, es mejor agregar un atributo de índice z más alto al elemento de animación actual para interferir artificialmente con el orden de las capas compuestas, lo que puede reducir efectivamente las capas compuestas innecesarias creadas por Chrome y mejorar el rendimiento de representación.
Al crear una nueva capa, preste atención: la GPU no solo necesita enviar las imágenes de capa renderizadas a la GPU, sino que también debe almacenarlas para su posterior reutilización en la animación. No puede crear capas a voluntad, debe analizar el proyecto actual. Debido a que la creación de una nueva capa tiene un precio, cada nueva capa de representación creada significa una nueva asignación de memoria y una gestión de capa más compleja. Es una gran carga para los usuarios que usan dispositivos móviles.
Almacenamiento del navegador
1.
Cookie de medio de almacenamiento : las cookies se utilizan generalmente para almacenar información de verificación de cuenta o algunos datos de usuario más confidenciales, o cuando la página de cooperación de algunos proyectos en el terminal móvil necesita obtener información de estado de inicio de sesión, puede usar una página de tránsito Cookies para almacenar los datos correspondientes para facilitar el acceso. En general, se utiliza para la interacción CS y el almacenamiento de datos. Debido a que su método de entrega se genera primero desde el servidor, y luego el navegador escribe los datos en la cookie local establecida en el encabezado de los datos devueltos del servidor, y luego cada solicitud http (bajo el mismo nombre de dominio) llevará la información de la cookie, Para que el servidor pueda realizar la autenticación de usuario solicitada
Este es un mecanismo de interacción muy eficiente, pero también trae algunos problemas. Dado que las cookies se traen cada vez, significa que si el número de solicitudes es grande, consumirá tráfico, lo que provocará una carga lenta y un desperdicio de recursos. Los recursos se pueden resolver con cdn para separar el nombre de dominio del sitio principal y el sitio de recursos. Por supuesto, esto también se basa en el caso de una gran cantidad de páginas web. Si el PV de una página web es inferior a 100,000, este es realmente el caso con la red actual Se puede ignorar. Hablando de eso, me recuerda cuando fui a entrevistar a algunas pequeñas empresas en el pasado. Cuando pregunté sobre la optimización del rendimiento web de su compañía, esos líderes técnicos básicamente dijeron: "Si el tráfico no ha alcanzado más de 100,000 , Puedes ver la experiencia normal de la interfaz, lo conveniente que es ". Todos se rieron. Sin embargo, como desarrollador, debemos proceder desde un punto de vista técnico, independientemente del tamaño del proyecto, lo mejor posible.
localStrage & sessionStrage: en comparación con las cookies, estos dos atributos han sido desarrollados recientemente por H5 para almacenar datos. La capacidad puede ser de hasta 5 M. La única diferencia es que los datos permanecen después del cierre y el otro está borrando los datos después de que se cierra el navegador. Se puede usar como almacenamiento temporal de datos, como formulario o datos de carrito de compras.
IndexDB: la API de este navegador es una base de datos del navegador. Solo es necesaria cuando se necesita almacenar una gran cantidad de datos estructurados. Actualmente, esta API rara vez se usa porque el cliente no almacena cantidades particularmente grandes de datos. Los datos se entregan básicamente en segundo plano, y los datos que el front end básicamente necesita almacenar son básicamente datos temporales y datos de verificación. Otro indexDB es crear la aplicación fuera de línea correspondiente.
Trabajador del servidor: se utiliza cuando necesita obtener un archivo JS con un gran volumen y una gran cantidad de cálculo. En el caso de la representación 3D, el archivo js tiene un gran volumen y una gran cantidad de cálculo, y js tiene un solo subproceso. Implementación Esto puede causar una situación atascada. El último js no se procesa, el siguiente js tiene que esperar, SW es independiente de la WEB actual, se pueden procesar diferentes JS en segundo plano, se supervisa la página principal y finalmente se resume. El siguiente es el ciclo de vida de SW:
PWA: la aplicación web progresiva se refiere a un nuevo tipo de modelo de aplicación que logra la mejor experiencia de usuario a través de una serie de nuevas características web y diseño de interfaz de usuario. Esta es también la tendencia de la APLICACIÓN WEB en el futuro. Para decirlo sin rodeos, intentará estar lo más cerca posible de la experiencia de la aplicación nativa, por ejemplo, sus tres direcciones principales. Primero, puede abrir la aplicación y usarla sin una red. El segundo es aumentar la velocidad correspondiente para lograr el mejor efecto de experiencia. El otro es generar el escritorio en el que se puede hacer clic, que es lo mismo que la aplicación normal, y se accede a la pantalla completa y a las funciones de inserción haciendo clic en la aplicación.
Caché del navegador
Una buena estrategia de almacenamiento en caché puede reducir el retraso de las solicitudes http y las páginas web, reducir la carga innecesaria de datos y la carga de la red, mejorando así la velocidad de respuesta de la página y permitiendo a los usuarios tener una mejor experiencia de navegación. Sin embargo, el almacenamiento en caché solo puede mejorar la velocidad de respuesta de abrir la página por segunda vez. La primera vez que se abre la página depende del entorno de red y dispositivo actuales. El caché del navegador es para guardar el archivo en el cliente. Cuando cada sesión, el navegador verificará si la copia en caché todavía está dentro del período de validez. Si es así, el navegador ya no solicitará el archivo al servidor, sino que lo obtendrá y usará directamente en la memoria. Si el archivo ha expirado, el navegador iniciará una solicitud al servidor. Esto puede reducir solicitudes innecesarias y acelerar la respuesta de la página.
La información de caché web se almacenará en httpheader, y algunas estrategias de almacenamiento en caché se pueden configurar a través de algunos atributos en httpheader. A través de esta estrategia, se determina si el recurso necesita solicitar que el servidor se vuelva a cargar. Puede existir en el encabezado de respuesta o en el encabezado de solicitud, el propósito es permitir que el cliente y el servidor conozcan el caché del otro.
Cache-control es el httpheader que controla la estrategia de almacenamiento en caché. Hay: max-age, s-maxage, private, public, no-cache, no-store. Estos atributos se utilizan para configurar un caché y formar una estrategia de caché.
max-age: max-ago se refiere al tiempo efectivo máximo, es decir, el recurso está dentro de este rango de tiempo desde el momento de la solicitud actual, no es necesario iniciar una solicitud de recurso al servidor, el navegador obtiene directamente el archivo de memoria y nosotros Abra el sitio web oficial de King Glory:
Al ver el logotipo aquí, la edad máxima de Cache-control es de 86400 segundos, lo que se traduce en 86400/3600 = 24, lo que significa que dentro de un día de este logotipo, el acceso a esta página web no iniciará una solicitud de recursos al servidor, incluso si el servidor El logotipo de Zhang ha cambiado. Se puede ver desde la memoria caché en la imagen, es decir, obtenerlo de la memoria.
s-maxage: s-maxage es similar a max-age, ambos no inician solicitudes de recursos al servidor dentro de un tiempo especificado, pero hay una diferencia, s-maxage apunta a un caché compartido (se explicará más adelante), Por ejemplo: cdn, y cuando maxage y s-maxage están configurados en un control Cacha, s-maxage anulará maxage y caduca.
privado y público: privado se refiere al caché privado, es decir, el caché al que solo puede acceder el usuario, y público se refiere al caché compartido al que pueden acceder varios navegadores. Si no se especifica privado o público, el público es el predeterminado. Otra cosa a tener en cuenta es que s-maxage debe establecerse en público para que surta efecto.
sin caché: significa que cada vez que el servidor inicia una solicitud para verificar si el caché ha caducado o no es válido, en lugar de maxage, no iniciará una solicitud de recursos al servidor por un período de tiempo. Preste atención al uso de no-cache, puede establecer maxage a 0, y establecer el atributo a private:
Cache-control: private, maxage: 0, no-cache
No-store se refiere a la prohibición del almacenamiento en caché, que requiere solicitudes de recursos cada vez que se carga.
Caduca: Caduca se utiliza para establecer el tiempo de caducidad de la memoria caché. Al igual que max-age, se especifica dentro de un tiempo determinado. Mientras la caché surta efecto, no solicitará recursos del servidor. Sin embargo, la prioridad de max-age es mayor. Se usa para caducar, y debe usarse con la última modificación, porque caduca es un caché fuerte, ya sea que inicie una solicitud al servidor dentro de un tiempo especificado, independientemente de si el archivo se actualiza en el lado del servidor. Otro punto es que Expires apareció relativamente temprano, por lo que tiene una ventaja en la compatibilidad del navegador.
Última modificación y última modificación: la última modificación y última modificación se refiere a la última hora de modificación del archivo, que se basa en el mecanismo de negociación de la memoria caché del cliente y el servidor. La última modificación se almacena en el encabezado de respuesta y la modificación de si se almacena en el encabezado de solicitud. En
Vemos que hay un tiempo en el encabezado de respuesta modificado por última vez, este es el momento del último tiempo de modificación de este archivo en el servidor, el navegador guardará este tiempo, cuando la próxima solicitud, el encabezado de solicitud si se modifica Como habrá esta vez, dígale al servidor este archivo, la última actualización es esta vez. Si, en este momento, el archivo en el servidor ha cambiado, volverá a cargar y devolverá el código de estado 200. Si el recurso en el servidor no ha cambiado, el navegador obtendrá directamente el caché y devolverá 304.
Etag y if-none-Match: el servidor genera un valor hash basado en el contenido del archivo para identificar el estado del recurso. Cuando la solicitud se realiza al servidor por segunda vez, el servidor verificará si el hash es consistente para determinar si el archivo ha ocurrido Cambios, ¿qué problema puede resolver? Solo el último caso modificado tendrá los siguientes defectos: el
archivo del servidor ha cambiado, pero el contenido no ha cambiado; el
servidor no puede obtener con precisión la última hora de modificación del
recurso ; el recurso se ha operado en segundos, última modificación no se reconoce;
Etag se basa en el contenido, no importa qué operación, siempre que el contenido cambie, el valor hash debe cambiar. La otra es que etag tiene una prioridad más alta que la última modificación. Una cosa más para agregar: Última modificación y ETag solo se usa cuando el navegador se verifica nuevamente. Primero debe determinar la caducidad de la caché (edad máxima) antes de usar estas dos cosas, por supuesto, ETag tiene prioridad El nivel es más alto que la Última modificación.
Personalización de la estrategia de caché:
he clasificado las estrategias de caché en dos categorías. Una es la estrategia de caché para recursos estáticos, pero la otra para recursos dinámicos. Puede haber nuevos métodos en el futuro, y los escribiré a su debido tiempo. Primero tenga en cuenta que el caché debe dividirse en compartido o privado, primero para evitar que el proxy lo almacene en caché, y segundo, para desarrollar un buen hábito de prestar atención a las especificaciones del código.
Recursos estáticos: los recursos estáticos se refieren a archivos como css, javascript, txt e imágenes que no se modificarán. Para archivos como css, javascript, especificaremos el número de versión al empaquetar, es decir, hay un nombre con un sufijo, una vez que se produce el cambio, se actualizará todo el archivo. Por lo tanto, para los recursos estáticos, la estrategia de almacenamiento en caché es relativamente simple: solo realice algunas modificaciones apropiadas en función del proyecto actual.
Recursos dinámicos: recursos dinámicos, como la información de precios de acciones, futuros, etc. Aquí, los recursos son recursos compartidos. El navegador o el servidor proxy comprobará si hay la última versión cada vez que los haya. Se puede configurar de la siguiente manera:
Cache-control: public, no-cache, no-store
puede guardar algunos datos por un período de tiempo, luego max-ago = ... (segundos), se puede convertir según las necesidades, por ejemplo: caché Válido por una hora
Control de caché: público, max-age = 86400
Una hora más tarde, necesita controlar estrictamente el caché, puede usarlo nuevamente:
Cache-control: public, max-age = 86400, no-cache o must-revalidate
De hecho, también se basa en la demanda, la configuración no es más que un comando.
Variar: Aceptar-Codificar Esto es para recursos que están habilitados con compresión gzip y almacenados en caché por el servidor proxy. Si el cliente no admite compresión, entonces los datos correctos pueden no obtenerse en este caso, por lo que el servidor proxy puede aparecer dos Una versión del recurso, una está comprimida y la otra sin comprimir. Otra razón es Internet Explorer, Internet Explorer no admite ningún recurso con encabezado Very, pero el valor no es Accept-Encoding y user-Agent
Resumen: el plan de optimización de la página debe ajustarse de acuerdo con las necesidades del proyecto actual para lograr la mejor experiencia real.