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

推荐文章：《探索HTTP传输中gzip压缩的秘密》

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

推荐文章：《如何让网站加载更快》

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

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

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

推荐文章：《你不知道的 20+ Chrome Devtools 技巧！》

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

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

 

网络优化

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

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

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

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

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

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

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

 

优化耗时任务

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

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

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

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

 

Dom渲染层面上的优化

不要动态插入内容

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

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

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

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

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

 

代码层面上的优化

注意GC，防止内存泄露

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

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

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

推荐文章：《V8引擎的内存回收》

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

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

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

 

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