Este artículo ha participado en la actividad [Ceremonia de creación de recién llegados] para iniciar juntos el camino de la creación de Nuggets

Recientemente, es el reclutamiento de primavera y el reclutamiento de pasantías de verano. El propietario también se ha enfrentado a más de 10 entrevistas con grandes fábricas. También hay muchas preguntas sobre la optimización del front-end. Entre ellas, la más frecuente es la optimización de la primera pantalla. , así que lo resumiré aquí. Ahora, ¿cuáles son las formas de optimizar la primera pantalla en el front-end?

En primer lugar, hablemos de por qué se necesita la optimización del rendimiento y cuáles son los beneficios de realizar la optimización del rendimiento.

Los beneficios de la optimización del rendimiento

El front-end es un campo de batalla donde un producto se muestra directamente frente al usuario, y el rendimiento del front-end afecta directamente la experiencia del usuario. Se puede decir que la optimización del rendimiento es un punto de conocimiento necesario y una habilidad central para que los ingenieros principiantes e intermedios avancen a ingenieros superiores.

El valor empresarial de la optimización del rendimiento

Para mbify, cada aumento de 100 ms en la velocidad de carga de la página de inicio aumenta la tasa de conversión en un 1,11 % y aumenta los ingresos anuales promedio en $380 000;
Pinterest reconstruyó su página para mejorar el rendimiento, reduciendo el tiempo de espera percibido en un 40 %, lo que resultó en un aumento del 15 % en las suscripciones y el tráfico del motor de búsqueda;
Al reducir el tiempo promedio de carga de la página en 850 ms, COOK descubrió que podían aumentar las conversiones en un 7 %, reducir las tasas de rebote en un 7 % y aumentar la cantidad de páginas por página en un 10 %;

Se puede ver que el impacto de la optimización del rendimiento de front-end está directamente relacionado con nuestros ingresos, y los sitios web de alto rendimiento son mejores para atraer y retener usuarios que los sitios web de bajo rendimiento.

"El 50% de los usuarios abandonará un sitio web que carga en más de 3 segundos"

Si el alto rendimiento es un activo, el bajo rendimiento es un pasivo. La optimización del rendimiento es un tema que no se puede evitar después de que un proyecto se ha desarrollado durante un cierto período de tiempo. También es una espina en el corazón de cada ingeniero. La calidad del producto determina la experiencia del cliente. Hay muchos factores en la calidad. de un producto, entre los cuales el rendimiento es el factor determinante.

Cuando los usuarios pueden obtener una respuesta en 2 segundos, sentirán que el sistema responde rápidamente;
Cuando el usuario obtiene una respuesta dentro de 2 a 5 segundos, sentirá que la velocidad de respuesta del sistema está bien;
Cuando los usuarios obtienen una respuesta dentro de 5 a 8 segundos, sentirán que la velocidad de respuesta del sistema es muy lenta, pero es aceptable;
Cuando el usuario aún no puede obtener una respuesta después de más de 8 segundos, sentirá que el sistema está mal, o pensará que el sistema ha perdido respuesta, y optará por abandonar el sitio web o iniciar una segunda solicitud.

El rendimiento de un sitio web es la base para retener a los usuarios y lograr la monetización, y también es un tema al que nuestros ingenieros front-end prestan atención todos los días.

División de optimización del rendimiento de front-end

其实，前端性能优化大体分为两个方向，一个是加载时优化，一个是运行时优化

加载时优化：预加载、缓存、网络层、页面解析、静态资源、

运行时优化：避免强制同步布局、长列表优化、避免js执行时间过长、并行计算-service worker、Composite分层绘制、滚动事件性能优化、Passive event listeners、动画

其中，首屏优化就属于加载时优化

首屏优化

首先，应该区分两个概念，一个是首屏时间，一个是白屏时间

白屏时间是指浏览器从响应用户输入网址地址，到浏览器开始显示内容的时间。
首屏时间是指浏览器从响应用户输入网络地址，到首屏内容渲染完成的时间。

影响白屏时间的因素：网络，服务端性能，前端页面结构设计。
影响首屏时间的因素：白屏时间，资源下载执行时间。

首屏性能指标

FPS：最能反映页面性能的指标FPS(frame per second)，一般系统设置屏幕的刷新率为60fps。小于24就会出现明显的卡顿

DOMContentLoaded：DOM加载并解析完成会触发DOMContentLoaded事件，如果源码输出的内容太多，客户端解析DOM的时间也会变长，例如增加2000个嵌套层叠可能会相应增加50-200ms，尽量保证首屏输出即可，后续的内容只保留钩子，利用js渲染。

