重要申明:感谢原文作者——沐风的心,想看原文请戳这里!我借鉴了原文的页面请求流程,原文见时序图之后正文。

重要申明:感谢原文作者——一行两行,想看原文请戳这里!我借鉴了原文的完整HTTP请求流程。

增加了时序图,有不妥之处,欢迎指正~~  (未完待续,需要增加后端服务器框架内部处理)

一、引言

前端不仅要让用户对网页有完美的体验,让用户尽快体验到完美的网页也是很重要的,这就要前端攻城狮掌握一些网络原理相关的知识了。这里就来聊一聊从用户输入 url 到页面加载完成的过程中都发生了什么事情?

二、正文

用户输入 url 之后大致发生了以下几件事:

  1. 浏览器查找域名的 IP 地址。这一步包括 DNS 具体的查找过程,包括:浏览器缓存 -> 系统缓存 -> 路由器缓存……
  2. 浏览器向 web 服务器发送一个 http 请求:三次握手、传送数据、四次挥手;
  3. 服务器的永久重定向响应:返回真正访问的地址;
  4. 浏览器跟踪重定向地址:另发一个 http 请求;
  5. 服务器处理请求;
  6. 服务器返回一个 http 响应;
  7. 浏览器显示 html 页面:解析 html 以构建 DOM 树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树;
  8. 浏览器发送请求,获取嵌入在 html 中的资源(如图片、音频、视频、CSSJS 等等);
  9. 浏览器发送异步请求。

顺便附上 http 状态码 (其他状态码的详情,请戳这里)

http 状态码 详细状态码 状态原因
1xx   消息
2xx   成功
3xx   重定向
4xx   客户端错误
5xx   服务器错误
5xx 500 接口报错了
5xx 502 后端服务没启
5xx 503 启动挂了

下面我们就详细地了解一下这些过程:

1. DNS 查找 IP 地址

DNS域名系统 (Domain Name System) 的缩写,是因特网的一项核心服务。它作为可以将域名和 IP 地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住能够被机器直接读取的 IP 数字串。

  1. DNS 查找过程:

    1. 浏览器缓存 —— 浏览器会缓存 DNS 记录一段时间,但是操作系统并没有告诉浏览器储存 DNS 记录的时间。于是,不同浏览器会储存各自的一个固定时间( 2 分钟到 30 分钟不等)
    2. 系统缓存 – 如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用( Windows 里是 gethostbyname ),这样便可获得并查询系统缓存中的记录。
    3. 路由器缓存 – 接着,前面的查询请求发向路由器。路由器一般会有自己的 DNS 缓存。
    4. ISP DNS缓存 – 接下来要 check 的就是 ISP 缓存 DNS 的服务器。ISP (Internet Service Provider) 就是互联网服务提供商,在这一般都能找到相应的缓存记录。
    5. 递归搜索 – 你的 ISPDNS 服务器从跟域名服务器开始进行递归搜索,从 .com 顶级域名服务器到 example 的域名服务器。一般 DNS 服务器的缓存中会有 .com 域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。
  2. DNS 进行域名解析的过程

    1. 客户端发出 DNS 请求翻译 IP 地址或主机名;
    2. DNS 服务器在收到客户端的请求后,检查 DNS 服务器的缓存,若查到请求的地址或名字,即向客户端发出应答信息;
    3. 若没有查到,则在数据库中查找,若查到请求的地址或名字,即向客户端发出应答信息;
    4. 若没有查到,则将请求发给根域 DNS 服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字。然后,向客户端所在网络的 DNS 服务器发出应答信息,DNS 服务器收到应答后,先在缓存中存储,然后,将解析结果发给客户端。
    5. 若没有找到,则返回错误信息。

