从输入 URL 到页面加载完成的过程中都发生了什么?

关于这道经典问题的答案,看了一些大佬的博客,顺便复习了一些计算机网络基础,整理一下做个笔记。

流程概述

1、浏览器接收URL
2、域名解析,即浏览器根据域名查询IP
3、浏览器与服务器建立连接
4、浏览器与服务器之间进行通信:服务器处理请求,浏览器接收处理数据
5、断开连接

通信传输流

以访问http://www.baidu.com为例:

一、浏览器接收URL,将其切分

  • URL

统一资源定位符,用来确定某一个文件的具体位置。
url包含的信息:协议、服务器地址:端口号、资源路径、查询字符串、片段标识符

  • 协议:主要指一些应用层协议,包括但不限于

http:超文本传输协议,主要用于Web浏览器和Web服务器之间的通信
https:超文本传输安全协定,加密的HTTP
ftp:文件传输协议,用于访问位于FTP服务器上的资源或传输大的文件
file:主要用于访问本地计算机中的文件

  • 服务器地址

可以是www.baidu.com这样的域名,也可以是192.168.1.1这类IPv4地址,或者IPv6地址

二、浏览器通过DNS解析域名查询IP地址

  • DNS(Domain Name System)服务:

应用层协议,提供域名到IP地址的解析服务,运行在UDP协议之上。

  • 域名:

方便人类记忆的服务器地址,如www.baidu.com,以此代替IP地址

  • IP地址:

IP 协议提供的一种统一地址格式,为互联网上的每一个网络和每一台主机分配的一个逻辑地址,纯数字。只有知道服务器 IP 地址才能建立连接,所以需要通过 DNS 把域名解析成一个 IP 地址。

DNS查询过程

  1. 查询浏览器缓存(一张域名与 IP 地址的对应表);

请求地址需要在浏览器缓存中存在且未过期,浏览器缓存机制可参考浅谈Web缓存
(不懂先放着...)

  1. 查询操作系统的 hosts 文件;

  2. 查询路由器DNS缓存

  3. 查询本地DNS服务器缓存,本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。查找成功则返回结果,失败则发起一个迭代 DNS 解析请求;

    4.1. 本地DNS服务器向根域名服务器(如 com、net、org等的顶级域名服务器)发起请求,根域名服务器返回 com 域的顶级域名服务器的地址;

    4.2. 本地DNS服务器向 com 域的顶级域名服务器发起请求,返回 baidu.com 域名服务器地址;

    4.3. 本地DNS服务器向baidu.com 域名服务器发起请求,得到 www.baidu.com的 IP 地址;

  4. 本地DNS服务器将得到的 IP 地址保存在缓存中并返回给主机,浏览器得到了域名对应的 IP 地址,可以继续访问。

补充说明
1、DNS查询分为两个大类:

  • 递归查询:查询者改变

执行递归查询的DNS服务器会替发起请求的用户客户端完成一系列的DNS查询,直到获取了最终结果后,返回给查询客户端。

  • 迭代查询:查询者不变

迭代查询过程中,各级DNS都把自己知道的信息反馈给客户端,所有的查询过程都由发起请求的客户端自己完成。

2、IP 地址与域名不是一一对应的关系,可以把多个提供相同服务的服务器 IP 设置为同一个域名,但在同一时刻一个域名只能解析出一个 IP地址;同时,一个 IP 地址可以绑定多个域名,数量不限;

三、浏览器与服务器通过三次握手(SYN/ACK)建立TCP 连接

三次握手
  • HTTP中TCP连接的建立需要经历以下三个过程
    1、客户端向服务器发送一个建立连接的请求;
    2、服务器接到请求后发送同意连接的信号;(客户端建立连接)
    3、客户端接到同意连接的信号后,再次向服务器发送了确认信号,“握手”结束。(服务器建立连接,第三次可以携带数据)

因为两次握手不可靠,三次握手可以防止失效的连接请求报文段被服务端接收,从而产生错误。

如果client发出的第一个连接请求报文段并没有丢失,而是在某个网络结点长时间的滞留了,以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后,就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段,同意建立连接。假设不采用“三次握手”,那么只要server发出确认,新的连接就建立了。由于现在client并没有发出建立连接的请求,因此不会理睬server的确认,也不会向server发送数据。但server却以为新的运输连接已经建立,并一直等待client发来数据。这时两次握手已经完成,两端就建立起一个无效的连接。但浏览器认为自己没发出请求,所以不会回应,这样就让服务器白白等待回应,浪费了服务器资源。而三次握手的机制下,浏览器知道自己并没有请求连接,会发送拒绝包给服务器,服务器收到回应后也会结束这次无效的连接。

