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


前端不仅要让用户对网页有完美的体验,让用户尽快体验到完美的网页也是很重要的,这就要前端攻城狮掌握一些计算机原理相关的知识了,这里就来聊一聊从用户输入URL到页面加载完成的过程中都发生了什么事情?

用户输入url之后大致发生了以下几件事:

  1. 浏览器查找域名的IP地址:这一步包括DNS具体的查找过程,包括:浏览器缓存->系统缓存->路由器缓存…
  2. 浏览器向web服务器发送一个HTTP请求;
  3. 服务器的永久重定向响应;
  4. 浏览器跟踪重定向地址;
  5. 服务器处理请求;
  6. 服务器返回一个HTTP响应;
  7. 浏览器显示HTML;
  8. 浏览器发送请求获取嵌入在HTML中的资源(如图片、音频、视频、CSS、JS等等);
  9. 浏览器发送异步请求;

下面我们就详细地了解一下这些过程。

DNS查找IP地址

DNS是域名系统(Domain Name System)的缩写,是因特网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住能够被机器直接读取的IP数串。

DNS查找过程

  1. 浏览器缓存 – 浏览器会缓存DNS记录一段时间,但是操作系统并没有告诉浏览器储存DNS记录的时间,这样不同浏览器会储存个自固定的一个时间(2分钟到30分钟不等)。
  2. 系统缓存 – 如果在浏览器缓存里没有找到需要的记录,浏览器会做一个系统调用(windows里是gethostbyname),这样便可获得系统缓存中的记录。
  3. 路由器缓存 – 接着,前面的查询请求发向路由器,它一般会有自己的DNS缓存。
  4. ISP DNS缓存 – 接下来要check的就是ISP缓存DNS的服务器。在这一般都能找到相应的缓存记录。
  5. 递归搜索 – 你的ISP的DNS服务器从跟域名服务器开始进行递归搜索,从.com顶级域名服务器到example的域名服务器。一般DNS服务器的缓存中会有.com域名服务器中的域名,所以到顶级服务器的匹配过程不是那么必要了。

DNS进行域名解析的过程

  1. 客户端发出DNS请求翻译IP地址或主机名;
  2. DNS服务器在收到客户机的请求后检查DNS服务器的缓存,若查到请求的地址或名字,即向客户机发出应答信息;
  3. 若没有查到,则在数据库中查找,若查到请求的地址或名字,即向客户机发出应答信息;
  4. 若没有查到,则将请求发给根域DNS服务器,并依序从根域查找顶级域,由顶级查找二级域,二级域查找三级,直至找到要解析的地址或名字,即向客户机所在网络的DNS服务器发出应答信息,DNS服务器收到应答后现在缓存中存储,然后,将解析结果发给客户机。
  5. 若没有找到,则返回错误信息。

HTTP请求

三次握手建立TCP连接

在HTTP工作开始之前,Web浏览器首先要通过网络与Web服务器建立连接,该连接是通过TCP来完成的,该协议与IP协议共同构建Internet,即著名的TCP/IP协议族,因此Internet又被称作是TCP/IP网络。HTTP是比TCP更高层次的应用层协议,根据规则,只有低层协议建立之后才能,才能进行更层协议的连接,因此,首先要建立TCP连接,一般TCP连接的端口号是80。在TCP/IP协议中,TCP协议提供可靠的连接服务,采用三次握手建立一个连接。

  • 第一次握手:
    建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;
    SYN:同步序列编号(Synchronize Sequence Numbers)。
  • 第二次握手:
    服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;
  • 第三次握手:
    客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。

完成三次握手,客户端与服务器开始传送数据。
一旦建立了TCP连接,Web浏览器就会向Web服务器发送请求命令。
浏览器发送其请求命令之后,还要以头信息的形式向Web服务器发送一些别的信息,之后浏览器发送了一空白行来通知服务器,它已经结束了该头信息的发送。

四次挥手终止连接

由于TCP连接是全双工的,因此每个方向都必须单独进行关闭。这原则是当一方完成它的数据发送任务后就能发送一个FIN来终止这个方向的连接。收到一个 FIN只意味着这一方向上没有数据流动,一个TCP连接在收到一个FIN后仍能发送数据。首先进行关闭的一方将执行主动关闭,而另一方执行被动关闭。

  1. TCP客户端发送一个FIN,用来关闭客户到服务器的数据传送。
  2. 服务器收到这个FIN,它发回一个ACK,确认序号为收到的序号加1。和SYN一样,一个FIN将占用一个序号。
  3. 服务器关闭客户端的连接,发送一个FIN给客户端。
  4. 客户端发回ACK报文确认,并将确认序号设置为收到序号加1。

服务器的永久重定向响应

服务器给浏览器响应一个301永久重定向响应,这样浏览器就会访问“HTTP://www.facebook.com/” 而非“HTTP://facebook.com/”。
为什么服务器一定要重定向而不是直接发会用户想看的网页内容呢?这个问题有好多有意思的答案。
其中一个原因跟搜索引擎排名有关。你看,如果一个页面有两个地址,就像HTTP://www.igoro.com/ 和HTTP://igoro.com/,搜索引擎会认为它们是两个网站,结果造成每一个的搜索链接都减少从而降低排名。而搜索引擎知道301永久重定向是 什么意思,这样就会把访问带www的和不带www的地址归到同一个网站排名下。
还有一个是用不同的地址会造成缓存友好性变差。当一个页面有好几个名字时,它可能会在缓存里出现好几次。

浏览器跟踪重定向地址

现在,浏览器知道了“HTTP://www.facebook.com/”才是要访问的正确地址,所以它会发送另一个获取请求。

服务器”处理”请求

服务器接收到获取请求,然后处理并返回一个响应。

页面渲染

现代浏览器渲染页面的过程是这样的:解析HTML以构建DOM树 –> 构建渲染树 –> 布局渲染树 –> 绘制渲染树。

DOM树是由HTML文件中的标签排列组成,渲染树是在DOM树中加入CSSHTML中的style样式而形成。渲染树只包含需要显示在页面中的DOM元素,像<head>元素或display属性值为none的元素都不在渲染树中。
在浏览器还没接收到完整的HTML文件时,它就开始渲染页面了,在遇到外部链入的脚本标签或样式标签或图片时,会再次发送HTTP请求重复上述的步骤。在收到CSS文件后会对已经渲染的页面重新渲染,加入它们应有的样式,图片文件加载完立刻显示在相应位置。在这一过程中可能会触发页面的重绘或重排。

结语

做前端不仅要掌握前端的知识,对一些前端相关的例如计算机网络、数据结构、计算机原理都要有一定的了解,因为网络世界连接在一起的,前端与这些知识都是有接触的,说不准什么时候就会用上。而且,学好这些知识,对前端优化也有很大的帮助。

文章目錄
  1. 1. DNS查找IP地址
    1. 1.1. DNS查找过程
    2. 1.2. DNS进行域名解析的过程
  2. 2. HTTP请求
    1. 2.1. 三次握手建立TCP连接
    2. 2.2. 四次挥手终止连接
  3. 3. 服务器的永久重定向响应
  4. 4. 浏览器跟踪重定向地址
  5. 5. 服务器”处理”请求
  6. 6. 页面渲染
  7. 7. 结语
|