如何优化WebAPP性能：从四个层面上彻底优化前端项目性能

如何优化WebAPP性能：从四个层面上彻底优化前端项目性能

 

资源层面上的优化

该项措施可以帮助我们优化 FP、FCP、LCP 指标。

• 压缩文件、使用 Tree-shaking 删除无用代码

• 服务端配置 Gzip 进一步再压缩文件体积

• 资源按需加载

• 通过 Chrome DevTools 分析首屏不需要使用的 CSS 文件，以此来精简 CSS

• 内联关键的 CSS 代码

• 使用 CDN 加载资源及 dns-prefetch 预解析 DNS 的 IP 地址

• 对资源使用 preconnect，以便预先进行 IP 解析、TCP 握手、TLS 握手

• 缓存文件，对首屏数据做离线缓存

• 图片优化，包括：用 CSS 代替蹄片、裁剪适配屏幕的图片大小、小图使用 base64 或者 PNG 格式、支持 WebP 就尽量使用 WebP、渐进式加载图片

• 开启pwa，通过 service worker , 拦截http请求，进行资源的离线访问。

推荐文章：《HTML上通过meta标签，启用DNS预解析，提高资源加载速度》

 

网络优化

该项措施可以帮助我们优化 FP、FCP、LCP 指标。

这块内容大多可以让后端或者运维帮你去配置，升级至最新的网络协议通常能让你网站加载的更快。

比如说使用 HTTP2.0 协议、TLS 1.3 协议或者直接拥抱 QUIC 协议~

推荐文章：《如何在Nginx配置HTTP2协议，大幅提高HTTP网络请求性能》

推荐文章：《TCP与UDP，彻底弄懂HTTP2协议与HTTP3协议》

 

优化耗时任务

该项措施可以帮助我们优化 TTI、FID、TBT 指标。

• 使用 Web Worker 将耗时任务丢到子线程中，这样能让主线程在不卡顿的情况下处理 JS 任务

• 调度任务 + 时间切片，这块技术在 React 16 中有使用到。简单来说就是给不同的任务分配优先级，然后将一段长任务切片，这样能尽量保证任务只在浏览器的空闲时间中执行而不卡顿主线程

推荐文章：《如何合理使用Web Worker执行耗时任务》

 

Dom渲染层面上的优化

不要动态插入内容

该项措施可以帮助我们优化 CLS 指标。

• 使用骨架屏给用户一个预期的内容框架，突兀的显示内容体验不会很好

• 图片切勿不设置长宽，而是使用占位图给用户一个图片位置的预期

• 不要在现有的内容中间插入内容，起码给出一个预留位置

• 使用React或者Vue，通过虚拟DOM来进行渲染层面的优化

 

参考文章：https://juejin.im/post/5f0b056de51d45349917bf16