输入url到页面渲染经历的整个流程

一：概况讲分为一下几个步骤：

    1、浏览器向 =>DNS 服务器请求=>解析 URL 的域名=>所对应的 IP 地址;
    2、解析出 IP 地址后，根据该 IP 地址和默认端口 80，和服务器建立TCP连接;
    3、浏览器发出读取文件的HTTP 请求，该请求报文作为 TCP 三次握手的第三个报文的数据发送给服务器;
    4、服务器对浏览器请求作出响应，并把对应的 html 文本发送给浏览器;
    5、释放 TCP连接;
    6、浏览器将 html 文本解析，渲染布局

二、详细步骤分为：

第一步、 DNS查询域名的IP地址

DNS查询顺序：浏览器缓存→系统缓存→路由器缓存→ISP DNS 缓存→（根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存）递归搜索

1） 浏览器缓存查询
　　当用户通过浏览器访问某域名时，浏览器首先会在自己的缓存中查找是否有该域名对应的IP           地 址（若曾经访问过该域名且没有清空缓存便存在）；

在浏览器输入chrome://net-internals/#dns，可查看到dns信息，

2） 系统缓存查询
　　查询系统Hosts文件中，DNS缓存是否有该域名对应IP；

3） 路由器缓存（也称查询局域网）
　　路由器缓存中检查，路由器也有DNS缓存。

        以上三步均为客服端的DNS缓存，本地查询

4） 运营商DNS服务器查询

        通过网卡设置的DNS服务器地址，请求数据库查询，

       首先会找TCP/IP参数中设置的首选DNS服务器，在此我们叫它本地DNS服务器

       互联网服务提供商(Internet Service Provider)的简称为ISP，ISP有专门的DNS服务器应对DNS查询请求。比如你用的是电信的网络，则会进入电信的DNS缓存服务器中进行查找；

5） 根服务器，基站查询：

       它就会向根服务器发出请求，进行递归查询（DNS服务器先问根域名服务器.com域名服务器的IP地址，然后再问.com域名服务器，依次类推） 顶级域名服务器、主域名服务器的查询

       全球仅有13台根域名服务器，1个主根域名服务器，其余12为辅根域名服务器。根域名收到请求后会查看区域文件记录，若无则将其管辖范围内顶级域名（如.com）服务器IP告诉本地DNS服务器；       
6）保存结果至缓存
　　本地域名服务器把返回的结果保存到缓存，以备下一次使用，同时将该结果反馈给客户端，客户端通过这个IP地址与web服务器建立链接。
 

第二步、TCP、IP传输数据

 三次握手，连接服务器

1）TCP是用于提供port到port面向连接的可靠的字节流传输，在IP网络层之上的传输层协议。

3.向服务器发送http请求，请求数据包

5.服务器获取请求，将数据返回给浏览器

6.浏览器根据返回的数据渲染页面

第三步、浏览器渲染页面

浏览器解析渲染页面分为一下五个步骤：

    根据 HTML 解析出 DOM 树
    根据 CSS 解析生成 CSS 规则树
    结合 DOM 树和 CSS 规则树，生成渲染树
    根据渲染树计算每一个节点的信息
    根据计算好的信息绘制页面

1.根据 HTML 解析 DOM 树

    根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM树解析的过程是一个深度优先遍历。即先构建当前节点的所有子节点，再构建下一个兄弟节点。
    在读取 HTML 文档，构建 DOM 树的过程中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。

2.根据 CSS 解析生成 CSS 规则树

    解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。
    浏览器在 CSS 规则树生成之前不会进行渲染。

3.结合 DOM 树和 CSS 规则树，生成渲染树

    DOM 树和 CSS 规则树全部准备好了以后，浏览器才会开始构建渲染树。
    精简 CSS 并可以加快 CSS 规则树的构建，从而加快页面相应速度。

4.根据渲染树计算每一个节点的信息（布局）

    布局：通过渲染树中渲染对象的信息，计算出每一个渲染对象的位置和尺寸
    回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就需要倒回去重新渲染。

5.根据计算好的信息绘制页面

    绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
    重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引起浏览器的重绘。
    回流：某个元素的尺寸发生了变化，则需重新计算渲染树，重新渲染。
相关内容：

HTTP协议：

把html、htm以超文本形式表现出来。靠http解析。phtpjsp 也会生成yightml让http解析。

TPC/IP协议是传输层协议，主要解决数据 如何在网络中传输，而HTTP是应用层协议，主要解决如何包装数据。

关于TCP/IP和
HTTP协议的关系，网络有一段比较容易理解的介绍：

“我们在传输数据时，可以只使用（传输层）TCP/IP协议，但是那样的话，如果没有应用层，便无法识别数据内容，如果想要使传输的数据有意义，则必须使用到应用层协议，应用层协议有很多，
比如HTTP、FTP、TELNET等，也 可以自己定义应用层协议。WEB使用HTTP协议作应用层协议，以封装HTTP文本信息，然后使用TCP/IP做传输层协议将它发到网络上。”
而HTTP连接使用的是“请求—响应”的方式，不仅在请求时需要先建立连接，而且需要客户端向服务器发出请求后，服务器端才能回复数据。很多情况下，需要服务器端主动向客户端推送数据，保持客户端与服务器数据的实时与同步。此时若双方建立的是Socket连接，服务器就可以直接将数据传送给客户端；若双方建立的是HTTP连接，则
服务器需要等到客户端发送一次请求后才能将数据传回给客户端，因此，客户端定时向服务器端发送连接请求，不仅可以保持在线，同时也是在“询问”服务器是否有新的数据，如果有就将数据传给客户端。
 

  参考文章：

来源：https://www.php.cn/faq/418509.html

https://www.csdn.net/tags/NtTakg5sMjc2NzQtYmxvZwO0O0OO0O0O.html

 来源地址：浏览器的DNS缓存查看和清除 - 脚本小娃子 - 博客园

DNS域名解析的过程 - GeaoZhang - 博客园

介绍Hosts文件和DNS及DNS的解析过程_Arithmetic-logic-CSDN博客_host文件和dns

TCPIP原理及HTTP和TCPIP与socket的关系_$好记性还是要多记录$-CSDN博客_tcp和socket关系