从浏览器导航栏输入URL到浏览器渲染的过程 #

前置知识 #

了解浏览器渲染之前，我们需要了解浏览器的一些基础概念，下面就一起来看看吧。

组成浏览器的核心模块 #

• 用户界面(User Interface): 指一些常用的浏览器组件，比如地址栏、返回、书签等等。
• 数据持久化(Data Persistence): 指浏览器的Cookie、LocalStorage等组件
• 浏览器引擎(Browser engine): 指平台应用等相关接口，在用户界面和呈现引擎之间传送指令。
• 渲染引擎(Rendering engine): 处理HTML、CSS的解析和渲染
• JavaScript解释器(JavaScript Interpreter): 解析和执行JavaScript代码
• 用户界面后端(UI Backend): 指浏览器的图形库等
• 网络(Networking): 用于网络调用，比如HTTP请求

以上七个部分就是组成浏览器的核心模块。

浏览器的内核 #

浏览器内核分为两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎

• 渲染引擎： 负责去的网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页等显示方式，然后回输出至浏览器窗口或打印机。
• JS引擎： 负责解析和执行JavaScript来实现网页的动态效果，不同的浏览器内核对于网页的解析会有不同，以至于造成页面的渲染效果也不同。 所有的可视的程序都需要内核来操作或者展示，最开始浏览器的渲染引擎和JS引擎并没有区分的很明确，随着JS引擎越来越独立，浏览器内核都指向渲染引擎。

DNS是什么？ #

域名系统DNS(Domain Name system)是因特网使用的命名系统，用来把人们使用的机器名字转换成IP地址。DNS属于应用层协议，是基于UDP协议。

DNS查询的流程：

1. 主机先向本地域名服务器进行递归查询
2. 本地域名服务器采用迭代的查询，它先向根域名服务器查询
3. 根域名服务器会告诉本地域名服务器，下一次应该查询的顶级域名服务器的IP地址。
4. 本地域名服务器向顶级域名服务器发起查询。
5. 顶级域名服务器告诉本地域名服务器，下一次应查询的权限域名服务器的IP地址。
6. 本地域名服务器向权限域名服务器发起查询。
7. 权限域名服务器告诉本地域名服务器所查询的IP地址。
8. 本地域名服务器把查询结果告诉主机。

正文 #

从浏览器导航栏输入www.seasonblog.top,会展示笔者的个人博客，那这个过程是怎样的呢，我们先来看看一张动态流程图。

我们可以根据这流程图来逐步分析:

1. 我们在浏览器导航栏输入URL
2. 浏览器请求DNS服务器，拿到IP地址
   1. 如果浏览器有缓存域名对应的IP地址，则不进行DNS查询
   2. DNS查询流程在上文中有描述。
3. 浏览器拿到了IP地址后，通过TCP 三次握手向WEB服务器建立连接
   1. 第一次握手： 客户端发送SYN报文，并进入SYN_SENT状态，等待服务器的确认
   2. 第二次握手： 服务器收到SYN豹纹，需要给客户端发送ACK确认豹纹，同时服务器也要向客户端发送一个SYN报文，所以也就是向客户端发送SYN + ACK报文，此时服务器进入SYN_RCVD状态
   3. 第三次握手：客户端收到SYN + ACK报文，向服务器发送确认包，客户端进入ESTABLISHED状态。待服务器收到客户端发送的ACK包也会进入SETABLISHED状态，完成三次握手。
4. 浏览器完成三次握手建立WEB服务器的连接后，会发起初始化HTTP GET请求。

   通常，一个站点的初始化请求，服务器会会返回一个HTML文件。

   1. 响应到服务器返回的HTML文件后，浏览器进入下一步流程
5. 浏览器获取到HTML文件后，开始解析HTML构建DOM树
   1. 在解析过程中遇到非阻塞资源，例如图片，浏览器会请求这些资源并且继续解析。
   2. 遇到CSS文件时，解析也不会中断。
   3. 当解析遇到<script>标签（特别没有async和defer属性）时，会阻塞渲染并停止解析。
6. 当DOM树构建完成后，会获取所有的css构建成CSSOM树
7. 现在已经构建完成DOM树和CSSOM树，会将这两棵树组合成渲染树(Render Tree)开始渲染。
   1. 布局(layout)：构建渲染树后，标识显示的节点(即使不可见)及其计算样式，但不表示每个节点的尺寸或位置，为了确认每个对象的确切大小和位置，浏览器从渲染树的根节点开始遍历。
   2. 回流(reflow)： 布局完成后，假设有未知大小和位置的节点重新计算，这一步操作叫做回流，在后续改变了样式大小和位置后也还会触发回流。
   3. 绘制(draw): 我们已经得到所有节点的大小和在页面上的位置，我们根据这些数据将节点绘制到页面上。
   4. 合成(compositiong): 当文档的各个部分以不同层绘制，相互重叠时，必须进行合成，以确保他们以正确的顺序会知道屏幕上，并正确显示内容。

   TIP： 可参考ps的图层合成

8. 浏览器展示页面。

上述八个步骤就是从浏览器导航栏输入URL到页面展示的整个流程了，关于请求方面的细节，在本文中就不过多讲述，我们来重点讲述渲染流程。