Optimización del rendimiento

1. Para personal de front-end

2. Mainstream, para Chrome,

3. Varios, resumen

Optimización: md

La función y composición del navegador.

Red: el navegador descarga varios recursos a través del módulo de red, como texto html; código javascript; hoja de estilo; imágenes; archivos de audio y video, etc. La parte de la red es particularmente importante porque lleva mucho tiempo y requiere un acceso seguro a los recursos de Internet.

Gestión de recursos: Los recursos descargados de la red u obtenidos localmente necesitan tener un mecanismo eficiente para gestionarlos. Por ejemplo, cómo evitar descargas repetidas, cómo almacenar recursos en caché, etc.

Navegación web: esta es la función principal y más básica del navegador, la función más importante. Cómo convertir recursos en resultados visuales.

Gestión de varias páginas:

Complemento y gestión:

Sincronización de cuenta

Mecanismo de seguridad

Herramientas de desarrollo

...

El kernel del navegador (motor de renderizado)

Existe uno de los módulos más importantes del navegador, cuya función principal es convertir todos los recursos solicitados en imágenes visuales.
Este módulo es el núcleo del navegador, normalmente también se denomina motor de renderizado.
Resumen del kernel del navegador:

IE ----------> Tridente

Safari ------> WebKit El
propio WebKit está compuesto principalmente por dos motores pequeños,
uno es el motor de renderizado "WebCore" y el
otro es el motor de interpretación de javascript "JSCore",
ambos derivados del motor de renderizado KHTML de KDE Y se deriva el motor de interpretación de JavaScript KJS.

Chrome ------> WebKit branch engine -----> Blink
en 13 años, la versión lanzada de Chrome 28.0.1469.0 se inicia, Chrome abandona las revoluciones del motor Chromium
y usa el último motor Blink (basado en WebKit2 de Apple-- El nuevo Motor WebKit lanzado en 2010)
En comparación con el motor de la generación anterior , Blink simplifica el código, mejora el marco DOM y también mejora la seguridad.

Opera
versión antigua de Opera 4 a 6 versiones: Elektra motor de composición
Opera7.0: Presto motor de renderizado
Opera anunció en febrero de 2013 que abandonaría Presto:
utilizar el motor de cromo;
se ha convertido en el motor de parpadeo;

Firefox ------> Gecko

Proceso e hilo

Proceso: Una vez que se ejecuta un programa, ocupa un espacio de memoria único y es la unidad básica de ejecución del sistema operativo.

Hay al menos un subproceso en ejecución en un proceso: el subproceso principal, que se crea automáticamente después de que se inicia el proceso.

Un proceso también puede ejecutar varios subprocesos, decimos que el programa se ejecuta en varios subprocesos.

Los datos de un proceso se pueden compartir entre varios subprocesos y los datos entre varios procesos no se pueden compartir.

Subproceso: Es una unidad de ejecución independiente dentro de un proceso y es la unidad más pequeña de programación de CPU. La unidad básica de operación del programa.

Grupo de subprocesos: un contenedor que contiene varios objetos de subproceso para realizar el uso repetido de objetos de subproceso.

¡El motor JS funciona en un solo hilo!

Navegadores modernos: modelo multiproceso y multiproceso

1. Pasado insoportable:
cuando abre muchas páginas a través del navegador, si una de las páginas deja de responder o se bloquea,
se producirán más cosas desafortunadas y todas las páginas que abra aparecerán Si no hay respuesta, lo
más insoportable es que algunas de las páginas también pueden contener información no guardada o no enviada

2. ¿Cómo lo resuelven los fabricantes de navegadores?
El uso de un modelo multiproceso, el modelo puede traer beneficios
①. Evite la estabilidad de todo el navegador debido a que una sola página no responde o se bloquea
②. Cuando un complemento de terceros falla, no afectará la estabilidad del todo el navegador
③ .Seguridad

