[js] 第594天 你是如何做前端性能分析的？从哪些方面入手？有哪些指标？

[haizhilin2013]

第594天 你是如何做前端性能分析的？从哪些方面入手？有哪些指标？

#131

3+1官网

我也要出题

[chaoing]

前端性能分析可以从多个方面入手，主要包括以下几个方面：

加载性能： 分析页面加载性能，包括页面的总体加载时间、首次渲染时间、首次有效渲染时间等。可以使用浏览器的开发者工具或性能分析工具来进行分析。

资源加载： 分析页面中各种资源（如图片、脚本、样式表等）的加载情况，包括资源的大小、数量、加载顺序等。可以通过网络面板查看资源加载情况。

渲染性能： 分析页面的渲染性能，包括页面重绘（Repaint）和重排（Reflow）的次数和耗时，以及如何优化页面渲染性能。

JavaScript 执行性能： 分析 JavaScript 代码的执行性能，包括函数调用的次数、循环的性能影响等。可以使用浏览器的性能分析工具来分析 JavaScript 的执行情况。

内存使用情况： 分析页面的内存使用情况，包括内存泄漏等问题。可以使用浏览器的内存分析工具来进行分析。

用户体验： 分析页面的用户体验，包括页面的交互性能、动画效果的流畅度等。可以使用用户体验监控工具来进行分析。

一些常用的性能指标包括：

First Contentful Paint (FCP)：首次内容绘制，表示浏览器首次绘制任何文本、图片、非空白的 canvas 或 SVG。
First Meaningful Paint (FMP)：首次有效绘制，表示页面主要内容首次呈现给用户的时间点。
Time to Interactive (TTI)：页面可交互时间，表示页面加载完成并且可以正常响应用户输入的时间点。
Total Blocking Time (TBT)：总阻塞时间，表示加载期间主线程被阻塞的时间总和。
Cumulative Layout Shift (CLS)：累计布局位移，表示页面中所有不受用户意图影响的布局位移的总和。