从输入URL到浏览器显示页面发生了什么

Michael_Lin 发布于2019-07-01 13:56 / 1948人阅读

摘要：分层由高到低分别为应用层传输层网络层数据链路层。状态码由三位数字组成，其中比较常见的是表示请求成功。在返回状态码的同时，响应报文也会附带重定向的，客户端接收到后将请求的做相应的改变再重新发送。

当在浏览器地址栏输入网址，如：http://cn.bing.com 后浏览器是怎么把最终的页面呈现出来的呢？这个过程可以大致分为两个部分：网络通信和页面渲染。

一、网络通信

互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层网上走。如图所示：

在浏览器中输入url
用户输入url，例如http://cn.bing.com。其中http为协议，cn.bing.com为网络地址，及指出需要的资源在那台计算机上。一般网络地址可以为域名或IP地址，此处为域名。使用域名是为了方便记忆，但是为了让计算机理解这个地址还需要把它解析为IP地址。

2.应用层DNS解析域名
客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。

3.应用层客户端发送HTTP请求
HTTP请求包括请求报头和请求主体两个部分，其中请求报头包含了至关重要的信息，包括请求的方法（GET / POST）、目标url、遵循的协议（http / https / ftp…），返回的信息是否需要缓存，以及客户端是否发送cookie等。

4.传输层TCP传输报文
位于传输层的TCP协议为传输报文提供可靠的字节流服务。它为了方便传输，将大块的数据分割成以报文段为单位的数据包进行管理，并为它们编号，方便服务器接收时能准确地还原报文信息。TCP协议通过“三次握手”等方法保证传输的安全可靠。

“三次握手”的过程是，发送端先发送一个带有SYN（synchronize）标志的数据包给接收端，在一定的延迟时间内等待接收的回复。接收端收到数据包后，传回一个带有SYN/ACK标志的数据包以示传达确认信息。接收方收到后再发送一个带有ACK标志的数据包给接收端以示握手成功。在这个过程中，如果发送端在规定延迟时间内没有收到回复则默认接收方没有收到请求，而再次发送，直到收到回复为止。

5.网络层IP协议查询MAC地址
IP协议的作用是把TCP分割好的各种数据包传送给接收方。而要保证确实能传到接收方还需要接收方的MAC地址，也就是物理地址。IP地址和MAC地址是一一对应的关系，一个网络设备的IP地址可以更换，但是MAC地址一般是固定不变的。ARP协议可以将IP地址解析成对应的MAC地址。当通信的双方不在同一个局域网时，需要多次中转才能到达最终的目标，在中转的过程中需要通过下一个中转站的MAC地址来搜索下一个中转目标。

6.数据到达数据链路层
在找到对方的MAC地址后，就将数据发送到数据链路层传输。这时，客户端发送请求的阶段结束

7.服务器接收数据
接收端的服务器在链路层接收到数据包，再层层向上直到应用层。这过程中包括在运输层通过TCP协议讲分段的数据包重新组成原来的HTTP请求报文。

8.服务器响应请求
服务接收到客户端发送的HTTP请求后，查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码。状态码由三位数字组成，其中比较常见的是200 OK表示请求成功。301表示永久重定向，即请求的资源已经永久转移到新的位置。在返回301状态码的同时，响应报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变再重新发送。404 not found 表示客户端请求的资源找不到。

9.服务器返回相应文件
请求成功后，服务器会返回相应的HTML文件。接下来就到了页面的渲染阶段了。
10.关闭TCP连接
为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次握手。

二、页面渲染
现代浏览器渲染页面的过程是这样的：解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

DOM树是由HTML文件中的标签排列组成，渲染树是在DOM树中加入CSS或HTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素，像元素或display属性值为none的元素都不在渲染树中。

在浏览器还没接收到完整的HTML文件时，它就开始渲染页面了，在遇到外部链入的脚本标签或样式标签或图片时，会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染，加入它们应有的样式，图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

服务器托管私有云 js显示数据到页面链接到云服务器之后输入什么链接到云服务器之后输入什么情况发生了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/31651.html

转：从输入url到显示网页发生了什么

摘要：在浏览器中输入到显示网页主要包含两个部分网络通信和页面渲染互联网内各网络设备间的通信都遵循协议，利用协议族进行网络通信时，会通过分层顺序与对方进行通信。状态码主要包括以下部分指示信息表示请求已接收，继续处理。在浏览器中输入url到显示网页主要包含两个部分：网络通信和页面渲染互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信...

Chiclaim 2019-04-23 11:53 评论0 收藏0
一个页面从输入URL到加载显示完成，发生了什么？

摘要：询问权威的服务器域名服务器会继续检查请求的下一部分，并将查询指向负责此特定域名的服务器这些权威的服务器将负责了解关于特定域的所有信息，并将信息存储在记录。面试经典题——URL加载一、涉及基本知识点： 1. 计算机网络五层因特尔协议栈：应用层（dns、http）：DNS解析成IP并完成http请求发送；传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接；网络层...

NervosNetwork 2019-08-22 17:15 评论0 收藏0
一个页面从输入URL到加载显示完成，发生了什么？

摘要：询问权威的服务器域名服务器会继续检查请求的下一部分，并将查询指向负责此特定域名的服务器这些权威的服务器将负责了解关于特定域的所有信息，并将信息存储在记录。面试经典题——URL加载一、涉及基本知识点： 1. 计算机网络五层因特尔协议栈：应用层（dns、http）：DNS解析成IP并完成http请求发送；传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接；网络层...

nanchen2251 2019-08-29 15:22 评论0 收藏0
一个页面从输入URL到加载显示完成，发生了什么？

摘要：询问权威的服务器域名服务器会继续检查请求的下一部分，并将查询指向负责此特定域名的服务器这些权威的服务器将负责了解关于特定域的所有信息，并将信息存储在记录。面试经典题——URL加载一、涉及基本知识点： 1. 计算机网络五层因特尔协议栈：应用层（dns、http）：DNS解析成IP并完成http请求发送；传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接；网络层...

lifesimple 2019-08-05 13:51 评论0 收藏0
一个页面从输入URL到加载显示完成，发生了什么？

摘要：询问权威的服务器域名服务器会继续检查请求的下一部分，并将查询指向负责此特定域名的服务器这些权威的服务器将负责了解关于特定域的所有信息，并将信息存储在记录。面试经典题——URL加载一、涉及基本知识点： 1. 计算机网络五层因特尔协议栈：应用层（dns、http）：DNS解析成IP并完成http请求发送；传输层（tcp、udp）：三次握手四次挥手模式建立tcp连接；网络层...

LuDongWei 2019-08-02 10:25 评论0 收藏0