阅读 39

前端学习笔记之在浏览器里面输入 url,会发生什么

相信很多同学在前端面试的时候,都会遇到这个问题,废话不多说,让我们一起看看究竟发生了什么

  1. DNS域名解析;
  2. 浏览器与服务器建立TCP连接;
  3. 浏览器向服务器发起HTTP请求;
  4. 服务器响应HTTP请求,并返回HTML内容;
  5. 浏览器对HTML内容进行解析,并请求资源;
  6. 浏览器对页面进行渲染;

以上便是浏览器输入url,所发生的事情,让我们一起看看每一步主要做了什么事情。

DNS域名解析

DNS会把一个域名地址翻译成一个IP地址,因为客户端与服务器建立 TCP 连接是需要通过 IP 来进行通信(客户端与服务器连接并不是靠域名进行的),而且网络中的每个终端之间要实现连接和通信,是通过一个唯一的 IP 地址进行实现的。

DNS解析过程是一个递归查询过程,会以(浏览器缓存->系统缓存->路由器缓存->互联网服务提供商DNS缓存->根域名服务器->顶级域名服务器->主域名服务器)这一顺序进行查询。如果当前的步骤没查到,就会自动跳转到下一步骤通过下一个 DNS 服务器继续进行查找。如果最终没找到,浏览器就会告诉我们页面打开失败。

DNS 解析完成后,浏览器会得到了服务端的 IP 地址,就会向服务端发起 HTTP 请求。因为大多数 HTTP 请求都是建立在 TCP 连接上,因此客户端和服务端会先建立起 TCP 连接。

TCP连接的建立

当客户端和服务端建立起 TCP 连接之后,HTTP 服务器会监听客户端发起的请求,这个时候客户端就会发起 HTTP 请求。TCP协议通过“三次握手”进行连接,通过“四次挥手”进行连接关闭。

HTTP请求

HTTP 请求是由客户端发起,然后服务器收到后会进行回复,回复的内容主要包括状态码、 响应报头、响应报文等。目前大多数 HTTP 请求都是基于 TCP 协议。TCP 协议的目的是提供可靠的数据传输,乱序重建和丢包重试是确保可靠传输的两个主要途径。

浏览器解析渲染页面

浏览器是一个边解析边渲染的过程。 首先浏览器会对HTML文件解析并构建DOM树,接着对CSS文件进行解析并构建渲染树,渲染树构建完成后,浏览器就会对渲染树进行布局,最后绘制在屏幕上。我们可以看出这一系列的过程是一个边解析边渲染的过程。

JS的解析是由浏览器中的JS解析引擎完成的,JS是单线程运行,会有同步任务和异步任务,会有一个执行机制,叫做事件循环(Event loop),这里就不进行展开细说了。

最后对于请求外部资源,文档在加载过程中遇到JS文件,HTML文档就会挂起渲染过程,等到文档中JS文件加载完毕和解析执行完毕,才能继续HTML的渲染过程。为什么会是这样的执行过程,那是因为JS有可能会对DOM结构进行修改,这将会导致JS执行完成前,后续所有下载的资源都是没有必要的,这就是JS阻塞后续资源下载的根本原因。

这次的学习笔记到此结束,如有不足之处,请予以指正

文章分类
前端
文章标签