3. Qué procesos hay en el navegador
①. Proceso del
navegador : el proceso principal del navegador, responsable de la visualización de la interfaz del navegador, y la gestión de cada página,
el antepasado de todos los demás tipos de procesos en el navegador, responsable de la creación y destrucción de otros procesos
Tiene uno y solo uno !!!
②. Proceso de
renderizado : proceso de renderizado de la página web, responsable de la renderización de la página, puede haber múltiples, por
supuesto, el número de procesos de renderizado no es necesariamente igual al número de páginas web que abre
③. Varios procesos de complementos
④ Proceso de GPU
Los navegadores de los dispositivos móviles pueden ser diferentes:
Android no admite complementos, por lo que no hay un proceso de complementos. La
GPU se ha convertido en un hilo del proceso del navegador El
proceso del renderizador se ha convertido en un proceso de servicio del sistema operativo, que sigue siendo independiente.

4. Hay muchos subprocesos dentro de cada proceso
. El propósito del subproceso múltiple es mantener la interfaz de usuario con una alta capacidad de respuesta.
Por ejemplo: para evitar que el subproceso de la interfaz de usuario del proceso del navegador se vea afectado por otras operaciones que consumen mucho tiempo (carga de archivos, lectura y escritura de archivos locales) Bloqueo,
luego colocamos estas operaciones en el subproceso para tratar.
En el proceso de renderizado, para no permitir que otras operaciones bloqueen la ejecución de alta velocidad del subproceso de renderizado, normalmente [canalizamos] el proceso de renderizado,
utilizando las ventajas de múltiples núcleos de la computadora para permitir que se ejecuten diferentes etapas de renderizado en diferentes hilos (el hilo de renderizado no puede ralentizarse)

Motor de renderizado del navegador

Módulo principal

Un motor de renderizado incluye principalmente: analizador HTML, analizador CSS, motor javascript, módulo de diseño, módulo de dibujo
- Analizador de HTML: Analizador que interpreta documentos HTML. Su función principal es interpretar texto HTML en un árbol DOM.
- Analizador CSS: su función es calcular la información de estilo para cada objeto de elemento en el DOM y proporcionar infraestructura para el diseño
- Motor Javascript: use código Javascript para modificar el contenido de la página web y también modificar la información CSS. El motor javascript puede interpretar el código javascript y modificar el contenido y la información de estilo de la página web a través de la interfaz DOM y la interfaz de árbol CSS, cambiando así el resultado de la representación.
- Diseño (diseño): después de que se crea el DOM, Webkit necesita combinar el mismo tipo de información de los objetos del elemento en él, calcular su tamaño y posición y otra información de diseño, para formar un modelo de representación interno que pueda expresar toda esta información.
- Módulo de dibujo (pintura): use la biblioteca de gráficos para dibujar los nodos de cada página web después del cálculo del diseño en los resultados de la imagen
Observaciones: Modelo de objetos de documento (DOM)

Proceso de renderizado aproximado

Todo el proceso del navegador que representa la página: el navegador analizará el documento de arriba a abajo.
1. Cuando encuentre etiquetas HTML , llame a la fuente del analizador HTML para analizar los tokens correspondientes (un token es la serialización de un texto de etiqueta) y construir un árbol DOM (es decir, una pieza de memoria, que almacena tokens y establece la relación entre ellos) .
2. Cuando se encuentra la etiqueta de estilo / enlace, se llama al analizador correspondiente para procesar la etiqueta CSS y construir un árbol de estilo CSS .
3. Cuando encuentre etiquetas de script , llame al motor javascript para procesar etiquetas de script, vincular eventos, modificar el árbol DOM / árbol CSS, etc.
4. Combine el árbol DOM y el árbol CSS en un árbol de renderizado .
5. Renderice de acuerdo con el árbol de renderizado para calcular la información geométrica de cada nodo (este proceso necesita depender de la GPU).
6. Finalmente, cada nodo se dibuja en la pantalla.

Los módulos anteriores se basan en muchos otros módulos básicos, incluido el decodificador de video y audio de imagen 2D / 3D de almacenamiento en red y el decodificador de imagen.
Entonces, el motor de renderizado también incluirá cómo usar estos módulos dependientes.

Dos, bloqueo de renderizado

1. Acerca del bloqueo de CSS:

Descargo de responsabilidad: solo el CSS externo introducido por el enlace puede causar bloqueo.
1. El estilo en la etiqueta de estilo :
(1). Es analizado por el analizador html;
(2). No bloquea la representación del navegador (puede producir un "fenómeno de pantalla flash");
(3). No bloquea el análisis DOM;

