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

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

作者: mingzihhh | 来源:发表于2018-11-21 19:27 被阅读0次

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

    流程概述

    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》

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/ppvqqqtx.html