从网页地址栏输入网址到页面渲染的整体流程

整体步骤

1、DNS解析

2、TCP握手

3、TSL握手

4、浏览器开始解析请求到的文件

5、构建DOM树、构建CSSOM树、解析JS

6、生成Render树

7、调用GPU绘制，合成图层，将内容显示到屏幕上

步骤详解

DNS解析

作用是将域名解析为IP。

在实际生活中我们在网址搜索某个网站时都是使用域名，因为IP地址难以记忆，为了方便上网的人群，一个组织提出了域名，我们可以把域名看作是某个IP的别名，DNS 就是去查询这个别名的真正名称是什么。如果你也想拥有自己的域名可以花钱去买一个。

在DNS解析时的具体操作：

如果我们访问的是百度www.baidu.com

首先我们的操作系统会在本地缓存中去查询是否有这个IP（如果你以前访问过这个网页，本地缓存中可能就有它的IP直接就可以做网络请求）

如果本地缓存中不存在则查找本地DNS解析器缓存，是否有这个网址映射关系，如果有，直接返回，完成域名解析。

如果还没有的话会去系统配置的 DNS 服务器（本地域名服务器）中查询，如果这时候还没得话，会直接去 DNS 根服务器查询，这一步查询会找出负责com这个一级域名的服务器 然后去该服务器查询baidu这个二级域名 接下来负责二级域名的服务器去查询www这个三级域名，直到找到www.baidu.com

我们需要明白这种到DNS根服务器中的查询是迭代查询，还有一种查询是递归查询，主机向本地域名服务器的查询一般都是采用递归查询。

递归查询：如果主机所询问的本地域名服务器不知道被查询的域名的IP地址，那么本地域名服务器就以DNS客户的身份，向其它根域名服务器继续发出查询请求报文(即替主机继续查询)，而不是让主机自己进行下一步查询。递归查询返回的查询结果是所要查询的IP地址或者报错。

两种的区别就是递归查询是由客户端去做请求，迭代查询是由系统配置的 DNS 服务器做请求，得到结果后将数据返回给客户端。

TCP握手

接下来是 TCP 握手，应用层会下发数据给传输层，这里 TCP 协议会指明两端的端口号，然后下发给网络层。网络层中的 IP 协议会确定 IP 地址，并且指示了数据传输中如何跳转路由器。然后包会再被封装到数据链路层的数据帧结构中，最后就是物理层面的传输了。

知道TCP建立连接的方式

TCP的三次握手：

第一次握手

客户端向服务端发送连接请求报文段。该报文段中包含自身的数据通讯初始序号。请求发送后，客户端便进入 SYN-SENT 状态。

第二次握手

服务端收到连接请求报文段后，如果同意连接，则会发送一个应答，该应答中也会包含自身的数据通讯初始序号，发送完成后便进入 SYN-RECEIVED 状态。

第三次握手

当客户端收到连接同意的应答后，还要向服务端发送一个确认报文。客户端发完这个报文段后便进入 ESTABLISHED 状态，服务端收到这个应答后也进入 ESTABLISHED 状态，此时连接建立成功。

为什么 TCP 建立连接需要三次握手，明明两次就可以建立起连接？

因为这是为了防止出现失效的连接请求报文段被服务端接收的情况，从而产生错误。

可以想象如下场景。客户端发送了一个连接请求 A，但是因为网络原因造成了超时，这时 TCP 会启动超时重传的机制再次发送一个连接请求 B。此时请求顺利到达服务端，服务端应答完就建立了请求，然后接收数据后释放了连接。

假设这时候连接请求 A 在两端关闭后终于抵达了服务端，那么此时服务端会认为客户端又需要建立 TCP 连接，从而应答了该请求并进入 ESTABLISHED 状态。但是客户端其实是 CLOSED 的状态，那么就会导致服务端一直等待，造成资源的浪费。

PS：在建立连接中，任意一端掉线，TCP 都会重发 SYN 包，一般会重试五次，在建立连接中可能会遇到 SYN Flood 攻击。遇到这种情况你可以选择调低重试次数或者干脆在不能处理的情况下拒绝请求。

TLS握手

数据在进入服务端之前，可能还会先经过负责负载均衡的服务器，它的作用就是将请求合理的分发到多台服务器上，这时假设服务端会响应一个 HTML 文件。

首先浏览器会判断状态码是什么，如果是 200 那就继续解析，如果 400 或 500 的话就会报错，如果 300 的话会进行重定向，这里会有个重定向计数器，避免过多次的重定向，超过次数也会报错。

浏览器开始解析文件

浏览器开始解析文件，如果是 gzip 格式的话会先解压一下，然后通过文件的编码格式知道该如何去解码文件。

文件解码成功后会正式开始渲染流程

1.把标签 文本 注释 属性等等 解析为节点树(DOM Tree)

2.解析DOM tree中的节点时遇到了不同的元素会有不同的操作:

2.1style标签或者link-css 遇到css代码 就会把css代码解析为CSS样式结构体

2.2遇到 script 标签的话，会判断是否存在 async 或者 defer ，前者会并行进行下载并执行 JS，后者会先下载文件，然后等待 HTML 解析完成后顺序执行。如果以上都没有，就会阻塞住渲染流程直到 JS 执行完毕。

2.3遇到了src 会去异步加载(网络请求)资源

生成Render树

当所有的资源加载完毕，页面按照解析好的DOM tree和CSS层叠样式表结合为renderTree，这一步就是确定页面元素的布局、样式等等诸多方面的东西。

调用GPU绘制，合成图层，将内容显示到屏幕上

了解GPU是什么

GPU是一个专门为图形处理高并发计算而设计的处理单元，它能同时更新所有的像素，并呈现在显示器上。

这一步GPU计算出渲染树每个节点在屏幕中的位置然后将各个节点绘制到屏幕上，这一步被称为绘制painting。