2. Estilo CSS externo introducido por enlace (método recomendado) :
(1) Es analizado por un analizador CSS. Análisis síncrono
(2) Bloquear la representación del navegador (este bloqueo se puede utilizar para evitar el "fenómeno de pantalla flash").
(3). Bloquee la ejecución de las siguientes declaraciones js (JS y CSS pueden tener estilo)
(4). No bloquee el análisis de DOM (la forma en que funcionan la mayoría de los navegadores):

3. Optimice el concepto central: mejore la velocidad de carga del CSS externo lo más rápido posible
(1) Utilice nodos CDN para acelerar los recursos externos.
(2) Comprimir css (usando herramientas de empaque, como webpack, gulp, etc.).
(3) Reduzca el número de solicitudes http y combine varios archivos css.
(4). Optimiza el código de la hoja de estilo.

2. Acerca del bloqueo de js:

1. Bloquear el análisis de DOM subsiguiente :
Razón: el navegador no conoce el contenido del script subsiguiente. Si se analiza primero el DOM siguiente y el js subsiguiente borra todo el DOM subsiguiente,
el navegador hará un trabajo inútil, navegando en el El navegador no puede predecir qué operaciones específicas se realizan en el script. Por ejemplo, operaciones como document.write
simplemente se detienen. Después de ejecutar el script, el navegador continúa analizando el DOM hacia abajo.
2. Bloquear la representación de la página :
Razón: JS también puede establecer estilos para el DOM, el navegador espera a que se ejecute el script y genera un resultado final, evitando trabajos inútiles.
3. bloquear la implementación del seguimiento js :
razones: para mantener dependencias, tales como: la introducción de jQuery debe reintroducirse bootstrap

3. Observaciones

[Nota 1]: El análisis de CSS y la ejecución de js son mutuamente excluyentes (mutuamente excluyentes), js deja de ejecutarse cuando se analiza css y css deja de analizar cuando se ejecuta js.

[Nota 2]: Ya sea bloqueando css, js o bloqueado, no obstruirá el navegador para cargar activos externos (imágenes, video, estilo, guión, etc.)
motivos: siempre en un navegador: "Ponga la solicitud hecha para" funcionar Modo, siempre que involucre el contenido de la solicitud de red,
ya sea: imágenes, estilos, scripts, primero enviará una solicitud para obtener recursos, en cuanto a cuando los recursos se utilizan localmente, el
navegador mismo coordina. Este enfoque es muy eficaz.

[Nota 3]: Tanto WebKit como Firefox han realizado la optimización [análisis previo]. Al ejecutar el script js, otros subprocesos del navegador analizarán previamente el resto del documento, buscarán y cargarán otros recursos que deben cargarse a través de la red. De esta manera, los recursos se pueden cargar en conexiones paralelas,
aumentando así la velocidad general. Tenga en cuenta que el pre-analizador no modifica el árbol DOM

En el proceso anterior, los eventos "DOMContentLoaded" y "onload" se activarán durante la carga y presentación de la página web
, respectivamente, después de que se construya (analice) el árbol DOM y después de que se construya el árbol DOM y los recursos que la página web depende de se cargan.

Lo anterior es un proceso de renderizado completo, pero muchas páginas web modernas son dinámicas, lo que significa que una vez que se completa el renderizado, el
navegador ha estado ejecutando repetidamente el proceso de renderizado debido a la animación de la página web o la interacción del usuario . (Vuelva a dibujar y reorganice). Los números anteriores indican el orden básico, que no es estrictamente consistente.
Este proceso puede repetirse o cruzarse.

Los diferentes navegadores tienen diferentes analizadores CSS.

El navegador encuentra el servidor para algo

Recibir respuesta: el "encabezado de respuesta" de los datos recibidos, el código de estado

Recibir datos: se están transmitiendo los datos reales.

Representación de estilo

Análisis asincrónico: sin bloqueo. (Más eficiente) -llamada

Análisis síncrono: bloqueo.

1. El analizador HTML analiza el estilo de la etiqueta Estilo.

