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

悠悠 2023-03-01 09:14 20阅读 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]*

*推荐文章：[《][Link 1][探索HTTP传输中gzip压缩的秘密][HTTP_gzip][》][Link 1]*

*推荐文章：[《如何使用Tree-shaking减少代码体积》][Tree-shaking]*

*推荐文章：[《如何让网站加载更快》][Link 2]*

*推荐文章：《[DNS预解析 dns-prefetch 优化页面加载速度][DNS_dns-prefetch]》*

*推荐文章：[《][Link 3]**[做前端性能优化，你居然不知道什么是Preload、Prefetch、Preconnect、Prerendering？][Link 3][》][Link 3]*

*推荐文章：[《Webpack实战：实现资源按需加载-资源异步加载》][Webpack_-]*

*推荐文章：[《][Link 4][你不知道的 20+ Chrome Devtools 技巧！][Link 4][》][Link 4]*

*推荐文章：[《Vue性能优化：图片与组件，如何实现按需加载？》][Vue]*

*推荐文章：[《CSS性能优化：你可以试一试内联CSS》][CSS_CSS]*

### 网络优化 ###

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

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

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

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

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

*推荐文章：[《][Link 5]**[还没使用HTTP3？赶紧来补一补，学习一下如何在Nginx上配置HTTP3][Link 5]**[》][Link 5]*

*推荐文章：[《从UDP/TCP到HTTP/HTTP2，弄清楚网络层面上应该了解的知识。》][UDP_TCP_HTTP_HTTP2]*

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

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

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

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

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

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

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

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

### 代码层面上的优化 ###

注意GC，防止内存泄露

*  防止内存泄露
 *  了解V8引擎的垃圾回收机制，合理回收内存

*推荐文章：[《V8解析代码流程》][V8]*

*推荐文章：[《V8探索之旅：深入了解垃圾回收机制》][V8 1]*

*推荐文章：[《V8引擎的内存回收》][V8 2]*

*推荐文章：[《浅谈V8引擎的垃圾回收机制》][V8 3]*

*推荐文章：[《JS内存机制》][JS]*

*推荐文章：*[《JS 数据结构之旅 ：通过JS实现栈、队列、二叉树、二分搜索树、AVL树、Trie树、并查集树、堆》][JS _ _JS_AVL_Trie]

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

[HTML_meta_DNS]: https://blog.csdn.net/Aria_Miazzy/article/details/107520297
[Link 1]: https://blog.csdn.net/Aria_Miazzy/article/details/107859744
[HTTP_gzip]: https://segmentfault.com/a/1190000012800222
[Tree-shaking]: https://blog.csdn.net/Aria_Miazzy/article/details/107861143
[Link 2]: https://blog.csdn.net/Aria_Miazzy/article/details/107867675
[DNS_dns-prefetch]: https://blog.csdn.net/Aria_Miazzy/article/details/107867786
[Link 3]: https://blog.csdn.net/Aria_Miazzy/article/details/107867971
[Webpack_-]: https://juejin.im/post/6844904053881700365
[Link 4]: https://blog.csdn.net/Aria_Miazzy/article/details/107868793
[Vue]: https://blog.csdn.net/Aria_Miazzy/article/details/107872038
[CSS_CSS]: https://blog.csdn.net/Aria_Miazzy/article/details/107872135
[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
[Link 5]: https://blog.csdn.net/Aria_Miazzy/article/details/107554346
[UDP_TCP_HTTP_HTTP2]: https://blog.csdn.net/Aria_Miazzy/article/details/107881184
[Web Worker]: https://blog.csdn.net/Aria_Miazzy/article/details/107521683
[V8]: https://blog.csdn.net/Aria_Miazzy/article/details/107512429
[V8 1]: https://blog.csdn.net/Aria_Miazzy/article/details/107506335
[V8 2]: https://blog.csdn.net/Aria_Miazzy/article/details/107506035
[V8 3]: https://blog.csdn.net/Aria_Miazzy/article/details/107505783
[JS]: https://blog.csdn.net/Aria_Miazzy/article/details/107507595
[JS _ _JS_AVL_Trie]: https://blog.csdn.net/Aria_Miazzy/article/details/107881641
[https_juejin.im_post_5f0b056de51d45349917bf16]: https://juejin.im/post/5f0b056de51d45349917bf16