2. http请求

  1. 三次握手建立 TCP 连接

    http 工作开始之前,浏览器首先要通过网络与服务器建立连接,该连接是通过 TCP 来完成的。该协议与 IP 协议共同构建 Internet ,即著名的 TCP/IP 协议族,因此 Internet 又被称作是 TCP/IP 网络。 http 是比 TCP 更高层次的应用层协议。根据规则,只有低层协议建立之后才能进行更高次层协议的连接。因此,首先要建立 TCP 连接,一般 TCP 连接的端口号是 80 。在 TCP/IP 协议中,TCP 协议提供可靠的连接服务,采用三次握手建立一个连接:

    1. 第一次握手:建立连接时,客户端发送 SYN(syn=j)到服务器,并进入 SYN_SENT 状态,等待服务器确认;SYN:同步序列编号(Synchronize Sequence Numbers)
    2. 第二次握手:服务器收到 SYN 包,必须确认客户的 SYN(ack=j+1),同时自己也发送一个 SYN(syn=k),即 SYN+ACK 包,此时服务器进入 SYN_RECV 状态;
    3. 第三次握手:客户端收到服务器的 SYN+ACK 包,向服务器发送确认包 ACK(ack=k+1),此包发送完毕,客户端和服务器进入 ESTABLISHED(TCP连接成功)状态,完成三次握手。

    完成三次握手,客户端与服务器开始传送数据。

    一旦建立了 TCP 连接,浏览器就会向服务器发送 http 请求命令。浏览器发送其请求命令之后,还要以头信息的形式向服务器发送一些别的信息。此后,浏览器发送了一空白行来通知服务器,它已经结束了该头信息的发送。

  2. 四次挥手终止连接

    由于 TCP 连接是全双工的,因此每个方向都必须单独进行关闭。原则是当一方完成它的数据发送任务后,就能发送一个 FIN 来终止这个方向的连接。收到一个 FIN 只意味着这一方向上没有数据流动。一个 TCP 连接在收到一个 FIN 后仍能发送数据。首先进行关闭的一方将执行主动关闭,而另一方执行被动关闭。

    1. 第一次挥手:TCP 客户端发送一个 FIN,用来关闭客户端到服务器的数据传送。
    2. 第二次挥手:服务器收到这个 FIN,它发回一个 ACK,确认序号为收到的序号加 1 。和 SYN 一样,一个 FIN 将占用一个序号。
    3. 第三次挥手:服务器关闭客户端的连接,发送一个 FIN 给客户端。
    4. 第四次挥手:客户端发回 ACK 报文确认,并将确认序号设置为收到序号加 1

3. 服务器的永久重定向响应

服务器给浏览器响应一个 301 永久重定向响应,这样浏览器就会访问 http://www.facebook.com/ 而非 http://facebook.com/

为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢?这个问题有好多有意思的答案。

其中一个原因跟搜索引擎排名有关。你看,如果一个页面有两个地址,就像 http://www.igoro.com/http://igoro.com/ ,搜索引擎会认为它们是两个网站,结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道 301 永久重定向是什么意思,这样就会把访问带 www 的和不带 www 的地址归到同一个网站排名下。

还有一个原因是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时,它可能会在缓存里出现好几次。

4. 浏览器跟踪重定向地址

现在,浏览器知道了 http://www.facebook.com/ 才是要访问的正确地址,所以它会发送另一个获取请求。

5. 服务器“处理”请求

服务器接收到获取请求,然后处理并返回一个响应。

6. 页面渲染

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

DOM 树是由 html 文件中的标签排列组成。

渲染树是在 DOM 树中加入 csshtml 中的 style 样式而形成。渲染树只包含需要显示在页面中的 DOM 元素,像 <head> 元素或 display 属性值为 none 的元素都不在渲染树中。在浏览器还没接收到完整的 html 文件时,它就开始渲染页面了。

在遇到外部链入的脚本标签、样式标签、图片时,会再次发送 http 请求重复上述的步骤。在收到 css 文件后,会对已经渲染的页面重新渲染,加入它们应有的样式。图片文件加载完,立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排

三、结语

做前端不仅要掌握前端的知识,对一些前端相关的例如计算机网络、数据结构、计算机原理都要有一定的了解,因为网络世界连接在一起的,前端与这些知识都是有接触的,说不准什么时候就会用上。而且,学好这些知识,对前端优化也有很大的帮助。

--------------------- 本文来自 沐风的心 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/JimmyLuo17/article/details/62237249?utm_source=copy