2. El estilo interno escrito en la etiqueta de estilo de página se analiza de forma asincrónica (propenso al fenómeno de pantalla flash)

3. El navegador carga recursos [asincrónico]

Vincular renderizado CSS externo

El acceso del navegador a los recursos es asincrónico.

1. Los estilos en los que viene el enlace se analizan mediante parse Stylesheet (CSS) y se analizan sincrónicamente.

2. El analizador css bloqueará la representación de la página. (El estilo externo en el que viene el enlace bloqueará la representación de la página y evitará la pantalla de bienvenida)

3. Se recomienda utilizar el enlace

Capas CSS

Disposición: Disposición ---- Disposición --------- Reorganización (reorganización / reflujo)

Pintura: dibujo ---- dibujo -------- repintado (repintado)

Cuando el navegador representa una página, la divide en muchas capas, con capas grandes y pequeñas, y cada capa tiene uno o más nodos.

Condiciones para la creación de capas

El navegador Chrome creará una capa cuando se cumpla alguna de las siguientes condiciones:

Tener propiedades CSS con transformaciones 3D (translateZ)
Utilice el nodo de decodificación de video acelerado ------ con etiqueta de video
Hay nodos
Nodos de animación CSS3
Elementos con atributos de aceleración CSS (cambiará cambiará)

Al renderizar el DOM, lo que hace el navegador es en realidad:

	1. 获取DOM后分割为多个图层
    	2. 对每个图层的节点计算样式结果		（Recalculate style--样式重计算）
        3. <font color=red>为每个节点生成图形和位置	</font>		（Layout--布局，重排,回流）
        4. <font color=red>将每个节点绘制填充到图层位图中	</font>	（Paint--重绘）
        5. <font color=red>图层作为纹理上传至GPU</font>
        6. 组合多个图层到页面上生成最终屏幕图像	（Composite Layers--图层重组）

Repintar

Redibujar es un comportamiento del navegador provocado por un cambio en la apariencia de un elemento, como el cambio de atributos como el contorno y el color de fondo. El navegador volverá a dibujar de acuerdo con los nuevos atributos del
elemento para darle al elemento una nueva apariencia. Redibujar no produce rediseño, por lo que no necesariamente acompaña a la redistribución.

Cabe señalar que el rediseño y la reorganización se basan en la capa. Si un elemento de la capa necesita ser redibujado, entonces toda la capa debe ser redibujada.
Entonces, para mejorar el rendimiento, deberíamos dejar que estas "cosas cambiantes" tengan sus propias capas,
pero afortunadamente, la mayoría de los navegadores crearán automáticamente capas para los nodos de animación CSS3.

Reordenamiento (Reflujo también conocido como: reflujo)

Cuando el objeto de renderizado se crea y se agrega al árbol de render, no contiene información de posición y tamaño. El proceso de cálculo de estos valores se denomina diseño o reordenación.

"Redibujar" no requiere necesariamente "reorganizar". Por ejemplo, cambiar el color de un elemento de una página web solo activará "redibujar" y no "reorganizar" porque el diseño no ha cambiado.
"Redistribuir" conducirá a "redibujar" en la mayoría de los casos. Por ejemplo, cambiar la posición de un elemento de una página web activará tanto "redistribución" como "redibujar" porque el diseño cambia.

El atributo que desencadena el rediseño.

color * fondo * color de
contorno estilo rder * imagen de fondo * contorno
- radio de borde * posición de fondo * capacidad de estilo de
  contorno * repetición de fondo * ancho de contorno
  - decoración de texto * tamaño de fondo * sombra de caja

Atributos que desencadenan el reordenamiento (reflujo)

ancho * superior * alineación de texto
derecha * inferior * desbordamiento-y
- padding * left * font-weight
  rgin * right * overflow
  - display * position * font-family
    rder-width * float * line-height
    - borde * claro * alineación vertical
      n-altura * espacio en blanco

(Clave) Operaciones comunes de reordenamiento

El costo de Reflujo (reordenamiento) es mucho más alto que el costo de Repintar (repintar).
Es probable que el reflujo de un nodo conduzca al reflujo del nodo secundario, o incluso al nodo principal y a los nodos del mismo nivel.
Puede que no sea mucho en algunas computadoras de alto rendimiento, pero si Reflow ocurre en un teléfono móvil, el proceso es muy doloroso y consume mucha energía.
(Los juegos desarrollados con H5 generan calor en el terminal móvil y consumen mucha energía)

