从输入一个URL到页面渲染的流程简介

首先说明以下是我参考网上答案和自己的思考,给出自己的想法,如果有问题,欢迎大家吐槽
从用户在浏览器中输入一个URL,到整个页面渲染,这个过程中究竟发生了什么呢?今天先简单写下整个过程,后面再一点点完善。

一、获取IP地址

为什么要获取IP地址?

IP地址对应一台真实的物理机器,而且IP地址就像人的身份证是唯一的,用户请求服务器,只需要输入为该服务器分配的唯一的IP地址即可。但由于IP地址不便于记忆,因而使用较为语义化的域名来替代IP地址,而且一个域名可能对应了对个IP地址,比如用户输入www.baidu.com,该域名下对应了多个IP,域名解析服务器会根据一定的规则分配给用户其中一个IP地址。
  1. 首先会在浏览器的缓存中查找,是否缓存了URL,如果有,就直接向该URL对应的服务器发送请求;如果没有则进行下一步;
  2. 在本地的hosts文件中是否保存了该URL和其对应的IP地址,如果保存了,就直接向该URL对应的服务器发送请求;如果没有则进行下一步;
  3. 向本地DNS服务器(一般由本地网络接入服务器提供商提供,比如移动)发送DNS请求,本地DNS服务器会首先查询它的缓存记录,如果有就将该域名对应的IP地址返回给用户,如果没有则进行下一步;
  4. 首先向根域名服务器发送DNS查询请求,根域名服务器返回给可能保存了该域名的一级域名服务器地址;本地主机再根据返回的地址,向一级域名服务器发送DNS查询请求;...一直迭代,直到找到对应的域名存放的服务器,向其发送DNS查询请求,该域名服务器返回该域名对应的IP地址;

二、TCP/IP连接

三次握手:

为什么要进行三次握手?如果是两次握手,如下面的对话只有前两句,有可能出现的问题是:客户端之前发送了一个连接请求报文,由于网络原因滞留在网络中,后来到达服务器端,服务器接收到该请求,就会建立连接,等待客户端传送数据。而此时客户端压根就不知道发生了什么,白白造成了服务器资源浪费。

从输入一个URL到页面渲染的流程简介
注:图片来源于https://baijiahao.baidu.com/s...

  1. 客户端:我要请求数据可以吗?
  2. 服务器:可以的
  3. 客户端:好的

三、浏览器向web服务器发送http请求

客户机与服务器建立连接后就可以通信了,这里就暂时先不详细展开说http请求了。讲下客户端请求静态资源和动态资源。

  1. 静态资源:如果客户端请求的是静态资源,则web服务器根据URL地址到服务器的对应路径下查找文件,然后给客户端返回一个HTTP响应,包括状态行、响应头和响应正文。
  2. 动态资源:如果客户端请求的是动态资源,则web服务器会调用CGI/VM执行程序完成相应的操作,如查询数据库,然后返回查询结果数据集,并将运行的结果--HTML文件返回给web服务器。Web服务器再将HTML文件返回给用户。

四、浏览器渲染

浏览器拿到HTML文件后,根据渲染规则进行渲染:

  1. 解析HTML,构建DOM树
  2. 解析CSS,生成CSS规则树
  3. 合并DOM树和CSS规则树,生成render树
  4. 布局render树
  5. 绘制render数、树,即绘制页面像素信息
  6. GPU将各层合成,结果呈现在浏览器窗口中。

五、四次挥手

客户端没有数据发送时就需要断开连接,以释放服务器资源。

从输入一个URL到页面渲染的流程简介
注:图片来源于https://baijiahao.baidu.com/s...

  1. 客户端:我没有数据要发送了,打算断开连接
  2. 服务器:你的请求我收到了,我这还有数据没有发送完成,你等下
  3. 服务器:我的数据发送完毕,可以断开连接了
  4. 客户端:ok,你断开连接吧(客户端独白:我将在2倍的最大报文段生存时间后关闭连接。如果我再次收到服务器的消息,我就知道服务器没有收到我的这句话,我就再发送一遍)。

最终服务器收到该客户端发送的消息断开连接,客户端也关闭连接。

上一篇:百度地图获取定位,实现拖动marker定位,返回具体的位置名


下一篇:Encog