「图文讲解」浏览器原理与页面渲染过程

相信大家在面试的时候面试官总是会问一个问题：“可以说下浏览器从输入url到渲染页面完成过程吗？”，非官方标准答案来啦～

那我们首先需要先来讲一下浏览器是什么，浏览器其实就是一个应用软件，在学习操作系统的时候我们了解到每个应用程序必须至少启动一个进程来执行其功能，为你这个应用程序申请计算机资源，所以浏览器作为一个应用程序也是由许多进程组成的。

我们大体可以分为这几个进程：浏览器进程、网络进程、渲染进程、GPU进程、插件进程。

浏览器进程 -> UI 线程

当我们在浏览器导航栏输入一个内容的时候，浏览器进程里的 UI 线程会先进程解析判断是 URL 还是搜索关键词，如果是 URL，便会通过 IPC 通道将信息传送给网络进程。

网络进程

让我们将镜头转向网络进程，网络进程拿到 URL 后，以数据包的形式通过 TCP/IP 协议栈来获取到响应的数据，此时网络进程会将拿到的内容与 URL 一并交给警察局也就是 SafeBrowsing 做下安全检查，检查这个内容是否与某个已知的病毒网站相匹配以及这个IP是否在黑名单里，如果有安全风险会先展示警告页面询问你是否继续访问。

当返回的数据准备完毕且无风险，网络进程就会将数据返回给 UI 线程，UI 线程就会去摇一个渲染进程，进入渲染阶段。

渲染进程

渲染进程的任务就是把 html、css、JavaScript 等资源进行计算，然后转换为显示器的像素点，最终形成合成帧，返回给浏览器进程。

首先是对html进行解析，构建一个以 Document 为根节点的 DOM Tree，解析的过程中如果遇到 script 标签，则会转而去加载解析 JavaScript 代码，如果这里的 JavaScript 使用异步加载则不会影响 html 的解析，否则要等 JavaScript 解析完成后才能继续构建 DOM Tree。

DOM Tree 构建完成后会开始解析 CSS，计算样式属性，结合 DOM Tree 构建 Layout Tree，也就是进行布局，我的理解就是构图。至此我们便已经知道了页面「有哪些元素」「长什么样」「在哪里」。

理论有了但是怎么能下笔画呢，是要先画蓝天还是先画白云？所以根据 Layout Tree 又创建了一个绘制顺序表，告诉计算机你的元素在屏幕上的显示层级，要先显示蓝天再显示白云不然白云会被篮天挡住。

一切准备就绪但是这是代码，用户要的是可视化的页面，所以要将以上这些信息转化成用户可见的像素点显示在屏幕上，这个过程就叫做栅格化。渲染进程里的合成线程和栅格线程会将这些信息生成合成帧，提交给浏览器进程。

GPU 进程

浏览器进程将渲染进程里的合成帧发送给 GPU 进程 ，GPU 进程将其进行渲染并展示在屏幕上，至此用户就可以看到我们写的前端页面啦～