浏览器性能分析之Preformance面板

先认识Preformance面板，具体看下面链接，介绍的很详细
链接: link

面板的录制工具

1. 自动录制
   点击自动录制按钮，网页页面情况，重新刷新，记录从清空到再次舒心并加载完所有资源到最终页面稳定过程中的所有数据信息。
2. 手动录制
   可因需求需要，点击手动录制按钮，录制某个点击时间打开的新弹窗，或点击触发某个接口，或某个功能模块，所需要录制块加载完后，点击停止录制按钮。

面板性能分析

性能分析看饼图能看到大致的信息，但主要还要看线程部分的线

线程面板：

1. 瀑布图：发现超大资源，发现慢接口，分析网站性能
2. 火焰图：发现长任务，定位耗时函数，缓慢的服务器响应
3. 饼图：各个时段任务时间占比，可通过占比大小发现哪个阶段用时最长
   如图：
   

瀑布图

瀑布图展示每个资源，每个请求的加载过程，是所有资源加载总图概括，进程的真是呈现（network里有单个资源文件的瀑布流加载进程图）

单个色块分析：一个色块的分析（实质是当前色块对应资源的一个http请求过程）
色块图：
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/1244f798541e45d8add75acffc4e403e.png

色块组成：
*左侧线：一个http准备发送请求阶段
* 浅色块：请求一发送并返回第一个字节
* 深色块：字节内容下载
* 右侧线：等待主线程处理
*
如图：已标出多个完整的色块

单个色块拆解图：

1左侧线 2浅色块 3深色块 4右侧线

色块场景分析：
1. 左侧线太长原因：线程池并发量有限，瞪大发送，排队时间长（并发量只有6个，http1和http2更少），或等待js主线程（js文件包太大）
2. 右侧线特别长的原因：等待主线程处理时间较长，说明主线程很忙

从前端角度出发，怎么优化？

• 从前端出发，可针对左侧线，浅色色块这两个部分进行优化
  1. 减少请求次数，可减少排队等待时间
  2. 减少文件体积，可加快请求速度，减少线程压力，加快线程结束
     具体措施：页面使用路由懒加载，图片资源懒加载，大文件拆分，页面其他子文件，非初始化必需接口等，都可以放在触发时间后进行。
• 深色块优化：各种缓存，http缓存，本地缓存，CDN等各方面进行优化

瀑布图看图技巧

• 看色块的加载时长，色块总体越长则加载时间越长，可能存在性能瓶颈，但还需要看这个色块是否对后续资源加载造成影响，如果不影响可以不做处理。
• 看瀑布图是否完整，如果有分层，分层原因可能性能瓶颈
• 接口加载色块不宜过长，接口加载一般在300ms左右，如果时间过长，可能需要接口优化
• js文件加载完后，其他的图片资源才可以加载，js文件不能太大

从瀑布图看前端优化方向：
首先，减少所有资源的加载时间，即减少瀑布图的宽度，瀑布图越窄，网站的访问速度越快；其次，减少请求数量，即降低瀑布图的高度，图越矮越好；最后，通过优化资源请求顺序来加快渲染时间。

火焰图

火焰图展示每个task队列时间段内所执行的任务，火焰竖向深度越深，说明当前任务下的子任务越多；每个task任务的时间排列，用于分析函数任务加载的时间，或某个模块执行的快慢，是否存在需要优化的函数（可深度定位到具体函数所在的代码页面）
对task的理解：浏览器的事件队列，调函数解析脚本，发http请求，函数调用等任务都可能在一个task里发生。
火焰图分析步骤：
1. 看火焰图横向方向：空白处多，代表浏览器等待时间长，即浏览器空白时长（同饼图白色块占比）
2. 火焰图右上方红色三角方块，说明这个任务耗时比较长，可能需要优化
耗时任务分析：找到业务层js文件执行的调用层，分析函数调用执行时长，分析瓶颈是否存在（主任务时长，子任务时长等）

饼图

饼图分为几块，具体意义如下：

• 蓝色：加载占比
• 黄色： 脚本执行占比
• 黑色：样式计算和布局重拍占比
• 绿色：渲染占比
• 灰色：其他事件花费占比
• 白色：空白等待占比

注意：是在 Chrome 控制台 performance 性能分析 基础上添加了部分细节的补充。