从输入URL到页面渲染全过程

前言

总结来说，从输入从URL开始，会发生下面一系列过程：

1. DNS域名解析
2. 构建浏览器和服务器的TCP链接（3次握手）
3. 浏览器发送HTTP请求
4. 服务器处理HTTP请求，并返回请求的资源（HTML，CSS，JS）
5. 浏览器解析并渲染界面
6. 断开TCP链接（4次挥手）

由于这个过程中涉及到的问题和知识点太多，如果每个问题都详细解释，则篇幅太长。我看了许多文章，虽然讲的很详细，但是由于篇幅太长，反而给人一种没有总体印象和大体思路的感觉。这篇文章，只着重讲一下【1. DNS域名解析】和【5. 浏览器解析并渲染界面】，因为这部分知识，我还没有进行总结。至于如何建立TCP链接，如何发送HTTP请求这些问题，都在其他文章进行了介绍，这里不进行赘述。

1. DNS域名解析

在浏览器输入网址后，首先要经过域名解析，因为浏览器并不能直接通过域名(www.baidu.com)找到对应的服务器，而是要通过 IP 地址(220.114.23.56)。域名就相当于 IP 地址乔装打扮的伪装者，带着一副面具。它的作用就是便于记忆和沟通的一组服务器的地址。

形象得理解DNS过程： www.baidu.com →（DNS）→ 220.114.23.56

那么我们输入完URL并敲击回车，是不是立马就向DNS服务器发送请求了呢？事实上在这之前，浏览器会进行一个逐级的缓存查找，如果能在缓存中找到这个IP地址，就不用进行复杂的DNS解析了。

1.1 DNS缓存

DNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。

• 浏览器缓存：浏览器会按照一定的频率缓存 DNS 记录。
• 操作系统缓存：如果浏览器缓存中找不到需要的 DNS 记录，那就去操作系统中找。
• 路由缓存：路由器也有 DNS 缓存。
• ISP 的 DNS 服务器：ISP 是互联网服务提供商(Internet Service Provider)的简称，ISP 有专门的 DNS 服务器应对 DNS 查询请求。
• 根服务器：ISP 的 DNS 服务器还找不到的话，它就会向根服务器发出请求，进行递归查询（DNS 【服务器先问根域名服务器.com】 域名服务器的 IP 地址，然后再问.baidu 域名服务器，依次类推）

1.2 DNS解析

那么真正的DNS域名解析过程如下：

DNS域名解析过程

1. 输入www.google.com
2. 本地域名服务器查找是否有缓存，如果没有去问根域名服务器
3. 根域名服务器如果找不到，则会去问COM顶级域名服务器
4. COM顶级域名服务器会告诉去下一级的域名服务器google.com域名服务器查找IP
5. google.com域名服务器终于找到了IP，并返回IP给本地域名服务器
6. 本地域名服务器将IP地址告诉浏览器，浏览器进行下一步操作
7. 同时，本地域名服务器还会将这个IP地址缓存，以便下次快速寻找IP

1.3 DNS的优化与应用

1. DNS缓存，上面已经说了

2. DNS负载均衡：(DNS重定向) DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址，在应答DNS查询时， DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果，将客户端的访问 引导到不同的机器上去，使得不同的客户端访问不同的服务器，从而达到负载均衡的目的。

大家耳熟能详的CDN(Content Delivery Network)就是利用DNS的重定向技术，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责响应用户的请求，提供所需的内容。

3. DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。

2. 进行TCP链接

3. 浏览器发送HTTP请求

4. 服务器处理HTTP请求，并返回请求的资源（HTML，CSS，JS）

5. 浏览器解析并渲染界面

浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：

1. 解析HTML，构建DOM树

2. 解析CSS，生成CSS规则树

3. 合并DOM树和CSS规则，生成render树

4. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算

5. 绘制render树（paint），绘制页面像素信息

渲染流程

5.1 解析HTML，构建DOM树

简单的理解，这一步的流程是这样的：浏览器解析HTML，构建DOM树。 解析HTML到构建出DOM当然过程可以简述如下：

生成DOM树

5.2 解析CSS，生成CSS规则树

同理，CSS规则树的生成也是类似。

生成CSS规则树

5.3 合并DOM树和CSS规则，生成render树

当DOM树和CSSOM都有了后，就要开始构建渲染树了。

一般来说，渲染树和DOM树相对应的，但不是严格意义上的一一对应,因为有一些不可见的DOM元素不会插入到渲染树中，如head这种不可见的标签或者display: none等

生成render树

5.4 布局render树（Layout/reflow），负责各元素尺寸、位置的计算

布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸。

5.5 绘制render树（paint），绘制页面像素信息

绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。

绘制

这张图片中重要的四个步骤

1. 计算CSS样式
2. 构建渲染树
3. 布局，主要定位坐标和大小，是否换行，各种position overflow z-index属性
4. 绘制，将图像绘制出来

6. 断开TCP链接（4次挥手）

7. 参考文章

作者：WilliamCao
链接：https://juejin.im/post/6844903784229896199

作者：浪里行舟
链接：https://juejin.im/post/6844903717259444232

作者：july
链接：https://juejin.im/post/6844904142742224904

作者：心外无事
链接：https://juejin.im/post/6844903618382921742