(转)在浏览器地址栏键入url之后发生了什么

By | 2017年3月29日

转自:前端学习之路

本篇均以输入’www.baidu.com’为例

DNS解析

网络通讯大多数都是基于TCP/IP的,而TCP/IP又是基于IP的。我们输入的域名并不能被计算机网络所识别,因此需要将域名转为IP,而这个过程叫就做DNS解析。

基本概念

DNS(Domain Name System)

计算机域名系统,它由域名解析器和域名服务器组成。

域名服务器:指保存有该网络中所有主机的域名和对应IP地址,并具有将域名转换为IP地址功能的服务器。
其中域名必须对应一个,且只能对应一个IP地址;而IP地址不一定有域名而且可以对应多个域名。

DNS也是应用层协议,但他是为了其他应用层协议工作的,用于将用户提供的域名解析为IP地址。

DNS主要基于UDP传输层协议,

根域

根域就是所谓的.
其实我们的网址www.baidu.com在配置当中应该是www.baidu.com.(最后多了一个.)。一般我们在浏览器里输入的时候都会省略这个.

域的划分

根域下来就叫顶级域或一级域。有两种划分方式,一种是互联网刚兴起时划分的com.net.等;一种是按国家划分的如cn.jp.等,每个域都有域名服务器

例如 .com 就是一个顶级域名;而 www.baidu.com 不是一个域名,它是baidu.com这个域名里的一个叫做www的主机。同理,在a.www.baidu.com里,主机名是a

解析过程

具体过程如下:

  1. 查询本地域名服务器(10.1.1.1),查找本地缓存中是否有www.baidu.com的IP地址。如果在缓存中找到,则跳到#6,没有找到则进行下一步;
  2. 在根域名服务器(.)中查询 -> 返回COM顶级域名服务器的IP
  3. 在COM顶级域名服务器(.com)中查询 -> 返回baidu.com二级域名服务器(.baidu.com)的IP
  4. 在baidu.com二级域名服务器(.baidu.com)中查询 -> 返回主机名为www的服务器的IP
  5. 将域名及对应IP存入缓存中
  6. 获得域名对应IP地址

TCP 连接

获得目标服务器的IP地址端口号之后,客户端和服务器之间将建立一条TCP/IP连接。
TCP是面向连接的、无差错的、按序传输的。

三次握手

在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。

第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SEND状态,等待服务器确认;

第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器 进入SYN_RECV状态;

第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入 ESTABLISHED状态,完成三次握手。 完成三次握手,客户端与服务器开始传送数据.

TCP/IP三次握手图解

四次挥手

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

  1. 客户端A发送一个FIN,用来关闭客户A到服务器B的数据传送(报文段4)。
  2. 服务器B收到这个FIN,它发回一个ACK,确认序号为收到的序号加1(报文段5)。和SYN一样,一个FIN将占用一个序号。
  3. 服务器B关闭与客户端A的连接,发送一个FIN给客户端A(报文段6)。
  4. 客户端A发回ACK报文确认,并将确认序号设置为收到序号加1(报文段7)。

TCP/IP四次挥手图解

HTTP协议

TCP/IP连接建立之后,浏览器会向服务器发送一条HTTP请求报文 -> 服务器向浏览器返回一条相应报文 -> 关闭连接

报文

报文可分为两类: 请求报文相应报文,它们都由三部分组成

  • 起始行(对报文进行描述)
  • 首部块(包含属性)
  • 主体部分(包含数据-可选)

起始行

  • 请求报文起始行
  • 相应报文起始行

请求报文起始行:
相应报文起始行:

首部块

  • 通用首部
  • 请求首部
  • 响应首部
  • 实体首部
  • 扩展首部

主体部分

是HTTP报文的负荷,也就是HTTP要传输的内容

连接方式

  • 并行连接
  • 持久连接

通常使用 少量并行+持久 的连接方式

HTTP/1.0 通过客户端设置请求首部 Connection: keep-alive

HTTP/1.1 默认持久连接,可以设置 Connection: close 关闭(默认持久连接并不代表连接会永远持续下去)

页面渲染

  • HTML代码转化成DOM
  • CSS代码转化成CSSOM(CSS Object Model)
  • 结合DOM和CSSOM,生成一棵渲染树(包含每个节点的视觉信息)
  • 生成布局(layout),即将所有渲染树的所有节点进行平面合成
  • 将布局绘制(paint)在屏幕上

重排

发生条件:

  • 页面初始化
  • 插入/删除节点
  • 改变元素尺寸(width/height/margin/padding/border 等等)
  • 浏览器窗口变化
  • 元素位置改变

重绘

发生条件:

  • 重排后必有重绘
  • color
  • visibility