Por lo tanto, es probable que las siguientes acciones sean relativamente caras.
1. Cuando agregue, elimine o modifique nodos DOM, provocará Reflujo y Repintado.
2. Cuando mueve la posición del DOM
3. Cuando modifica el estilo CSS.
4. Al cambiar el tamaño de la ventana (acercar y reducir la ventana) (el terminal móvil no tiene este problema, porque el zoom del terminal móvil no afecta la ventana gráfica de diseño)
5. Cuando modifica la fuente predeterminada de la web página.
[¡Al obtener algunos atributos (ancho, alto ...)! ! ! ! ! 】
Nota: pantalla: ninguno (ocultos no ocupados) activará el reflujo y visibilidad: ocultos (ocultos ocupados) sólo activará el repintado, porque no hay cambio de posición.

Esquema optimizado para volver a dibujar y reorganizar

Sabemos que el navegador ha seguido los siguientes pasos "detallados" al renderizar la página:

	1. 计算需要被加载到节点上的样式结果（Recalculate style--样式重计算）*
	2. 为每个节点生成图形和位置（Layout--重排或回流）
	3. 将每个节点填充到图层中（Paint--重绘）
	4. 组合图层到页面上（Composite Layers--图层重组）
   如果我们需要提升性能，需要做的就是减少浏览器在运行时所需要做的工作，即：尽量减少1234步。

[El esquema de optimización específico es el siguiente]:
1. Intente usar la transformación CSS3 para reemplazar la parte superior izquierda y otras operaciones al transformar la posición del elemento. Los cambios de transformación
y opacidad solo afectan la combinación de capas

2. Uso de opacidad en lugar de visibilidad] (1) El uso de visibilidad no desencadena el reordenamiento, pero aún así se redibuja. (2) directamente usando una opacidad que se activa, redibujar, y activar la reorganización (¡GPU diseñada desde cero!). (. 3). Capa de opacidad con el uso, es decir, no activa el disparador no redibuja el reordenamiento . (opacidad con la voluntad-cambiará) Razón: Al cambiar la transparencia, antes simplemente reducir la GPU cuando la pintura ya tenía buenos valores de textura alfa para lograr el efecto deseado, no necesitamos un redibujado completo. Pero esta premisa es que esta opacidad se modifica en sí misma debe ser una capa. 3. [No usar diseño de tabla] tabla-celda 4. Combinar [múltiples operaciones de cambio de atributos de estilo en una] operación No modifique el estilo del DOM uno por uno, defina la clase de antemano y luego modificar el className del DOM 5. [Modificar el DOM después de offline ()] Dado que el elemento cuyo atributo de visualización es none no está en el árbol de renderizado, las operaciones sobre elementos ocultos no provocarán que otros elementos se reorganicen. Si desea realizar operaciones complejas en un elemento, puede ocultarlo primero y luego mostrarlo una vez completada la operación. Esto solo activa 2 reordenamientos cuando se oculta y se muestra. 6. [Uso de fragmento de documento] (documentFragment) ------ Vue utiliza este método para mejorar el rendimiento.

7. [No coloque los valores de atributo de ciertos nodos DOM en un bucle como una variable de bucle]
Cuando solicita alguna información de estilo del navegador, el navegador vaciará la cola, como por ejemplo:

1.offsetTop, offsetLeft, offsetWidth, offsetHeight

2.desplazamiento Arriba / Izquierda / Ancho / Alto

3.clientTop / Izquierda / Ancho / Alto

4.width, height
Cuando solicita algunos de los atributos anteriores, el navegador necesita actualizar la cola interna para darle el valor más preciso,
porque puede haber operaciones en la cola que afecten estos valores. Incluso si obtiene la información de diseño y estilo de un elemento que no tiene nada que ver con la información de diseño que se ha producido o cambiado recientemente, el navegador actualizará a la fuerza la cola de renderizado.
8. En el proceso de implementación de la animación, habilite la aceleración de hardware de GPU: transform: tranlateZ (0)
9. Cree una nueva capa para elementos de animación para aumentar el índice z de los elementos de animación
10. Al escribir animaciones, intente utilizar el siguiente APIrequestAnimationFrame ---- solicitar marco de animación

