Wondershare EdrawMind
Galería de mapas mentales Optimización del rendimiento del enlace completo del front-end y optimización del proceso de desarrollo de ID
- 1
Optimización del rendimiento del enlace completo del front-end y optimización del proceso de desarrollo de ID
Optimización del rendimiento del enlace completo del front-end: optimización del proceso de I D y desarrollo, incluido el desarrollo híbrido, CDN/DNS, HTTP, cookies, servidor, HTTPS, HTTP-2, etc. para optimizar el proceso de I D y desarrollo.
Editado a las 2021-01-01 19:46:28,
Optimización del rendimiento del enlace completo del front-end y optimización del proceso de desarrollo de ID
- Recomendados
- Resumen
Optimización del rendimiento del enlace completo del front-end y optimización del proceso de desarrollo de I+D
4. HTTP: ¿Cómo reducir la cantidad de solicitudes HTTP?
Sprites CSS
Las imágenes utilizan DataURL, fuente web
Fusión de archivos JS/CSS
Combinación de solicitudes JS/CSS
Fusión de interfaz
Almacenamiento de interfaz LocalStorage
Almacenamiento de recursos estáticos LocalStorage
5. Cookies: Estrategias y beneficios de reducir el tamaño de las cookies
Estrategia
Establecer lista blanca en la página de inicio del sitio web principal
Eliminar periódicamente las cookies no incluidas en la lista blanca
beneficio
Reducir el tamaño de transferencia entre páginas
Gestionar eficazmente las cookies
6. servidor
Soluciones de configuración y optimización de caché
Vence
definición
El encabezado de la respuesta contiene la fecha/hora después de la cual caduca la respuesta.
Una fecha no válida, como 0, representa una fecha en el pasado, es decir, el recurso ha caducado.
Si la directiva "max-age" o "s-max-age" está configurada en el encabezado de respuesta de Cache-Control, se ignorará el encabezado Expires.
gramática:
Vence: martes, 17 de diciembre de 2019 07:01:44 GMT
Ejemplo:
Vence: martes, 17 de diciembre de 2019 07:01:44 GMT
Control de caché
definición
Un campo de encabezado de mensaje general que implementa el mecanismo de almacenamiento en caché especificando instrucciones. Las directivas de almacenamiento en caché son unidireccionales, lo que significa que las directivas establecidas en la solicitud no necesariamente se incluyen en la respuesta.
gramática
Cache-Control: max-age=[Establezca el período máximo de almacenamiento en caché. Después de este tiempo, el caché se considera caducado (en segundos). A diferencia de Expires, el tiempo es relativo al momento de la solicitud]
Ejemplo
Control de caché: edad máxima = 600
etiqueta ET
definición
Un encabezado de respuesta HTTP es un identificador de una versión específica de un recurso. Esto hace que el almacenamiento en caché sea más eficiente y ahorra ancho de banda porque el servidor web no necesita enviar una respuesta completa si el contenido no ha cambiado. Y si el contenido cambia, el uso de ETag ayuda a evitar que las actualizaciones simultáneas de recursos se sobrescriban entre sí.
Si hay un cambio voluntario en una URL determinada, se debe generar un nuevo valor de ETag. Por lo tanto, las ETags son similares a las huellas dactilares y algunos servidores también pueden utilizarlas para el seguimiento. La comparación de ETags puede determinar rápidamente si este recurso ha cambiado, pero también puede persistir permanentemente mediante servidores de seguimiento.
gramática:
Etiqueta ET: "<valor_etiqueta>"
Ejemplo
Etiqueta ET: "<5c6ccc12-1d45>"
Última modificación
Lat-Modified es un encabezado de respuesta que contiene la fecha y hora en que se modificó el recurso identificado por el servidor de origen. A menudo se utiliza como validador para determinar si los recursos recibidos o almacenados son coherentes entre sí. Este es un mecanismo alternativo ya que es menos preciso que ETag. Las solicitudes condicionales que contengan encabezados If-Modified-Since o If-Unmodified-Since utilizarán este campo
gramática
Última modificación: <nombre del día>, <día>, <mes>, <año>, <hora>: <minuto>: <segundo> GMT
Ejemplo
Última modificación: Web, 20 de febrero de 2019 03:40:02 GMT
Fecha
definición:
La fecha es un encabezado común que contiene la fecha y hora en que se creó el mensaje.
gramática
Fecha: <nombre-día>, <día>, <mes>, <año>, <hora>: <minuto>: <segundo> GMT
Ejemplo
Fecha: martes 17 de febrero de 2019 03:40:02 GMT
Estado
definición
Los códigos de estado de respuesta HTTP indican si una solicitud HTTP específica se completó correctamente. Las respuestas se dividen en cinco categorías: respuestas informativas (100 - 199), respuestas exitosas (200 - 299), redirecciones (300 - 399), errores del cliente (400 - 499) y errores del servidor (500 - 599).
Ejemplo
Estado: 200
Cómo habilitar y configurar la compresión gzip
beneficio
Comprimir texto (HTML/CSS/JS)
Sin compresión para texto que no sea texto (jpg/gif/png)
Relación de compresión alrededor del 50% - 70%
Método de configuración
Configuración de Nginx: el archivo nginx.conf agrega gzip
Configuración de Apache: AddOutputFilterByType y AddOutputFilter
Detección de validez
Encabezado de respuesta Compruebe si hay codificación de contenido: gzip, lo que significa que gzip está activado en el servidor.
7. HTTPS: Cómo habilitar HTTPS para todo el sitio
concepto basico
HTTPS, Protocolo seguro de transferencia de hipertexto, es un protocolo de transferencia para comunicaciones seguras a través de redes informáticas.
HTTPS se comunica a través de HTTP pero utiliza SSL/TLS para el cifrado de datos
El objetivo principal de HTTPS es proporcionar autenticación de identidad del servidor y proteger la privacidad e integridad de los datos.
principio de funcionamiento
El navegador inicia una solicitud HTTPS
Certificado de transferencia
El navegador analiza el certificado
Enviar información cifrada
El servidor descifra la información
Transferir información cifrada
El navegador descifra la información
ventaja
SEO
Seguridad
implementar
Certificado de compra del distribuidor
GoGetSSL
SSLs.com
SSLmate.com
Certificado de prueba local
Instalación local de HomeBrew: instalación de cerveza mkcert
Instale el certificado raíz localmente: $ mkcert --install
Generar firma localmente: $mkcert 123.com //Generar certificado para 123.com
Configuración local de nginx
8. HTTP-2: ¿Cuáles son los beneficios de actualizar HTTP-2? ¿Cómo actualizar?
Conceptos HTTP/2
HTTP/2 (Protocolo de transferencia de hipertexto versión 2, originalmente llamado HTTP 2.0), denominado h2 (conexión cifrada basada en TLS/1.2 o superior) o h2c (conexión no cifrada), es la segunda versión principal del protocolo HTTP.
Ventajas de HTTP/2
Transferir datos en formato binario
Multiplexación, que permite realizar múltiples solicitudes a través de una única conexión HTTP/2
Compresión de encabezado, volumen de transmisión pequeño
Server Push, el servidor puede enviar recursos al cliente más rápido
Ventajas de los sitios HTTP/2
Puede reducir la presión del servidor
Mejorar la velocidad de acceso al sitio web
Mantenga su sitio web seguro
Habilitar HTTP/2 en Nginx
Actualizar OpenSSL: $ versión openssl
Recompilar
$ cd nginx-xxx
$ ./configure --con-http_ssl_module --con-http_v2_module
$ hacer && hacer instalar
Verificar HTTP/2
Comprueba en el navegador si hay un pequeño candado verde.
Captura de pantalla de solicitud del navegador
3. DNS: ¿Cuáles son los principales métodos de optimización de DNS?
definición
El sistema de nombres de dominio es una base de datos distribuida que asigna nombres de dominio de sitios web y direcciones IP entre sí, lo que facilita el acceso a Internet.
Procesamiento de clientes
Módulo DNS de Android (okhttp)
Admite HTTP/2 HTTP/2 admite la simultaneidad en una única conexión TCP mediante el uso de tecnología de multiplexación para enviar o recibir datos mediante el envío de múltiples solicitudes a la vez en una única conexión.
Si HTTP/2 no está disponible, la tecnología de reutilización del grupo de conexiones también puede reducir en gran medida la latencia.
Admite GZIP para comprimir el tamaño de descarga
El almacenamiento en caché correspondiente puede evitar por completo solicitudes de red repetidas
Si el servidor está configurado con múltiples direcciones IP, cuando falla la primera conexión IP, OkHttp probará automáticamente la siguiente IP
Módulo DNS de iOS (desarrollo propio)
Cuando se inicia la aplicación, almacena en caché todos los nombres de dominio e IP que se pueden utilizar y los procesa de forma asincrónica. El cliente no necesita obtener los resultados almacenados en caché.
Si hay un caché para este nombre de dominio en el caché, la IP almacenada en caché se devolverá directamente.
Si este nombre de dominio no está en el caché, solicítelo nuevamente al SERVIDOR HTTPDNS y el resultado se devolverá en esta devolución de llamada.
Procesamiento frontal
Límite de simultaneidad del navegador, distribución establecida para varios nombres de dominio
Acceso de usuario: Java, PHP y otras interfaces API
Páginas y estilos: HTML/CSS/JS
Imágenes: jpg, png, gif, etc.
2. CDN: ¿Cómo configurar correctamente la caché CDN?
definición
Content Delivery Network (CDN) utiliza el servidor más cercano a cada usuario para enviar archivos a la red de distribución de usuarios de forma más rápida y confiable.
ventaja
Acelerar: a los usuarios se les asignarán nodos de servidor más cercanos y más fluidos para transmitir datos a los usuarios.
Bajo costo: los servidores se ubican en diferentes ubicaciones, lo que reduce el tráfico de interconexión y reduce los costos de ancho de banda.
Alta disponibilidad: cuando un servidor falla, los servidores en áreas cercanas se llaman automáticamente
CDN de regreso al origen
Volver al origen significa que cuando el navegador accede a archivos estáticos en el clúster CDN, el caché del archivo caduca y penetra directamente en el clúster CDN para acceder a la máquina de origen.
caché CDN
Caché de nivel 3: caché local del navegador, caché del nodo perimetral de CDN, caché del sitio de origen de CDN
Configuración de caché: si el tiempo de caché es demasiado corto, el caché del nodo perimetral de CDN a menudo falla, lo que resulta en retornos frecuentes al origen, lo que aumenta la carga en el sitio de origen y el acceso es lento si el tiempo de caché es demasiado largo, actualizaciones de archivos; son lentos y el caché local del usuario no se puede actualizar a tiempo, por lo que depende de la situación empresarial.
Tiempo de caché de diferentes tipos de recursos estáticos
HTML: 3 minutos
JS, CSS: 10 minutos, 1 día, 30 días
Lanzamiento de CDN en escala de grises
Principio: en algunas regiones y en algunos operadores de algunas regiones, los recursos estáticos se liberarán primero después de la verificación.
Implementación: en términos de nombres de dominio, configure VIP especiales para resolver en las ciudades y operadores que deben ser escalados en escala de grises, en términos de máquinas del sitio de origen, configure máquinas de sitio de origen separadas para ciudades y operadores en escala de grises para resolver; estas máquinas únicas
CDN se prepara para una gran promoción
Aumentar el ancho de banda de la sala de ordenadores
Incrementar el tráfico de operadores
Recuperación ante desastres: el tiempo de caché de la aplicación CDN se establece entre 10 minutos y 1 hora y se restaurará después de la promoción importante.
1. Desarrollo híbrido
Introducción al núcleo y ventajas de los mini programas.
Visión
A su alcance: los usuarios pueden abrir la aplicación escaneando o buscando
Úselo y listo: no se preocupe por instalar demasiadas aplicaciones
Ventajas técnicas
H5 tiene un umbral de desarrollo más bajo que el desarrollo de aplicaciones
Mejor que H5, cercano a la experiencia nativa
Ricas capacidades nativas como cámara, ubicación, red, almacenamiento, etc.
El menú desplegable superior, la búsqueda, el código QR y otras entradas son fáciles de usar y desaparecen después de su uso, lo cual es simple y conveniente.
No es necesario descargarla como una aplicación, simplemente ábrala y salga directamente, admite actualizaciones en caliente
núcleo subyacente
conocimiento de los negocios
Lado de la plataforma de la aplicación
Monetización del tráfico
Mini programa de ecología.
Mercado de distribución de aplicaciones de clase.
Lado de la aplicación empresarial
El tráfico móvil se está agotando, el tráfico nuevo es una ventaja
Resuelva algunos de los problemas de dificultad para adquirir clientes y reduzca el costo de atraer nuevos clientes.
Reducir drásticamente los costos de desarrollo.
Más oportunidades de prueba y error en los negocios
Sugerencias de selección
Lanzado por primera vez: enero de 2017 (miniprograma WeChat)
Inicio de Github: código cerrado
Comunidad activa: OK
Componentes: muy rico
Curva de aprendizaje: muy baja
Rendimiento nativo: OK
Sugerencias integrales: los productos de la plataforma ahora tienen salida de tráfico a los comerciantes; múltiples aplicaciones permiten la interoperabilidad empresarial, en comparación con RN y Flutter, se recomiendan más programas pequeños;
Introducción al núcleo de Flutter y sus ventajas.
Visión
Un práctico conjunto de herramientas para una hermosa experiencia de construcción que te permite dibujar píxeles en cualquier lugar de la pantalla.
Ventajas técnicas
Escriba una vez e implemente en cada terminal: Web, Android/iOS, Mac/Linux/Windows, Fuchsia OS
La capa inferior utiliza el motor de gráficos Skia y el rendimiento de los gráficos es comparable al de las aplicaciones nativas.
Interfaz como una aplicación de pantalla completa o un juego 2D
Rápido, utiliza binarios ARM nativos, se compila con anticipación, no se requiere JVM
principios subyacentes
Sugerencias de selección
mayo 2017
Inicio de Github: 8.16w (finales de 2019)
La comunidad es generalmente activa.
Los componentes son widgets especializados y no son lo suficientemente ricos.
La curva de aprendizaje es relativamente alta, familiarizándose nuevamente con el lenguaje Dart.
El nativo funciona mejor
Sugerencias integrales: teniendo en cuenta el rendimiento, el negocio está orientado a múltiples terminales y el equipo de la aplicación tiene suficiente gente, se recomienda elegir