Análisis de desempeño front-end y plan de mejora

¿Cómo evaluar el rendimiento de una página web?

En primer lugar, lo que podemos pensar es: lo suficientemente rápido, abrir en segundos,
pero en realidad hay otro punto, que es la estabilidad.

¿Cuál es la estabilidad del sitio web?
Por ejemplo, si opera una página, se congelará o incluso fallará después de usarla durante mucho tiempo. Este es el rendimiento de una estabilidad deficiente

Es decir, el rendimiento de la página debe considerarse normal si la página debe abrirse lo suficientemente rápido, la respuesta durante la operación debe ser lo suficientemente rápida y puede funcionar de manera estable durante mucho tiempo sin congelarse.

La "solidez" de la página

En 1993, Jakob Nielson propuso:

• La velocidad de carga de menos de 100 milisegundos es genial.
• Un segundo es probablemente el límite para que el pensamiento del usuario no sea interrumpido. Los usuarios experimentarán un retraso, pero es aceptable
• Unos 10 segundos es el límite de atención del usuario. La mayoría de los usuarios abandonan su sitio después de 10 segundos

Por supuesto, esto se refiere a las páginas de Internet
, pero para las páginas c-end o b-end, los clientes tienen que usarlas.Es raro que se abran en segundos, básicamente 2-3 segundos, ¿por qué?
La razón es que en muchos casos, el rendimiento no se considera en absoluto en el desarrollo, y solo el código comercial está enterrado en el tiempo.La
página web debe ser rápida, ¿y qué la afectará?
En este momento, muchos front-end pensarán en una pregunta clásica de entrevista: ¿Cuáles son las formas de mejorar el rendimiento de la página?
y la respuesta:

1. Reducir las solicitudes http
2. Compresión de imagen, Sprite
3. js, compresión css
4. habilitar gzip
5. Utilice la estrategia de almacenamiento en caché de DNS
6. Use el caché de cdn (si lo comparte con otros, entonces usted y yo estaremos felices)
7. carga perezosa
   ...

Se encontraron varias herramientas de prueba de rendimiento de front-end

LightHous que viene con Chrome

Prueba de velocidad del sitio web de Pingdom

Herramientas mediocres en línea
Dirección: https://tools.pingdom.com/

Prueba de página web

También está en línea, con funciones más fuertes y se pueden seleccionar múltiples modos.
Dirección: https://www.webpagetest.org/

GTmetrix

Haré algunas sugerencias
Dirección en línea: https://gtmetrix.com/

Herramienta Keycdn

Detallará el tiempo de carga y los encabezados HTTP de cada recurso
Dirección en línea: https://tools.keycdn.com/speed

RegaloDeVelocidad

Dirección en línea ordinaria
: https://www.giftofspeed.com/

Pagelocity

Se dice que se puede comparar con las páginas de la competencia, pero en realidad es inútil.
Dirección en línea: https://pagelocity.com/

Jugos de prueba de tiempo de carga

Solo puede medir la velocidad, es inútil
Dirección en línea: https://performance.sucuri.net/

BENGALAS LOCAS

Se utiliza para probar problemas de DNS, seguridad, rendimiento, red y SEO del sitio web.
Dirección en línea: https://gf.dev/

monitor puntocom

Por cierto, puede probar la compatibilidad de la pantalla
. Dirección en línea: https://www.dotcom-tools.com/website-speed-test

dareboost

Comparará el rendimiento en diferentes navegadores
Dirección en línea: https://www.dareboost.com/en

¿Para qué sirven las herramientas de análisis de rendimiento?

De hecho, quiero usar herramientas para explicar los indicadores específicos del rendimiento de la página que preocupan a la industria:

1. velocidad de apertura
2. tamaño del archivo de paginación
3. velocidad de solicitud
4. tiempo de bloqueo
5. Cantidad de solicitud
6. tiempo de resolucion dns
7. Otras mejoras

Aparte de LightHouse, otras herramientas en línea son algo útiles para nuestros problemas de posicionamiento, pero no son particularmente útiles, especialmente ahora que son básicamente aplicaciones de una sola página.
No prestes demasiada atención, su única función es que pueden usarse como informes de prueba cuando algunos clientes están de acuerdo.
En lo personal, recomiendo presionar F12 para ver la red, ordenar para ver el tamaño del archivo, el tiempo de carga y analizarlo usted mismo.

Indicadores a los que se debe prestar atención al usar la red

