当浏览器获取到网页数据后，浏览器又是如何将数据转化为视图？

前言

如果把web前端工程师比作赛车手，那么浏览器就成为了赛车。一个合格的赛车手怎么能不对自己的赛车了如指掌呢。

1. 当浏览器获取到网页数据后，浏览器又是如何将数据转化为视图？

我们从浏览器结构图入手：

浏览器结构可以包括 ①用户界面 ②浏览器引擎 ③渲染引擎

①用户界面：用于展示除变迁页窗口之外的其他用户界面内容； ②在用户界面和渲染引擎之间的浏览器引擎：用于在用户界面和渲染引擎之间传递数据； ③渲染引擎：负责用户请求的页面内容。 其中，渲染引擎中还存在的功能模块：网络、JS解析器、数据存储持久层。

------渲染引擎是一个浏览器的核心与灵魂------

以谷歌浏览器为例：

在这里归纳一波不同浏览器的内核：

2. 当我在浏览器地址栏输入www.bilibili.com时，浏览器会干啥子。

第一步：首先，浏览器进程的UI线程会捕捉你的输入内容，后进行判断。若访问的是网址，则UI线程会启动一个网络线程来请求DNS进行域名解析，接着开始连接服务器获取数据；另外一种情况是，访问的是一串关键词，浏览器会使用默认配置的搜索引擎来查询。

第二步：网络线程获取到数据之后接下来会干什么？获取数据后，会通过SafeBrowsing来检查站点是否是恶意站点。

注：safeBrowsing是谷歌内部的一套站点安全系统。

第三步： 数据准备完毕且安全检验通过时，网络线程会通过UI线程。UI线程创建渲染器（Randerer Thread）来渲染页面。
浏览器进程通过IPC管道，将数据传送给了渲染器进程，此时正式进入渲染流程了哦 【该数据即html】

核心任务：html、css、js、image渲染成用户可以交互的web页面。

第四步：渲染器进程的主线程将html进行解析构造DOM数据结构。

第五步：上图解：

第六步：layout布局。主线程通过遍历dom和计算好的样式来生成layoutTree，layoutTree上的每个节点都记录了x、y坐标和边框尺寸。

值得注意的是：DOM树和layout树的节点并不一一对应，如下

display:none ---- 不会出现再LayoutTree上
::before {content: ''} ---- content的内容会出现在Layout上，但不出现在DOM上

第七步：遍历LayoutTree创建一个绘制记录表（Paint Record），用于记录绘制节点的顺序。把信息转化成像素点显示在屏幕上。

第八步：栅格化（Restering），把上面的信息传递给合成器线程。合成器线程将信息切分为多个图块，并将每个图块发送给栅格线程（Raster Thread），最后栅格化每个图块并存储在GPU内存中。

第九步：合成器线程将收集成为“draw quads”的图块信息，其中记录了图块在内存中的位置和页面中的位置。根据上述，合成器生成了一个合成器帧（Compsitor Frame）并通过IPC传递给浏览器进程，接着再传送到GPU，最后GPU渲染展示到屏幕上。

注：当页面发生变化时，则会行成新的合成器帧。