前端性能优化

一、前端性能优化是什么

前端性能优化是指在用户在使用网页过程中，通过各个优化策略和方法，使得页面加载速度更快，让用户的操作更及时的反馈，给用户带来更好的体验的一个过程。

二、性能优化必要性

国外公司有一些研究表明：

BBC：页面加载时长没增加1秒，用户流失10%

Pinterest：减少页面加载时长40%，提高了搜索和注册数15%

DoubleClick：发现如果移动网站加载时长超过3秒，53%的用户会放弃

高性能会带来更高的用户留存，进而带来业务收益。

三、如何衡量和查看性能 

核心web指标，包含LCP、CLS、FID三个指标，分别对应加载性能、视觉稳定性和交互性。

LCP： 最大内容绘制，用户衡量加载的性能。不超过2.5秒的即为好的加载性能。

CLS：累积布局偏移，用于衡量视觉稳定性，即首次加载后最终渲染的布局偏移量的尽可能小。

FID：首次输入延迟，用于衡量可交互性，不应超过100毫秒。

可以通过浏览器的LightHouse进行测量。

此外，还有以下四个指标在性能中需要关注，是衡量网站性能的关键指标。

FP: first paint 首次绘制，开始加载

FMP: first meaningful paint  首次有效绘制，加载了用户期望的内容

TTI：time to interactive 可交互的时间

Long Task:  长任务，使用户感受到卡顿。

那如何查看页面性能的具体表现呢？

浏览器加载一个页面的流程如下，我们可通过performance API中timing查看各个阶段所用时间。

也可在network面板中查看对应资源的加载时间，并通过performance.getEntries()查看各个请求的详情。

同时，浏览器也提供了PerformanceObserver API用于监控性能的情况。

const obervable = new PerformanceObserver((list) => {});
obervable .obeserve(entryTypes: ['longtask']);

此外，开发者工具中的performance面板也是用来调试性能的重要工具，操作前点击录制，可以记录下操作过程中的页面显示情况、各个请求、调用栈所花时间。

四、性能优化常见方法

1.代码优化

• 懒加载：将资源处理为非阻塞资源，并在需要使用时才进行加载。
• 异步加载：script标签使用defer或async。
• 优化事件性能：如对触发频率较高的事件进行防抖、节流等处理。
• 虚拟滚动：大数据使用虚拟滚动。
• 善用缓存：如react中的useMemo，以及避免多余的diff计算，使用id作为key。

2.构建优化

• 代码分割：对应用程序拆分成多个更小的包，使其可以并行下载，同时也可以实现按需加载。
• TreeShaking: 剔除未使用的代码，减少包的体积。

3.服务端优化

• 静态资源使用 CDN：多个位置部署服务器，让用户离服务器更近，从而缩短请求时间。

• 开启http2

• 开启和配置 gzip 压缩