10大面板功能整理

Audits面板

性能指标

首次绘制 (First Paint)：如果 FP 时间过久，那么直接说明了一个问题，那就是页面的 HTML 文件可能由于网络原因导致加载时间过久
首次有效绘制 (First Meaningfull Paint)：不推荐使用
首屏时间 (Speed Index)：压缩关键资源大小，减小脚本执行时间等
首次 CPU 空闲时间 (First CPU Idle)：它表示页面达到最小化可交互的时间，也就是说并不需要等到页面上的所有元素都可交互，只要可以对大部分用户输入做出响应即可。要缩短首次 CPU 空闲时长，我们就需要尽可能快地加载完关键资源，尽可能快地渲染出来首屏内容，因此优化方式和第二项 FMP 和第三项 LCP 是一样的。
完全可交互时间 (Time to Interactive)：它表示页面中所有元素都达到了可交互的时长。简单理解就这时候页面的内容已经完全显示出来了，所有的 JavaScript 事件已经注册完成，页面能够对用户的交互做出快速响应，通常满足响应速度在 50 毫秒以内。如果要解决 TTI 时间过久的问题，我们可以推迟执行一些和生成页面无关的 JavaScript 工作。
最大估计输入延时 (Max Potential First Input Delay)：这个指标是估计你的 Web 页面在加载最繁忙的阶段，窗口中响应用户输入所需的时间，为了改善该指标，我们可以使用 WebWorker 来执行一些计算，从而释放主线程。另一个有用的措施是重构 CSS 选择器，以确保它们执行较少的计算。

页面加载到展示过程图

在渲染进程确认要渲染当前的请求后，渲染进程会创建一个空白页面，我们把创建空白页面的这个时间点称为 First Paint，简称 FP。
当页面中绘制了第一个像素时，我们把这个时间点称为 First Content Paint，简称 FCP。
当首屏内容完全绘制完成时，我们把这个时间点称为 Largest Content Paint，简称 LCP。
FMP是首次有效绘制，由于 FMP 计算复杂，而且容易出错，现在不推荐使用该指标。

performance面板

概览面板

如果 FPS（页面帧速）图表上出现了红色块，那么就表示红色块附近渲染出一帧所需时间过久，帧的渲染时间过久，就有可能导致页面卡顿。
如果 CPU 图形占用面积太大，表示 CPU 使用率就越高，那么就有可能因为某个 JavaScript 占用太多的主线程时间，从而影响其他任务的执行。
如果 V8 的内存使用量一直在增加，就有可能是某种原因导致了内存泄漏。

性能面板

Main 指标记录渲染主线程的任务执行过程，Compositor 指标记录了合成线程的任务执行过程，Raster指标记录了合成线程中维护的光栅化线程池中的任务执行过程，GPU 指标记录了 GPU 进程主线程的任务执行过程，包括合成线程执行任务过程中需要用到GPU生成位图。值得注意的是，光栅化操作并不是在 Rasterize 线程中直接执行的，而是在 GPU 进程中执行的，因此 Rasterize 线程需要和 GPU 线程保持通信。

Network 指标，网络记录展示了页面中的每个网络请求所消耗的时长，并以瀑布流的形式展现。这块内容和网络面板的瀑布流类似，之所以放在性能面板中是为了方便我们和其他指标对照着分析。
Timings 指标，用来记录一些关键的时间节点在何时产生的数据信息，诸如 FP、FCP、LCP 等。
Frames 指标，也就是浏览器生成每帧的记录，我们知道页面所展现出来的画面都是由渲染进程一帧一帧渲染出来的，帧记录就是用来记录渲染进程生成所有帧信息，包括了渲染出每帧的时长、每帧的图层构造等信息，你可以点击对应的帧，然后在详细信息面板里面查看具体信息。
Interactions 指标，用来记录用户交互操作，比如点击鼠标、输入文字等交互信息。

main指标分析

每个灰色横条就对应了一个任务，灰色长条的长度对应了任务的执行时长。

网络面板

<html>
<head>
    <title>Main</title>
    <style>
        area {
            border: 2px ridge;
        }

        box {
            background-color: rgba(106, 24, 238, 0.26);
            height: 5em;
            margin: 1em;
            width: 5em;
        }
    </style>
</head>


<body>
    <div class="area">
        <div class="box rAF"></div>
    </div>
    <br>
    <script>
        function setNewArea() {
            let el = document.createElement('div')
            el.setAttribute('class', 'area')
            el.innerHTML = '<div class="box rAF"></div>'
            document.body.append(el)
        }
        setNewArea()   
    </script>
</body>
</html>

控制器

下载信息概要

DOM 文档的加载步骤

解析HTML结构
加载外部脚本和样式表文件
解析并执行脚本
构建 HTML DOM模型 // DOMContentLoaded
加载外部资源文件（image等）
页面渲染完成 // load

DOMContentLoaded vs Load

DOMContentLoaded，这个事件发生后，说明页面已经构建好 DOM 了，这意味着构建 DOM 所需要的 HTML 文件、JavaScript 文件、CSS 文件都已经下载完成了。
Load，说明浏览器已经加载了所有的资源（图像、样式表等）。

详细信息

单个资源的时间线

Queueing

页面中的资源是有优先级的，比如 CSS、HTML、JavaScript 等都是页面中的核心文件，所以优先级最高；而图片、视频、音频这类资源就不是核心资源，优先级就比较低。通常当后者遇到前者时，就需要“让路”，进入待排队状态。
浏览器会为每个域名最多维护 6 个 TCP 连接，如果发起一个 HTTP 请求时，这 6 个 TCP 连接都处于忙碌状态，那么这个请求就会处于排队状态。（http2.0无此限制）
最后，网络进程在为数据分配磁盘空间时，新的 HTTP 请求也需要短暂地等待磁盘分配结束。

stalled 等待排队完成之后，就要进入发起连接的状态了。不过在发起连接之前，还有一些原因可能导致连接过程被推迟。
Proxy Negotiation 若使用代理服务器，将会增加一个代理服务器连接协商所需的时间。
Initial connection/SSL 阶段和服务器建立连接阶段，包括tcp连接以及https中的ssl（目的：加密）握手时间。
Request sent 在建立连接后，网络进程会准备请求数据并发送至网络，这个阶段只需将缓冲区的数据发出，无需等待服务器的响应，即不需要知道服务器是否正常接收，因此此阶段耗时不到1毫秒。
Waiting(TTFB) 数据发送后，等待服务器返回第一个字节的时间称之为“第一字节时间（TTFB）”,TTFB是服务器响应速度的重要指标，时间越短表征反应越快。

资料来源

time.geekbang.org/column/arti…

漫漫前端路之浏览器基础——Chrome开发者工具篇