浏览器的一个请求从发送到返回都经历了什么？

浏览器输入url经历图

分析过程：

1.用户输入url，浏览器内部代码将url进行拆分解析

url解析图

2.浏览器首先去找本地的hosts文件，检查在该文件中是否有相应的域名、IP对应关系，如果有，则向其IP地址发送请求，如果没有就会将domain（域）发送给 dns（域名服务器）进行解析（解析如下图），将域名解析成对应的服务器IP地址，发回给浏览器

DNS解析domian过程图

注释：（结合上图看）

浏览器客户端向本地DNS服务器发送一个含有域名www.cnblogs.com的DNS查询报文。

本地DNS服务器把查询报文转发到根DNS服务器，根DNS服务器注意到其com后缀，于是向本地DNS服务器返回comDNS服务器的IP地址。

本地DNS服务器再次向comDNS服务器发送查询请求，comDNS服务器注意到其www.cnblogs.com后缀并用负责该域名的权威DNS服务器的IP地址作为回应。

最后，本地DNS服务器将含有www.cnblogs.com的IP地址的响应报文发送给客户端。

3.浏览器费了一顿周折终于拿到了服务器IP，接下来就是网络通信（过程如下图），分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层往上走

首先：应用层客户端发送HTTP请求

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

请求报文

然后：传输层TCP传输报文

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

客户端发送一个带有SYN标志的数据包给服务端，在一定的延迟时间内等待接收的回复。服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息，最后客户端再回传一个带ACK标志的数据包，代表握手结束，连接成功。

SYN （Synchronize Sequence Numbers）同步序列编号

ACK (Acknowledgement）确认字符

下图也可以这么理解：

客户端：“你好，在家不，有你快递。”---SYN

服务端：“在的，送来就行。”-----SYN/ACK

客户端：“好嘞。”-----ACK

接着：网络层IP协议查询MAC地址

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

数据到达数据链路层

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

再次：服务器接收数据

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

服务器响应请求

服务接收到客户端发送的HTTP请求后，查找客户端请求的资源，并返回响应报文，响应报文中包括一个重要的信息——状态码。状态码由三位数字组成，

其中比较常见的是200 OK表示请求成功。

301表示永久重定向，即请求的资源已经永久转移到新的位置。在返回301状态码的同时，响应报文也会附带重定向的url，客户端接收到后将http请求的url做相应的改变再重新发送。

404 not found 表示客户端请求的资源找不到。

最后：服务器返回相应文件

服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。

服务器有自己的MVC 结构（如下图）

关闭TCP连接

为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。与创建TCP连接的3次握手类似，关闭TCP连接，需要4次握手。

4次握手

上图可以这么理解：

客户端：“兄弟，我这边没数据要传了，咱关闭连接吧。”----FIN

服务端：“收到，我看看我这边有木有数据了。”----ACK

服务端：“兄弟，我这边也没数据要传你了，咱可以关闭连接了。”----FIN

客户端：“好嘞。”----ACK

4.页面的渲染阶段

流程：

解析HTML生成DOM树。
解析CSS生成CSSOM规则树。
将DOM树与CSSOM规则树合并在一起生成渲染树。
遍历渲染树开始布局，计算每个节点的位置大小信息。
将渲染树每个节点绘制到屏幕。

webkit渲染引擎流程

过程的重点：

渲染阻塞

当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行，然后继续构建DOM。每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的下载和构建。

所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。

JS置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。

当解析html的时候，会把新来的元素插入dom树里面，同时去查找css，然后把对应的样式规则应用到元素上，查找样式表是按照从右到左的顺序去匹配的。

例如： div p {font-size: 16px}，会先寻找所有p标签并判断它的父标签是否为div之后才会决定要不要采用这个样式进行渲染）。

所以，我们平时写CSS时，尽量用id和class，千万不要过渡层叠。

渲染树绘制

在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制工作是由浏览器的UI后端组件完成的。

reflow与repaint：

根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：replaint和reflow。

replaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。

reflow：意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。

所以我们应该尽量减少reflow和replaint，我想这也是为什么现在很少有用table布局的原因之一。

display:none 会触发 reflow，visibility: hidden属性并不算是不可见属性，它的语义是隐藏元素，但元素仍然占据着布局空间，它会被渲染成一个空框，所以visibility:hidden 只会触发 repaint，因为没有发生位置变化。

有些情况下，比如修改了元素的样式，浏览器并不会立刻 reflow 或 repaint 一次，而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow 或增量异步 reflow。

有些情况下，比如 resize 窗口，改变了页面默认的字体等。对于这些操作，浏览器会马上进行 reflow。

参考：

https://www.cnblogs.com/webdeve/p/7865520.html

https://www.cnblogs.com/kongxy/p/4615226.html

转载于:https://www.cnblogs.com/echo-hui/p/9298203.html

浏览器的一个请求从发送到返回都经历了什么？相关推荐

Ajax入门-搭建服务器并使用ajax技术向服务器发送一个请求并获得服务器返回的数据
今天刚入坑学习ajax,刚开始就遇到服务器这一知识盲区,经过解决各种问题,成功运行的代码,下面就分享给你们,希望能够帮你们解决问题. (一)node.js安装 1.进入官网,下载对应版本 2.下载了. ...
2022全网最全最细的jmeter接口测试教程以及接口测试流程详解— 使用JMeter发送一个请求
当我们第一次打开JMeter的时候,树形标签栏中只有一个"测试计划". 如果想要发送一个请求,需要操作如下步骤:(最基础的一个请求) 步骤1:创建一个测试计划打开JMeter会默 ...
我是一个请求，我该何去何从
摘要:本文主要分析在cse框架下一个请求是怎么被接受和处理的. 本文分享自华为云社区<我是一个请求,我该何去何从?>,原文作者:向昊. 前置知识 cse的通信是基于vert.x来搞的,所以 ...
谷歌浏览器怎么重发请求_chrome 浏览器的预提取资源机制导致的一个请求发送两次的问题以及ClientAbortException异常...
调查一个 pdf 打印报错: ExceptionConverter: org.apache.catalina.connector.ClientAbortException: java.net.Sock ...
node.js request get 请求怎么拿到返回的数据_从零开始用nodejs写一个简单的静态服务器
nodejs搭建服务器第一步 const http = require("http")const PORT = 8000 const server = http.createSer ...
浏览器同源政策之ajax请求不能发送
同源政策(same-origin policy)是浏览器安全的基石同源指的是三个相同限制范围 (1) Cookie.LocalStorage 和 IndexDB 无法读取.(2) DOM 无法获得 ...
04、用浏览器显示一个网页时，是否只发了一个网络请求给服务器？
目录服务器思考服务器用户量.数据访问量越大,对服务器的性能要求越高当我们在浏览器上输入网址的时候,比如baidu.com,那就会发送请求给这个服务器,如果同时有一亿个用户在浏览器输入百度网址 ...
Redis一个命令请求从发送到完成的步骤以及初始化服务器步骤
一个命令请求从发送到完成的步骤如下: 1.客户端将命令请求发送给服务器当用户在客户端中键入一个命令请求时,客户端会将这个命令请求转换成协议格式,然后通过连接到服务器的套接字,将协议格式的命令请求发 ...
我是一个请求，我是如何被发送的？
摘要:本文主要分析使用cse提供的RestTemplate的场景,其实cse提供的rpc注解(RpcReference)的方式最后的调用逻辑和RestTemplate是殊途同归的. 本文分享自华为云社 ...

浏览器的一个请求从发送到返回都经历了什么？

浏览器的一个请求从发送到返回都经历了什么？相关推荐

最新文章

热门文章