HTTP完整请求过程的更多相关文章

  1. 一次完整的http的请求过程

    一个完整的http的完成请求过程: 输入网址-> 域名解析-> tcp的三次握手-> 建立tcp连接后发起http 请求-> 服务器响应http ,发送数据给浏览器->  ...

  2. 一次完整的http请求过程

    转载:https://blog.51cto.com/linux5588/1351007 当我们在浏览器的地址栏输入 www.linux178.com,然后回车,回车这一瞬间到看到页面到底发生了什么呢? ...

  3. 一次完整的 HTTP 请求过程

    一次完整的HTTP请求过程从TCP三次握手建立连接成功后开始,客户端按照指定的格式开始向服务端发送HTTP请求,服务端接收请求后,解析HTTP请求,处理完业务逻辑,最后返回一个HTTP的响应给客户端, ...

  4. 面试题之----一次完整的HTTP请求过程

    当我们在浏览器的地址栏输入 www.linux178.com ,然后回车,回车这一瞬间到看到页面到底发生了什么呢? 以下过程仅是个人理解: 域名解析 --> 发起TCP的3次握手 --> ...

  5. 一次完整的http请求过程以及网络I/O模型select、epoll

    a.一次完整的http请求过程 1.域名解析,得到域名对应的IP; 2.三次握手,客户端与服务器通过socket建立TCP/IP连接; 3.浏览器向服务器发送http请求,如:GET/index.ht ...

  6. 一个完整的HTTP请求过程详细

    整个流程1.域名解析 —> 2.与服务器建立连接 —> 3.发起HTTP请求 —>4. 服务器响应HTTP请求,浏览器得到html代码 —> 5.浏览器解析html代码,并请求 ...

  7. 在浏览器中输入URL后,执行的全部过程。会用到哪些协议?(一次完整的HTTP请求过程)

    在浏览器中输入URL后,执行的全部过程.会用到哪些协议?(一次完整的HTTP请求过程) 整个流程如下: 域名解析 为了将消息从你的PC上传到服务器上,需要用到IP协议.ARP协议和OSPF协议. 发起 ...

  8. ASP.NET 运行时详解 揭开请求过程神秘面纱

    对于ASP.NET开发,排在前五的话题离不开请求生命周期.像什么Cache.身份认证.Role管理.Routing映射,微软到底在请求过程中干了哪些隐秘的事,现在是时候揭晓了.抛开乌云见晴天,接下来就 ...

  9. Nginx处理请求过程

    1. worker进程工作机制  现在我们了解了当我们在操作nginx的时候,nginx内部做的一些事情,那么worker进程又是如何处理请求的呢?   我们前面有提到,worker进程之间是平等的, ...

随机推荐

  1. Java找那个io类-File获取功能

    package com.hxzy.IOSer;import java.io.*; /* * File 的获取功能 * */public class Demo04 { public static voi ...

  2. BZOJ4766: 文艺计算姬(Prufer序列)

    题面 传送门 题解 结,结论题? 答案就是\(n^{m-1}m^{n-1}\) 我们考虑它的\(Prufer\)序列,最后剩下的两个点肯定是一个在左边一个在右边,设左边\(n\)个点,右边\(m\)个 ...

  3. Q4m使用手册

    q4m是基于mysql存储引擎的轻量级消息队列,通过扩展SQL语法来操作消息队列,使用简单,容易上手,开发人员基本不用再进行学习和熟悉.Q4M支持多发送方,多接收方,接收方相互不影响,php项目中异步 ...

  4. Google 推出新搜索引擎以查找数据集

    简评:谷歌推出了一个用于寻找数据集的新搜索引擎,有点厉害! ​​​​该工具可以更轻松地访问 Web 上数千个数据存储库中的数百万个数据集,当前还处于测试版: 什么是 Dataset Search? 数 ...

  5. 使用TortoiseSVN客户端管理IntelliJ IDEA项目的方法

    使用TortoiseSVN客户端管理IntelliJ IDEA项目的方法 今天在打开一个使用SVN管理的项目时,IntelliJ IDEA提示: Can't use Subversion comman ...

  6. 嵌入式C语言自我修养 05:零长度数组

    5.1 什么是零长度数组 顾名思义,零长度数组就是长度为0的数组. ANSI C 标准规定:定义一个数组时,数组的长度必须是一个常数,即数组的长度在编译的时候是确定的.在ANSI C 中定义一个数组的 ...

  7. 解压命令tar zxvf中zxvf的意思

    x : 从 tar 包中把文件提取出来 z : 表示 tar 包是被 gzip 压缩过的,所以解压时需要用 gunzip 解压 v : 显示详细信息 f xxx.tar.gz : 指定被处理的文件是 ...

  8. maven 打包 war 包含 WEB-INF/lib 目录

    <plugins> <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactI ...

  9. CodeForces - 1025B Weakened Common Divisor

    http://codeforces.com/problemset/problem/1025/B 大意:n对数对(ai,bi),求任意一个数满足是所有数对中至少一个数的因子(大于1) 分析: 首先求所有 ...

  10. webService基本概念、元素及简单编码实现

    webService "网络服务"(Web Service)的本质,就是通过网络调用其他网站的资源. 网络服务是相对于本地服务来说的,本机完成本机需要完成的任务,叫"本地 ...