浏览器原理 40 # 性能分析工具：如何分析 Performance 中的 Main 指标？（完结）

Posted 2021-08-03 凯小默

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了浏览器原理 40 # 性能分析工具：如何分析 Performance 中的 Main 指标？（完结）相关的知识，希望对你有一定的参考价值。

说明

浏览器工作原理与实践专栏学习笔记

任务 vs 过程

Main 指标中的任务和过程：

渲染进程中维护了消息队列，如果通过 SetTimeout 设置的回调函数，通过鼠标点击的消息事件，都会以任务的形式添加消息队列中，然后任务调度器会按照一定规则从消息队列中取出合适的任务，并让其在渲染主线程上执行。

Main 指标记录了渲染主线上所执行的全部任务，以及每个任务的详细执行过程。

任务和过程：

在这里插入图片描述

图中有很多一段一段灰色横条，每个灰色横条就对应了一个任务，灰色长条的长度对应了任务的执行时长。
灰线下面的横条就是一个个过程，同样这些横条的长度就代表这些过程执行的时长。

可以把任务看成是一个 Task 函数，在执行 Task 函数的过程中，它会调用一系列的子函数，这些子函数就是我们所提到的过程。

单个任务：

在这里插入图片描述

可以把该图形看成是下面 Task 函数的执行过程：

function A(){
    A1()
    A2()
}
function Task(){
    A()
    B()
}
Task()

Task 任务会首先调用 A 过程；
随后 A 过程又依次调用了 A1 和 A2 过程，然后 A 过程执行完毕；
随后 Task 任务又执行了 B 过程；
B 过程执行结束，Task 任务执行完成；

从图中可以看出，A 过程执行时间最长，所以在 A1 过程时，拉长了整个任务的执行时长。

分析页面加载过程

例子：分析一个简单的页面，结合 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>

关键的任务和其执行过程：

在这里插入图片描述

加载过程主要分为三个阶段：

导航阶段，该阶段主要是从网络进程接收 HTML 响应头和 HTML 响应体。
解析 HTML 数据阶段，该阶段主要是将接收到的 HTML 数据转换为 DOM 和 CSSOM。
生成可显示的位图阶段，该阶段主要是利用 DOM 和 CSSOM，经过计算布局、生成层树 (LayerTree)、生成绘制列表 (Paint)、完成合成等操作，生成最终的图片。

自己测试了一下大致如下：
在这里插入图片描述

1. 导航阶段

请求 HTML 数据阶段：

在这里插入图片描述

该任务的第一个子过程就是 Send request，该过程表示网络请求已被发送。然后该任务进入了等待状态。
接着由网络进程负责下载资源，当接收到响应头的时候，该任务便执行 Receive Respone 过程，该过程表示接收到 HTTP 的响应头了。
接着执行 DOM 事件：pagehide、visibilitychange 和 unload 等事件，如果你注册了这些事件的回调函数，那么这些回调函数会依次在该任务中被调用。
这些事件被处理完成之后，那么接下来就接收 HTML 数据了，这体现在了 Recive Data 过程，Recive Data 过程表示请求的数据已被接收，如果 HTML 数据过多，会存在多个 Receive Data 过程。

等到所有的数据都接收完成之后，渲染进程会触发另外一个任务，该任务主要执行 Finish load 过程，该过程表示网络请求已经完成。

2. 解析 HTML 数据阶段

执行过程：

在这里插入图片描述

其中一个主要的过程是 HTMLParser：解析的上个阶段接收到的 HTML 数据。

在 ParserHTML 的过程中，如果解析到了 script 标签，那么便进入了脚本执行过程，也就是图中的 Evalute Script。
在 Evalute Script 过程中，先进入了脚本编译过程，也就是图中的 Complie Script。
脚本编译好之后，就进入程序执行过程，执行全局代码时，V8 会先构造一个 anonymous 过程。
在执行 anonymous 过程中，会调用 setNewArea 过程。
setNewArea 过程中又调用了 createElement，由于之后调用了 document.append 方法，该方法会触发 DOM 内容的修改，所以又强制执行了 ParserHTML 过程生成的新的 DOM。
DOM 生成完成之后，会触发相关的 DOM 事件，比如：典型的 DOMContentLoaded，还有 readyStateChanged。
DOM 生成之后，ParserHTML 过程继续计算样式表，也就是 Reculate Style，这就是生成 CSSOM 的过程

3. 生成可显示位图阶段

该阶段需要经历布局 (Layout)、分层、绘制、合成等一系列操作：

在这里插入图片描述

在生成完了 DOM 和 CSSOM 之后，渲染主线程首先执行了一些 DOM 事件，诸如 readyStateChange、load、pageshow。

大致过程如下：

首先执行布局，这个过程对应图中的 Layout。
然后更新层树 (LayerTree)，这个过程对应图中的 Update LayerTree。
有了层树之后，就需要为层树中的每一层准备绘制列表了，这个过程就称为 Paint。
准备每层的绘制列表之后，就需要利用绘制列表来生成相应图层的位图了，这个过程对应图中的 Composite Layers。走到了这步，主线程的任务就完成了。

在这里插入图片描述

接下来主线程会将合成的任务完全教给合成线程来执行，下面是具体的过程，也可以对照着 Composite、Raster 和 GPU 这三个指标来分析，参考下图：

在这里插入图片描述

最终图像是怎么显示出来：

首先主线程执行到 Composite Layers 过程之后，便会将绘制列表等信息提交给合成线程，合成线程的执行记录你可以通过 Compositor 指标来查看。
合成线程维护了一个 Raster 线程池，线程池中的每个线程称为 Rasterize，用来执行光栅化操作，对应的任务就是 Rasterize Paint。
当然光栅化操作并不是在 Rasterize 线程中直接执行的，而是在 GPU 进程中执行的，因此 Rasterize 线程需要和 GPU 线程保持通信。
然后 GPU 生成图像，最终这些图层会被提交给浏览器进程，浏览器进程将其合成并最终显示在页面上。

所有的流程都是围绕这条线来展开的，先经历导航阶段，然后经历 HTML 解析，最后生成最终的页面。

以上是关于浏览器原理 40 # 性能分析工具：如何分析 Performance 中的 Main 指标？（完结）的主要内容，如果未能解决你的问题，请参考以下文章

股票PE的应用

病毒分析系列2 | 使用PE工具进行初步静态分析