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

￡神魔★判官ぃ 2023-03-01 09:11 11阅读 0赞

# 如何优化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预解析，提高资源加载速度》][HTML_meta_DNS]*

### 网络优化 ###

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

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

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

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

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

### 优化耗时任务 ###

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

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

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

### Dom渲染层面上的优化 ###

***不要动态插入内容***

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

*  使用骨架屏给用户一个预期的内容框架，突兀的显示内容体验不会很好
 *  图片切勿不设置长宽，而是使用占位图给用户一个图片位置的预期
 *  不要在现有的内容中间插入内容，起码给出一个预留位置
 *  使用React或者Vue，通过虚拟DOM来进行渲染层面的优化

*参考文章：[https://juejin.im/post/5f0b056de51d45349917bf16][https_juejin.im_post_5f0b056de51d45349917bf16]*

[HTML_meta_DNS]: https://blog.csdn.net/Aria_Miazzy/article/details/107520297
[Nginx_HTTP2_HTTP]: https://blog.csdn.net/Aria_Miazzy/article/details/107510417
[TCP_UDP_HTTP2_HTTP3]: https://blog.csdn.net/Aria_Miazzy/article/details/107509951
[Web Worker]: https://blog.csdn.net/Aria_Miazzy/article/details/107521683
[https_juejin.im_post_5f0b056de51d45349917bf16]: https://juejin.im/post/5f0b056de51d45349917bf16