浏览器输入url访问网站的全过程

浏览器输入url访问网站的全过程

• 当输入url时，浏览器作为客户端首先会请求DNS服务器，通过DNS获取相应的域名和IP（应用层）
• 通过IP地址找到对应的服务器，然后建立TCP连接
• 浏览器向服务端发送http请求包（应用层 -> 传输层 -> 网络层 -> 数据链路层））
• 服务端接受到http请求包后开始处理请求包（数据链路层 -> 网络层 -> 传输层 -> 应用层）
• 在服务器收到请求之后，服务器调用自身服务，返回响应包
• 浏览器接收到响应包后开始进行页面的渲染

网络通信

互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。

分层由高到低分别为：应用层、传输层、网络层、数据链路层。发送端从应用层往下走，接收端从数据链路层网上走。如图所示

在浏览器中输入url

在浏览器中输入的是一个网址，是不能直接用来进行连接的，因而就要使用DNS地址解析将输入的URL网址转换为IP地址。

浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有则在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址

建立TCP连接

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

第一次握手：建立连接时,client发送syn包到server

第二次握手：server收到client的syn包,使用ack回复client的syn包，同时server也会发送syn包.所以server回复ack+syn

第三次握手：client收到server的syn+ack包,使用ack确认服务器的syn包

至此，完成三次握手,client与server完成TCP连接的建立

浏览器（应用层客户端）发送http请求

http请求信息由3部分组成：
请求方法URI协议/版本

• GET/POST/PUT/DELETE/OPTIONS
  请求头(Request Header)
• User-Agent
• content-type
• content-length
• content-encoding
• cache-contro

请求正文

• queryString
• form
• application/json

TCP传输报文（传输层）

位于传输层的TCP协议为传输报文提供可靠的字节流服务。
它为了方便传输，将大块的数据分割成以报文段为单位的数据包进行管理，并为它们编号，方便服务器接收时能准确地还原报文信息(MTU)。

TCP协议确认保证传输的安全可靠的方式：

• ack确认
• 超时重传
• 连接管理

服务器返回相应的文件

client收到http的response，使用http协议解析
Http Response:

• Response Header
• Content_Type: html/css/js/img/mp3/mp4/m3u8
• Response Body

HTML构建DOM树 –> 解析css构建渲染树 -> 加载js -> client和server通过ajax交互

欢迎关注我的个人技术博客，javascript艺术