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

Posted xcfight

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了一个网页从输入URL到页面加载完成的过程中都发生了什么事情?相关的知识,希望对你有一定的参考价值。

这是一个前端的经典面试题,很多大公司面试时都会被问及,涉及的面也是非常多。

一般会经历以下几个过程:

1、首先,在浏览器地址栏中输入url

2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。

3、在发送http请求前,需要域名解析(DNS解析),解析获取相应的IP地址。

4、浏览器向服务器发起tcp连接(TCP是一种面向有连接的传输层协议),与浏览器建立tcp三次握手。

  三次握手过程:

  • 第一次握手,请求建立连接,发送端发送连接请求报文,将SYN置为1,产生随机的顺序号seq=x

  • 第二次握手,接收端收到发送端发过来的报文,由SYN为1可知发送端现在要建立联机。然后接收端会向发送端发送一个SYN为1和ACK为x+1的报文,同时设置了自己随机产生的一个随机的顺序号seq=y

  • 第三次握手,发送端收到了发送过来的报文,需要检查一下返回的ACK是否是正确的(x+1);若正确的话,发送端再次发送确认包,ACK为y+1,设置顺序号seq=x+1。

5、握手成功后,浏览器向服务器发送http请求(也就是超文本传输协议),请求数据包。(完整的HTTP请求消息包含了:一个请求行、请求消息报头以及请求正文)

6、服务器处理收到的请求,将数据返回至浏览器

7、浏览器收到HTTP响应

  响应的状态类别:

  • 1xx: 提供信息,表示请求以及被成功接收,需要继续处理
  • 2xx: 肯定应答,表示请求已成功被服务器接收、理解并接受了
  • 3xx: 重定向,代表了客户端需要进一步的操作才能完成请求,通常后续的请求地址会在本次响应Location域中指明
  • 4xx: 客户端请求内存出现错误,妨碍了服务器处理。除非响应是一个HEAD请求,否则服务器返回一个解释当前错误状况以及是临时的还是永久的的实体正文内容。
  • 5xx: 服务器错误,代表服务器在处理过程中发生了错误或者异常,也有可能是服务器无法完成对请求处理。除非这是一个HEAD请求,否则服务端应该响应一个包含解释当前错误状态以及是临时的还是永久的实体正文内容。

8、读取页面内容,浏览器渲染,解析html源码

9、生成Dom树、解析css样式、js交互

10、客户端和服务器交互

11、ajax查询

以上是关于一个网页从输入URL到页面加载完成的过程中都发生了什么事情?的主要内容,如果未能解决你的问题,请参考以下文章

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

从输入 URL 到页面加载完成的过程中都发生了啥事情

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

一个页面从输入URL 到页面加载显示完成,这个过程中都发生了什么?

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

性能分析从开始输入 URL 到页面加载完成的过程中都发生了什么事情?