requestAnimationFrame ---- solicitar marco de animación

1.window.requestAnimationFrame ()
Descripción: este método le indicará al navegador que llame a la función que especifique antes del siguiente redibujo y reordenamiento
. 1. Parámetros: este método utiliza una función de devolución de llamada como parámetro, y esta función de devolución de llamada estará en el navegador la próxima vez Llamado antes de volver a dibujar.
La función de devolución de llamada se pasará automáticamente en un parámetro, DOMHighResTimeStamp, que identifica la hora actual cuando requestAnimationFrame () comienza a activar la función de devolución de llamada

2. Valor de retorno:
un número entero largo, ID de solicitud, que es el único identificador en la lista de devolución de llamada. Es un valor distinto de cero y no tiene otro significado. Puede pasar este valor a window.cancelAnimationFrame () para cancelar la función de devolución de llamada. Nota: Si desea continuar actualizando la siguiente animación de fotograma antes del próximo navegador de redibujo, entonces la función de devolución de llamada en sí debe ser llamada nuevamente window.requestAnimationFrame ()

2. window.cancelAnimationFrame (requestID)
cancela una solicitud de cuadro de animación previamente agregada al plan llamando al método window.requestAnimationFrame ().
requestID es el valor devuelto cuando se llama previamente al método window.requestAnimationFrame (). Es un identificador de tiempo y su uso es similar al id de un temporizador.

CDN

CDN rápido

[Error en la transferencia de la imagen del enlace externo. El sitio de origen puede tener un mecanismo de enlace anti-sanguijuela. Se recomienda guardar la imagen y subirla directamente (img-Guch56JJ-1604846375736) (F: \ WEB \ WEB \ 009-git, svn , modularización, optimización \ 009 -git, svn, modularización, optimización \ performance optimization_stu \ icon \ 01_web front-end y back-end general icon.png)]

¿Qué es CDN? ¿Como funciona?

El sitio web suele colocar todos sus servidores en el mismo lugar. Cuando la base de usuarios aumenta, la empresa debe desplegar contenido en múltiples servidores geográficamente diferentes.
Para acortar el tiempo de las solicitudes http, debemos colocar una gran cantidad de recursos estáticos. Obtener más cerca del usuario.

Redes de entrega de contenido CDN (Redes de entrega de contenido)
CDN es un grupo de servidores web distribuidos en muchas ubicaciones geográficas diferentes, que se utiliza para distribuir contenido a los usuarios de manera más efectiva.

La idea básica:
tratar de evitar cuellos de botella y enlaces en Internet que puedan afectar la velocidad y estabilidad de la transmisión de datos, para que la transmisión de contenidos sea más rápida y estable.
Al colocar servidores de nodo en varios lugares de la red constituidos por una capa de red virtual inteligente sobre la base de la Internet existente, el
sistema CDN puede basarse en el tráfico de red y la conexión de cada nodo, estado de carga, distancia a los usuarios y tiempo de respuesta en tiempo real Esta información completa
redirige la solicitud del usuario al nodo de servicio más cercano al usuario.

Infraestructura: La red CDN más simple consta de un servidor DNS y varios servidores de caché
1. La url ingresada por el usuario será "traducida" a la dirección IP correspondiente mediante resolución DNS, para así encontrar el servidor dedicado CDN.
2. El CDN "obtiene" la dirección IP del usuario y luego coopera con el dispositivo de equilibrio de carga regional para seleccionar un dispositivo de equilibrio de carga regional en el área a la que pertenece el usuario y le dice al usuario que inicie una solicitud a este dispositivo.
3. La base de "elección" en los pasos anteriores
(1). La base para la selección incluye: juzgar qué servidor está más cerca del usuario según la dirección IP del usuario;
(2). Juzgar según el nombre del contenido incluido en la URL solicitado por el usuario Qué servidor tiene el contenido requerido por el usuario;
(3) Consultar la situación de carga actual de cada servidor y determinar qué servidor aún tiene la capacidad de servicio.