性能问题排查

1. 数据埋点上报

2. 使用控制台的NetWork、Performance等工具

3. webpack-bundle-analyzer插件分析打包产物

HTTP

1. gzip压缩

2. 强缓存、协商缓存

3. 升级HTTP版本

图片

1. 图片压缩

2. 图片懒加载

3. 雪碧图、使用字体图标、svg

4. CDN

Webpack

1. 多进程打包

2. 分包

3. 代码压缩

4. CDN

5. tree-sharking

html

• css放在head中。由于同时具有 DOM 和 CSSOM 才能构建渲染树，所以HTML 和 CSS 都是阻塞渲染的资源，所以尽量精简CSS也是优化方式之一。

• js放在body底部，减少白屏时间。因为js会阻止浏览器解析。使用defer、async

• 减少回流和重绘制，比如不要一条一条修改DOM样式、使用documentFragment操作DOM等。

深入理解DocumentFragment -文档片段 - 掘金

什么是文档片段？（MDN解释：）DocumentFragment，文档片段接口，一个没有父对象的最小文档对象。它被作为一个轻量版的 Document 使用，就像标准的document一样，存储由节点（

https://juejin.cn/post/6952499015879507982

代码层面

• 按需加载，逻辑后移，优先保证首屏内容渲染

• 预加载

• 复杂计算使用web worker

• 数据缓存，对实时性不高的接口进行缓存，缓存复杂或常用的计算结果

• 骨架屏

• 虚拟滚动

• 任务切片

• 及时消除对象引用，清除定时器，清除事件监听器；

• 减少dom 操作，利用documentFragment，尽可能合并dom操作。

• 防抖节流

• 组件库按需加载

第一次页面加载

• 增加LOADING状态

• 骨架屏

• 图片延迟加载

• SSR

• CDN

首屏速度提升

• 代码压缩，减少打包的静态资源体积(Terser plugin/MiniCssExtratplugin)

• 路由懒加载，首屏就只会请求第一个路由的相关资源

• 使用 cdn加速第三方库。

• ssr 服务端渲染，由服务器直接返回拼接好的html页面

减少白屏时间

1. 前置条件
• 性能监控指标

2. APP 内点击打开页面

3. DNS 解析
• 预解析
• 域名收敛

4. TCP 连接
• 预连接

5. 发送并响应请求
• HTTP/2

6. 浏览器解析页面
• 服务端渲染

7. 加载资源并渲染页面
• 骨架屏
• 资源优化
• 资源预加载

8. 请求接口，获取数据并渲染
• 接口预加载
• 接口合并

如何减少白屏的时间 | HZFE - 剑指前端 Offer

回答关键点

https://febook.hzfe.org/awesome-interview/book3/topic-white-screen-optimization

大量图片加载优化策略

• 可以考虑上传到图片服务器

• 图片压缩再进行上传

• 使用懒加载（滚动加载，当滚动到可视区时再进行加载）

• 使用预加载（先将部分图片下载到本地，使用时进行替换，设定一个阀值，后面判断数据中剩余的图片阀值再进行下载）

• 在webpack 配置图片优化策略：小于指定大小使用base64

• 如果是大量的图标，可以使用iconfont

扩展

🚵 前端性能优化之旅 | 前端性能优化

从用户发起访问开始到离开网站应用结束，完整地介绍其间前端性能优化的关注点与技术手段，帮助大家体系化得了解与学习前端性能优化相关知识

https://alienzhou.com/projects/fe-performance-journey/#旅途的行程路线

React 项目性能分析及优化

Github

React 项目性能分析及优化

Updated

Mar 14, 2022

前端性能优化常用的方法有哪些? · 前端押题宝典 · 看云

《前端押题宝典》是一本聚焦于前端技术面试的书籍。作者经过阅读千余篇精品前端面试题文章，并联合字节跳动、阿里巴巴等大厂内的前端大佬，收录了涵盖Vue、React、JavaScript、TypeScript等前端各个领域常考的知识点和面试题目。助力前端工程师更加快捷、全面的一站式准备前端面试。

https://www.kancloud.cn/hanxuming/interview/3150904