从输入URL到页面加载完成的过程

最新推荐文章于 2023-05-10 22:45:30 发布

原创最新推荐文章于 2023-05-10 22:45:30 发布 · 345 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #计算机网络

前端专栏收录该内容

12 篇文章

订阅专栏

本文详细阐述了从输入URL到页面加载完成的整个过程，包括DNS解析的递归查询和优化、TCP的三次握手建立连接、HTTP请求的构建与发送、服务器的响应以及浏览器如何解析和渲染页面。重点讨论了DNS缓存和负载均衡、HTTP与HTTPS的区别，以及HTTP请求报文的结构。同时，提到了浏览器在解析渲染页面时对JS和CSS的处理策略。

从输入URL到页面加载完成的过程：

DNS解析 -> TCP连接 -> 发送HTTP请求 -> 服务器处理请求并返回HTTP报文-> 解析、渲染页面 -> 连接结束

1. DNS解析

DNS解析的过程就是寻找哪台机器上有你需要资源的过程。当你在浏览器中输入一个地址时，例如www.baidu.com，其实不是百度网站真正意义上的地址。互联网上每一台计算机的唯一标识是它的IP地址，但是IP地址并不方便记忆。用户更喜欢用方便记忆的网址去寻找互联网上的其它计算机，也就是上面提到的百度的网址。所以互联网设计者需要在用户的方便性与可用性方面做一个权衡，这个权衡就是一个网址到IP地址的转换，这个过程就是DNS解析。它实际上充当了一个翻译的角色，实现了网址到IP地址的转换。

解析过程

DNS的解析是一个递归查询的过程：

首先在本地域名服务器中查询IP地址；

if(null): 本地域名服务器向根域名服务器发送查询请求；

if(null): 本地域名服务器向com顶级域名服务器发送查询请求；

以此类推，直到最终得到相应的IP地址并缓存到本地供下次查询使用或null;

DNS优化

在DNS解析过程中会有多次TCP或UDP请求，每次解析都会消耗一定时间，所以需要优化：

（1）DNS缓存

DNS有多级缓存，按照与浏览器的距离大小，有浏览器缓存、系统缓存、路由器缓存、IPS服务器缓存、根域名服务器缓存、顶级域名服务器缓存、主域名服务器缓存。

（2）DNS负载均衡

DNS每次返回的IP地址不一定相同。

若每次都相同则说明请求的资源都在同一个机器上，在性能和存储方面讲这是不现实的；实际上互联网世界背后有成百上千台服务器，大型的网站则更多。但是在用户看来，他只需要请求被处理，至于是那个机器处理的并不重要。所以DNS会根据每台机器的负载量、机器与用户位置的距离等找到合适的机器并返回其IP。这个过程就是DNS负载均衡，又叫做DNS重定向。（CDN就是利用了DNS重定向技术，DNS会返回一个跟用户最接近的点的IP给用户，CDN节点的服务器负责响应用户的请求，提供所需的内容。

2. TCP连接

三次握手

建立连接之前客户端和服务端的状态都为CLOSED；服务端创建socket后开始监听，变为LISTEN状态。

客户端请求建立连接，向服务端发送SYN报文后状态变为SYN_SENT;
服务端收到客户端的报文后向客户端发送ACK和SYN报文，状态变为SYN_RCVD；
客户端收到ACK、SYN，向服务端发送ACK后状态变为ESTABLISHED，服务端收到客户端的ACK后状态也变为ESTABLISHED，连接建立。

3. 发送HTTP请求

HTTP报文是包裹在TCP报文中发送的，服务器端收到TCP报文时会解包提取出HTTP报文。但是这个过程中存在一定的风险，HTTP报文是明文，如果中间被截取的话会存在一些信息泄露的风险。那么在进入TCP报文之前对HTTP做一次加密就可以解决这个问题了。HTTPS协议的本质就是HTTP + SSL(or TLS)。在HTTP报文进入TCP报文之前，先使用SSL对HTTP报文进行加密。相较于HTTP，HTTPS更安全但势必带来时间上的损耗。

http和https的网络层级结构：

http https

HTTP HTTP

TCP SSL or TLS

IP TCP

HTTP请求

发送HTTP请求的过程：构建HTTP请求报文并通过TCP协议发送到服务端指定端口（HTTP协议80/8080，HTTPS协议443）。

HTTP请求报文由三部分组成：请求行、请求头和请求体。

请求行：格式（Method Request-URL HTTP-Version CRLF）

如：GET index.html HTTP/1.1

常用的请求方法：GET, POST, PUT, DELETE, OPTIONS, HEAD。

请求头：请求报头允许客户端向服务端传递请求的附加信息和客户端自身的信息。

常见的请求报头：Accept，Accept-Charset， Accept-Encoding,，Accept-Language， Content-Type,，Authorization, Cookie，User-Agent等。

请求体：在使用POST、PUT等方法是，通常需要客户端向服务端发送数据，这些数据就存储在请求体中；在请求头中有一些与请求体相关的信息，如：请求的数据格式为JSON时，就需要在请求头中设置 Content-Type: application/json。

3. 服务端请求处理并返回HTTP报文

emmmmm...

HTTP响应报文由三部分组成：状态码、响应报头和响应报文。

状态码

状态码由三位数组成，共有五类：

1xx：指示信息–表示请求已接收，继续处理。
2xx：成功–表示请求已被成功接收、理解、接受。
3xx：重定向–要完成请求必须进行更进一步的操作。
4xx：客户端错误–请求有语法错误或请求无法实现。
5xx：服务端错误–服务器未能实现合法的请求。

响应报文

服务端返回给客户端的信息。

4. 浏览器解析、渲染页面

preview

浏览器首先解析HTML生成DOM树（DOM Tree）；
解析CSS文件生成CSS规则树（Style Rules）；
合并DOM树和CSS规则树生成渲染树（Render Tree）；
遍历渲染树开始布局（Layout）；
开始渲染（Paint）；

PS：在文档加载过程中遇到js文件时，HTML文档会被挂起，要等到文档中的js文件加载完并解析完才能继续，原因是加载的js有可能会修改DOM结构，这就意味着js文件执行完成之前，后续的资源的加载都是没有必要的。而CSS文件的家在不影响js文件的加载，但影响js文件的执行，因此，js代码执行前必须保证CSS文件已经加载完成。这也是在html文件中，一般把CSS文件在<head>中引入，而js文件在下方的<script>中引入的原因。