1. Vea cuántas cosas están cargadas, qué cosas no es necesario cargar y qué archivos son demasiado grandes
2. El tiempo de carga del archivo se ve afectado por el ancho de banda de la red y del servidor. Generalmente, el tiempo depende de la interfaz.
3. El encabezado de respuesta analiza la configuración de la memoria caché y si la configuración del tiempo de caducidad es razonable
4. La imagen de arriba no abre gzip
5. Las interfaces se pueden fusionar o dividir. Algunas interfaces son lentas solo para datos individuales. Puede solicitar que el backend se desmonte por separado. Normalmente, las interfaces deberían ser muy rápidas. Intente fusionar las interfaces que se comunican con la empresa. Reducir las solicitudes http en realidad incluye fusión de interfaz
6. El archivo es demasiado grande para ir al análisis del paquete web.
7. Vea estos dos artículos para la estrategia de almacenamiento en caché

• https://blog.csdn.net/qq_38217940/article/details/125360427
• https://blog.csdn.net/qq_38217940/article/details/125349105

Use webpack-bundle-analyzer de webpack para analizar los archivos empaquetados

Cómo usar ver npm https://www.npmjs.com/package/webpack-bundle-analyzer

cómo dividir js?
1. Usa la carga diferida de rutas

import( /* webpackChunkName: "login" */ '@/layout')

2. Lazy loading de componentes (componentes dinámicos)

<template>
    <div class="full-container container-wrap">
        <component v-bind:is="currentComponent" @change-page="changePage">
        </component>
    </div>
</template>

<script>
const Home = ()=>import(/* webpackChunkName: "organize-conpenents-home" */ "./components/home");
export default {
    
    
    data() {
    
    
        return {
    
    
            currentComponent: Home,
            currentComponentName: 'Home',
        };
    },
}

3. js carga dinámica

// 懒加载js
var loadScript = async (url) => {
    
    
    return new Promise((resolve, reject) => {
    
    
        const script = document.createElement('script');
        script.src = url;
        script.onload = resolve;
        script.onerror = reject;
        const head = document.getElementsByTagName('head')[0];
        head.appendChild(script);
    });
};

4. Desactive la carga previa de vue (es necesario desactivarla al mirar la carga y el almacenamiento en caché, de lo contrario, toda la carga previa afectará el juicio) la
carga previa se ve así (atributo de búsqueda previa)

<link href=./css/app.02a07d15.css rel=prefetch>

método de cierre

   chainWebpack: config => {
    
    
        // 移除 prefetch 插件
        config.plugins.delete('prefetch');
        // 移除 preload 插件
        config.plugins.delete('preload');
    },

5. Webpack fusiona js
webpackChunkName y escribe lo mismo

import( /* webpackChunkName: "login" */ '@/login')
import( /* webpackChunkName: "login" */ '@/layout')

Use el complemento speed-measure-webpack-plugin de webpack para ver la velocidad de empaquetado

Cómo utilizar ver npm https://www.npmjs.com/package/speed-measure-webpack-plugin

¿Cómo mejorar la velocidad de empaquetado? (Solo habla sobre el plan, Baidu según el plan)

1. Use vite en su lugar (en realidad, el paquete web también se puede usar para configurar efectos similares. Además, vite mejora principalmente la experiencia de desarrollo y los subcontratos deben configurarse usted mismo)
2. De acuerdo con los parámetros de entrada, se empaqueta bajo demanda. Si se pasa page=login, solo se ejecutará la ruta de inicio de sesión. Puede consultar la configuración de varias páginas
3. El uso de caché es un cargador de caché, pero esto tiene problemas y, a veces, hará que la página modificada no se actualice.
4. Especifique la entrada y el tiempo de búsqueda de entrada del paquete web es muy largo
5. Elimine los cargadores innecesarios. Por ejemplo, puede convertir a es5 sin babel para la ejecución local. El navegador en sí es compatible con es6 si su versión es alta.
6. Los archivos estáticos no participan en el empaquetado, y hay una operación de copia para archivos estáticos.Piénselo, puede llevar varios segundos copiar archivos estáticos de cientos de megabytes, aunque la ejecución de la línea de comandos será mucho más rápida. Al iniciar localmente, también se puede configurar para no participar en el empaquetado.Es necesario modificar el apuntamiento de archivos estáticos de devSever, lo cual es un poco complicado.
7. Apague eslint, verifique el formato con el complemento vscode, el formato de embellecimiento es bastante bueno, siempre que todos estén unificados
8. Compilaciones multiproceso como el clásico HappyPack

procesamiento de imágenes

disco compacto

Necesita encontrar un fabricante de servidores en la nube para alquilar, como Alibaba Cloud
https://www.aliyun.com/?utm_content=se_1011952919

compresión

1. Use https://tinypng.com/ para comprimir imágenes en línea
2. Modifique el cargador de URL del paquete web según sea necesario, el valor predeterminado es convertir por debajo de 10k a base64, si puede cambiarlo a 5k

