前提

当我们在浏览器地址栏中输入指定的 URL 之后，浏览器会从服务器端获取文件资源等信息，从而显示出网页。把一个 URL 变成一个屏幕上显示的网页，大体上经过了以下两个步骤：

1、根据址栏中的 URL，浏览器从服务器端请求资源；
2、浏览器把请求回来的资源进行解析、渲染、绘制，最终呈现给用户。

事实上，上面提到的两点涉及到浏览器的两大知识点，第一个是 TCP/IP 协议，另一个是渲染机制。要彻底学习这两块内容，可以说需要花费很大的精力和时间，而作为一个前端工作者，我们只需要了解它的大致过程，利用这些辅助工作即可。

TCP/IP 协议

协议，换言之，标准，在网络的世界里，只有建立一种大家都必须遵守的标准，才能实现电脑之间的资源共享。从电缆的规格到 IP 地址的选定方法、寻找异地用户的方法、双方建立通信的顺序，以及 Web 页面显示需要处理的步骤，等等。我们把这一系列的标准称为 TCP/IP 协议。而我们接下来将要重点学习的 HTTP 协议，属于该协议集合中的一个子集。

TCP/IP 的分层管理

TCP/IP 协议重要的一个特点就是分层。TCP/IP协议按层次分为4层：应用层、传输层、网络层和网络接口( 链路层 )。

应用层

应用程序通过该层使用网络服务。常见的协议有：HTTP 协议( 超文本传输协议，默认端口为80 ，主要用于网站访问 )，FTP 协议( 文件传输协议，用于上传和下载文件 )和 DNS 协议( 域名解析协议 )。

传输层

负责处于网络连接中的两台计算机之间的数据传输及纠错处理。常见的协议有：TCP 协议( 传输控制协议，基于连接，用于传输对可靠性要求高、大量的数据 )和 UDP 协议( 用户数据报协议，不基于连接，用于传输对可靠性要求不高、少量的数据 )。

网络层

负责路由及地址的选择，并把数据包传送给对方计算机。常见的协议有：IP 协议( 互联网协议，给每个连接在互联网上的设备分配的一个虚拟地址 )和 ARP 协议( 地址解析协议，根据 IP 地址获取 MAC 地址(1) )。

(1) MAC 地址，也叫硬件地址，是网络设备的唯一标识。

网络接口( 链路层 )

连接网络的硬件上的范畴都属于该层。例如操作系统、网卡，及光纤等物理可见部分。

*TCP/IP 的分层管理让各层之间相对独立，有利于定位网络故障，而且单个层次的技术革新不会对整个网络引起太大影响。

TCP/IP 的通信流程

那么，当我们在浏览器端输入 URL 之后，TCP/IP 协议是如何进行网络通信的呢？下面我们举例说明：

1、首先，浏览器将数据( URL 以及一些请求数据 )交给应用层( HTTP协议与 DNS 协议 )，应用层通过 DNS 服务查找 IP 地址( 若有缓存，会跳过这步 )，并附加必要的信息形成请求报文( 主要包括请求行、请求头和请求体 )，向下传给传输层。

2、接着，传输层( TCP协议 )接收到请求报文，与服务器建立连接，并将报文分割成报文段( 为了更加快速地传输到对方计算机 )，打上序号传给网络层。

3、在网络层( IP 协议与 ARP 协议 )，通过 IP 地址解析出设备的 MAC 地址，这样一来，发往服务器的数据以及地址就已经准备齐全，向下传给网络接口。

4、网络接口通过网络硬件传给服务器，到此为止，数据就离开了发送请求的计算机。

5、接收端的服务器在网络接口层接收到数据，按序往上层发送，一直到应用层。当数据传输到应用层，才算真正接收到由浏览器发送过来的查看某网页的请求。

示意图：

图片描述

如有错误，欢迎指正，本人不胜感激。