流畅度：FPS 值越高，视觉呈现越流畅，在等待的过程中可以加入一些视觉缓冲。

首屏加载时间：通过DOMContentLoad或者performance来计算出首屏时间

// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {
    console.log('first contentful painting');
});
// 方案二：
performance.getEntriesByName("first-contentful-paint")[0].startTime

// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例，结构如下：
{
  name: "first-contentful-paint",
  entryType: "paint",
  startTime: 507.80000002123415,
  duration: 0,
};
复制代码

1. DNS解析耗时: domainLookupEnd - domainLookupStart
2. TCP连接耗时: connectEnd - connectStart
3. SSL安全连接耗时: connectEnd - secureConnectionStart
4. 网络请求耗时(TTFB): responseStart - requestStart
5. 数据传输耗时: responseEnd - responseStart
6. DOM解析耗时: domInteractive - responseEnd
7. 资源加载耗时: loadEventStart - domContentLoadedEventEnd
8. 首包时间: responseStart - domainLookupStart
9. 首次渲染时间 / 白屏时间: responseEnd - fetchStart
10. 首次可交互时间: domInteractive - fetchStart
11. DOM Ready时间: domContentLoadEventEnd - fetchStart
12. 页面完全加载时间: loadEventStart - fetchStart
复制代码

加载慢的原因

在页面渲染的过程，导致加载速度慢的因素可能如下：

网络延时问题
资源文件体积是否过大
资源是否重复发送请求去加载了
加载脚本的时候，渲染内容堵塞了

优化方法

我们可以从这个过程来挖掘优化点：交给DNS域名解析 -> 找到对应的IP地址 -> 然后进行TCP连接 -> 浏览器发送HTTP请求 -> 服务器接收请求 -> 服务器处理请求并返回HTTP报文 -> 以及浏览器接收并解析渲染页面通过缩短请求时间，从而去加快网站的访问速度，提升性能。

常见的几种SPA首屏优化方式

减小入口文件体积
静态资源本地缓存
UI框架按需加载
图片资源的压缩
组件重复打包
开启GZip压缩
使用SSR

减小入口文件体积

常用方法：

路由懒加载： Vue：箭头函数+import React：React.Lazy
静态资源引入CDN

静态资源本地缓存

后端返回资源问题：

采用HTTP缓存，设置Cache-Control，Last-Modified，Etag等响应头
采用Service Worker离线缓存

前端合理利用localStorage

UI框架按需加载

常见诸如Element-UI、Antd 快速使用中都有按需使用的文档

图片资源的压缩

图片资源虽然不在编码过程中，但它却是对页面性能影响最大的因素

对于所有的图片资源，我们可以进行适当的压缩

对页面上使用到的icon，可以使用在线字体图标，或者雪碧图，将众多小图标合并到同一张图上，用以减轻http请求压力。

组件重复打包

假设A.js文件是一个常用的库，现在有多个路由使用了A.js文件，这就造成了重复下载

解决方案：在webpack的config文件中，修改CommonsChunkPlugin的配置

minChunks: 3
复制代码

minChunks为3表示会把使用3次及以上的包抽离出来，放进公共依赖文件，避免了重复加载组件

开启GZip压缩

拆完包之后，我们再用gzip做一下压缩安装compression-webpack-plugin

cnmp i compression-webpack-plugin -D
复制代码

在vue.congig.js中引入并修改webpack配置

const CompressionPlugin = require('compression-webpack-plugin')

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 为生产环境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /.js$|.html$|.css/, //匹配文件名
                    threshold: 10240, //对超过10k的数据进行压缩
                    deleteOriginalAssets: false //是否删除原文件
                })]
            }
        }
复制代码

在服务器我们也要做相应的配置如果发送请求的浏览器支持gzip，就发送给它gzip格式的文件我的服务器是用express框架搭建的只要安装一下compression就能使用

const compression = require('compression')
app.use(compression())  // 在其他中间件使用之前调用
复制代码

使用SSR

SSR（Server side ），也就是服务端渲染，组件或页面通过服务器生成html字符串，再发送到浏览器

从头搭建一个服务端渲染是很复杂的，vue应用建议使用Nuxt.js实现服务端渲染，React建议Next.js

运行时优化

运行时性能是指页面运行时的性能表现，而不是页面加载时的性能。可以通过chrome开发者工具中的 Performance 面板来分析页面的运行时性能。

比如：

减少重绘与重排
避免页面卡顿
长列表优化
滚动事件性能优化
使用 Web Workers
写代码时的优化点

参考链接

前端首屏优化

El front-end se da cuenta de la optimización de la primera pantalla.