module: {
    
    
  rules: [
       {
    
    
        test: /\.(jpeg|jpg|png|svg|gif)$/,
        use: {
    
    
          loader: 'url-loader', // 默认使用的是es6模块
          options: {
    
     // 配置 
            esModule: false, // 使用common.js规范
            outputPath: 'images', // 输出的文件目录
            name: 'images/[contenthash:4].[ext]',
            limit: 20*1024 // 小于20k转为base64
          }
        }
      }
  ]
}

3. Use background-image con precaución y solo escriba los que deben mostrarse rápidamente, ya que bloqueará la carga. Lo peor es que se convertirá en base64 y se empaquetará en js. Las imágenes grandes se pueden configurar como fondo usando posicionamiento + zindex, y la etiqueta img se carga de forma asíncrona (ps: este artículo es para navegadores de versión baja, y la imagen de fondo de versión alta también es asíncrona)
4. Lazy loading de imágenes fuera del área visible

La "estabilidad" de la página.

¿Qué hace que la página se congele y se cuelgue?
Mucha gente viene a Zhangkou: pérdidas de memoria.
Solo quiero decir que las fugas de memoria
superficiales
son solo una de las razones de los bloqueos de páginas, y los motivos de los bloqueos de páginas incluyen:

• Demasiados nodos dom
• Reflujos de página frecuentes (cuando hay muchos nodos dom, los reflujos causarán bloqueos, como elementos de página de pantalla grande con muchos elementos)
• Hay demasiados monitores de página y, si no se cierran a tiempo, los monitores ocuparán la CPU, así que límpielos si no los usa.
• Demasiados temporizadores de página y demasiadas solicitudes provocan cálculos js frecuentes
• Pérdida de memoria, pero de hecho, la pérdida de memoria se reciclará a la fuerza. De hecho, el impacto no es tan grande. De hecho, la causa de la congelación es que la basura no se recolecta a tiempo. Por ejemplo, hay demasiados objetos colgados en la ventana, y los objetos en la ventana no son basura (incluso si no los usas)
• Para los cálculos de datos por encima de los 100 000 niveles, cientos de miles de computadoras con bajo rendimiento harán que la página se bloquee.
• Una gran cantidad de datos se almacenan en winodw. De hecho, es una razón para mantenerse al día con el anterior, incluidos JSON.parse y JSON.stringify. Un objeto grande también se bloqueará, pero algunas versiones del navegador informarán de un error.

En base a lo anterior, podemos simplemente decir algunas formas de evitar la degradación del rendimiento

1. Use menos estilo en los elementos, intente usar clase u otros selectores
2. La animación usa la posición para evitar el reflujo
3. Puede dar ancho y alto muertos, no adapte todo para flexionar
4. Trate de no exceder las tres capas de css, porque al hacer el reflujo, analizará el css para generar un árbol de renderizado. Al escribir menos, a menudo se vuelve loco, lo que en realidad es incorrecto.
5. Cuando hay muchas animaciones, use GPU para acelerar. Cuando use transform, puede usar el eje Z, que activará GPU. Por ejemplo, translate puede usar tranlate3d, translate usa CPU y tranlate3d usa GPU
6. Hay demasiados nodos dom, puede considerar usar canvas para implementar o intentar eliminar el dom invisible
7. Los monitores aparecen en pares, y cuando están encendidos están apagados, como antes de Destroy de vue
8. Las cosas en la ventana, cuando se agotan, asignan nulo para borrar
9. Una gran cantidad de cálculos se transfieren al backend; de lo contrario, se colocan en el trabajador web.
10. Lo mismo es cierto para los temporizadores, si tiene un conjunto, debe usar claro

Utilice Rendimiento para observar los cambios de página

1. La curva de nodos observa los cambios en el DOM de la página. Si sigue creciendo, se atascará y el DOM no se reciclará a tiempo.
2. El oyente de oyentes se analiza de la misma manera que los nodos.
3. La curva de calor, tres aumentos consecutivos y luego una caída inmediata, tres ocurrencias consecutivas pueden juzgarse como una pérdida de memoria (ver el blog de Ruan Yifeng)
4. Otros indicadores son relativamente detallados y deben practicarse para comprenderlos, por lo que no entraré en detalles aquí.

Use la memoria para observar el uso de la memoria de la página

Esto es útil, la página falla y se congela después de mucho tiempo. Básicamente, hay muchas cosas almacenadas en la página, como dom y listener. Algunos objetos grandes no se limpian a tiempo. Este es el más común. razón.Por ejemplo, un archivo json grande es el más serio
. Winodw, el json de 100M se almacena directamente en la capa más externa de la ventana, y puede fallar directamente

creo que esta en el suplemento y actualizacion continua

La estrategia de carga diferida detallada, la estrategia de desempaquetado, etc., se escribirán más adelante.