前言
总结来说，从输入从URL开始，会发生下面一系列过程：
- DNS域名解析
- 构建浏览器和服务器的TCP链接（3次握手）
- 浏览器发送HTTP请求
- 服务器处理HTTP请求，并返回请求的资源（HTML，CSS，JS）
- 浏览器解析并渲染界面
- 断开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域名解析过程如下：
- 输入www.google.com
- 本地域名服务器查找是否有缓存，如果没有去问根域名服务器
- 根域名服务器如果找不到，则会去问COM顶级域名服务器
- COM顶级域名服务器会告诉去下一级的域名服务器google.com域名服务器查找IP
- google.com域名服务器终于找到了IP，并返回IP给本地域名服务器
- 本地域名服务器将IP地址告诉浏览器，浏览器进行下一步操作
- 同时，本地域名服务器还会将这个IP地址缓存，以便下次快速寻找IP
1.3 DNS的优化与应用
DNS缓存，上面已经说了
DNS负载均衡：(DNS重定向) DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址，在应答DNS查询时， DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果，将客户端的访问 引导到不同的机器上去，使得不同的客户端访问不同的服务器，从而达到负载均衡的目的。
大家耳熟能详的CDN(Content Delivery Network)就是利用DNS的重定向技术，DNS服务器会返回一个跟用户最接近的点的IP地址给用户，CDN节点的服务器负责响应用户的请求，提供所需的内容。
- DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。
2. 进行TCP链接
3. 浏览器发送HTTP请求
4. 服务器处理HTTP请求，并返回请求的资源（HTML，CSS，JS）
5. 浏览器解析并渲染界面
浏览器内核拿到内容后，渲染步骤大致可以分为以下几步：
解析HTML，构建DOM树
解析CSS，生成CSS规则树
合并DOM树和CSS规则，生成render树
布局render树（Layout/reflow），负责各元素尺寸、位置的计算
绘制render树（paint），绘制页面像素信息
5.1 解析HTML，构建DOM树
简单的理解，这一步的流程是这样的：浏览器解析HTML，构建DOM树。 解析HTML到构建出DOM当然过程可以简述如下：
5.2 解析CSS，生成CSS规则树
同理，CSS规则树的生成也是类似。
5.3 合并DOM树和CSS规则，生成render树
当DOM树和CSSOM都有了后，就要开始构建渲染树了。
一般来说，渲染树和DOM树相对应的，但不是严格意义上的一一对应,因为有一些不可见的DOM元素不会插入到渲染树中，如head这种不可见的标签或者display: none等
5.4 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸。
5.5 绘制render树（paint），绘制页面像素信息
绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
这张图片中重要的四个步骤
- 计算CSS样式
- 构建渲染树
- 布局，主要定位坐标和大小，是否换行，各种position overflow z-index属性
- 绘制，将图像绘制出来
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