补充说明

  • TCP协议:位于传输层,提供可靠的字节流服务,用三次握手策略确认数据最终能否送达对方。

四、浏览器与服务器通信

网页请求是一个单向请求的过程,即是一个主机向服务器请求数据,服务器返回相应的数据的过程。

1、浏览器发送请求

浏览器根据 URL 内容生成 HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等。数据经过应用层、传输层、网络层、物理层逐层封装,传输到下一个目的地。

其中,每一层的作用如下。
1、应用层:为应用进程提供服务,加应用层首部封装为协议数据单元。
2、传输层:实现端到端通信,加TCP首部封装为数据包,TCP控制了数据包的发送序列的产生,不断的调整发送序列,实现流控和数据完整。
3、网络层:转发分组并选择路由;加IP首部封装为IP分组。
4、数据链路层:相邻的节点间的数据传输;加首部[mac地址]和尾部封装为帧。
5、物理层:具体物理媒介中的数据传送,数据转换为比特流。

下一个目的地接受到数据后,从物理层得到数据然后经过逐层的解包 到 链路层 到 网络层,然后开始上述的处理,在经网络层 链路层 物理层将数据封装好继续传往下一个地址。

到达最终目的地,再经过5层结构,逐层剥离,最终将数据送到目的主机的目的端口。

2、服务器处理请求

  • server
    http server: 主要关心HTTP 协议层面的传输和访问控制,代理、负载均衡等功能 ,如:Apache /Nginx/IIS
    application server:主要运行业务逻辑,也会集成一些 HTTP Server 的功能,往往是运行在 HTTP Server 的背后,执行应用,将动态的内容转化为静态的内容之后,通过 HTTP Server 分发到客户端,如Tomcat/weblogic

  • 请求处理过程(MVC)
    对于每一个用户输入的请求,首先被控制器接收,控制器决定用哪个模型来进行处理,然后模型通过业务逻辑层处理用户的请求并返回数据,最后控制器确定用哪个视图模型,用相应的视图格式化模型返回数据。
    MVC模式与三层架构的区别
    浅析前端开发中的 MVC/MVP/MVVM 模式
    (不懂先放着...)

3、浏览器接收处理数据

3.1 检查 HTTP header 里的状态码,并做出不同的处理方式

3.2 根据首部判断响应是否可以在浏览器缓存,如果可以则存储起来。

3.3 解码:解析html代码文件,遇到js/css/image等静态资源时,就向服务器端去请求下载,解析成对应的树形数据结构DOM树、CSS规则树,Javascript脚本通过DOM API和CSSOM API来操作DOM树、CSS规则树。

3.4 根据HTML和CSS样式进行渲染绘制,执行JS
浏览器的渲染原理简介

五、断开连接

四次挥手
  • 解除连接需要四个过程
    1、主机向服务器发送一个断开连接的请求
    2、服务器接到请求后发送确认收到请求的信号
    3、服务器向主机发送断开通知
    4、主机接到断开通知后断开连接并反馈一个确认信号,服务器收到确认信号后断开连接;
  • 为什么需要“四次挥手”

第一次挥手是浏览器发完数据后,发送FIN请求断开连接。
第二次挥手是服务器发送ACK表示同意,但考虑到服务器可能还有数据要发送,所以服务器先发送确认信号,等所有数据发送完毕后再同意断开。
简而言之,一端断开连接需要两次挥手(请求和回应),两端断开连接就需要四次挥手了。

补充说明

  • 第四次握手后,主机发送确认信号后并没有立即断开连接,而是等待了 2 个报文传送周期,原因是:如果第四次握手的确认信息丢失,服务器将会重新发送第三次握手的断开连接的信号,而服务器发觉丢包与重新发送的断开连接到达主机的时间正好为 2 个报文传输周期。

参考资料:
简洁明了的回答
比较详细全面的回答
分别从浏览器OS和服务器角度出发
软硬件结合没看太懂
DNS域名解析
WEB服务器、应用程序服务器、HTTP服务器区别
《计算机网络》
《图解HTTP》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,658评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,482评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 160,213评论 0 350
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,395评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,487评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,523评论 1 293
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,525评论 3 414
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,300评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,753评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,048评论 2 330
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,223评论 1 343
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,905评论 5 338
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,541评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,168评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,417评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,094评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,088评论 2 352