URL
URL代表"Uniform Resource Locator"(统一资源定位符),是一个用于在互联网上定位资源的地址。URL是用来标识互联网上各种资源(如网页、图像、视频、文本文件等)的一种标准格式。它不仅指示了资源的位置,还可以包括一些描述如何获取该资源的信息。
一个标准的URL通常由以下几个部分组成:
-
协议(Protocol):URL的开头部分通常指定了用于访问资源的协议,如HTTP、HTTPS、FTP等。
-
主机名(Host):主机名指示了资源所在的服务器的域名或IP地址。例如,www.example.com或192.168.1.1。
-
端口号(Port):端口号是一个可选的部分,用于指定访问服务器上特定服务的端口。如果未指定,默认使用协议的默认端口,如80(HTTP)或443(HTTPS)。
-
路径(Path):路径表示服务器上资源的具体位置。它以斜杠(/)开头,后面可能跟着文件路径或目录结构。
-
查询参数(Query):查询参数是一些附加信息,以问号(?)开头,用于传递给服务器的参数。参数以键值对的形式存在,例如?key=value。
-
片段标识(Fragment):片段标识用于指示资源中的特定部分。它以井号(#)开头,通常在网页中用于定位页面中的锚点。
URL的一个示例:https://www.example.com:8080/path/page.html?key=value#section
浏览器处理 URL 的过程
当你在浏览器中输入一个URL(Uniform Resource Locator),例如 “https://www.example.com”,浏览器会执行一系列步骤来获取和显示网页内容。以下是详细的过程:
-
URL解析:
浏览器首先会解析输入的URL。它会分解URL,识别出协议(例如HTTP、HTTPS)、主机名(例如www.example.com)、端口号(如果没有指定,默认是协议的默认端口)、路径(例如/、/page等)以及查询参数(例如?key=value)。 -
DNS解析:
浏览器需要将主机名转换为IP地址,以便能够发送请求到正确的服务器。这个过程叫做DNS解析。浏览器会依次查询浏览器自身 DNS ,操作系统 DNS ,本地 hosts 文件和向域名服务器发送请求。以获取目标主机的IP地址。
其中,向域名服务器发送请求,向本地 DNS 服务器发送请求,依次为向根域名服务器、顶级域名服务器和权威域名服务器发送请求。举个例子:.
为根域名,com.
为顶级域名,baidu.com.
为权威域名。 -
建立TCP连接:
浏览器使用HTTP或HTTPS协议与服务器通信。对于HTTPS,还需要建立安全的SSL/TLS连接。浏览器会与服务器的IP地址建立TCP连接,这个过程包括三次握手(见前面的解释)。 -
发起HTTP请求:
浏览器向服务器发送HTTP请求,包括请求方法(GET、POST等)、路径、协议版本、请求头(User-Agent、Accept等)以及可能的请求体(POST请求中的数据)。做项目时可能遇到的问题:本身是一个POST请求,结果却出现两个请求,一个原本的POST请求,一个options请求。可能原因为:1.跨域问题 2.自定义请求头也会触发预检请求。
浏览器在请求服务器获取资源时,会检查本地缓存以查看是否已经有副本存储在本地。
如果有,浏览器可能会发送一个条件请求(如条件GET请求),询问服务器资源是否已经被修改。
如果资源未被修改,服务器可以返回一个特定的状态码(例如304 Not Modified),浏览器可以直接从缓存中加载资源,而不必下载新副本。缓存分为强缓存和协商缓存。
-
服务器处理请求:
服务器接收到浏览器发送的请求后,会根据请求的内容进行处理。这可能涉及到从服务器的文件系统获取文件、与数据库交互获取数据等。 -
服务器返回HTTP响应:
服务器生成HTTP响应,包括状态码(例如200 OK、404 Not Found)、响应头(Content-Type、Content-Length等)以及响应体(网页的HTML内容等)。 -
浏览器接收响应:
浏览器接收到服务器的HTTP响应后,会对响应进行解析。如果响应中包含HTML内容,浏览器会解析HTML并开始构建DOM树,同时下载其中的CSS、JavaScript等资源。 -
渲染页面:
浏览器使用解析后的信息构建DOM树、CSS样式转化为浏览器可以理解的 styleSheets,计算出 DOM 节点的样式,然后将页面呈现在屏幕上。JavaScript代码会被V8引擎解析。全部编译为机器码之后会交给 CPU 处理。浏览器绘制的时候经常会发生回流与重绘。
-
关闭连接:
当浏览器完成渲染并处理完所有资源时,它会关闭与服务器的连接,释放相关资源,但可能会保持与服务器的长连接以获取进一步的资源(例如Ajax请求)。
DNS 域名系统解析
当你在浏览器中输入一个URL比如www.example.com时,我们需要先找到它对应的IP地址:这个过程被称为DNS解析,即域名系统解析。
缓存查找过程:
- 浏览器缓存:首先,浏览器会检查它的缓存中是否有这个域名的记录,因为之前访问过的网址的解析结果可能会被存储在浏览器缓存中。
- 操作系统缓存:如果浏览器缓存中没有找到,浏览器会询问操作系统,因为操作系统也可能有自己的DNS缓存。
- 路由器缓存:如果操作系统中也没有找到,请求会发送到本地网络的路由器,它同样可能有自己的DNS缓存。
- ISP(Internet service provider)缓存:如果以上都没有缓存记录,请求最终会发送到你的互联网服务提供商(ISP),它们通常会有更大范围的DNS缓存。
DNS递归解析,如果所有本地缓存查找都失败,DNS查询就变成了一个递归查询过程,涉及到多个DNS服务器:
- 根域名服务器:首先,你的DNS查询会被发送到根域名服务器。根服务器是最高级别的DNS服务器,负责重定向到负责管理顶级域名(如.com、.net等)的顶级域名服务器。
- 顶级域名服务器(TLD服务器):根服务器会告诉你的ISP的DNS服务器去查询哪个顶级域名服务器来找到.com域的信息。这个服务器掌握所有.com域名及其相应服务器的信息。
- 权威域名服务器:一旦你的DNS查询到达了正确的顶级域名服务器,它会进一步定向到负责example.com的权威服务器。权威服务器有该域名对应的具体IP地址。
IP地址的获取
- 最终,权威域名服务器会提供www.example.com域名对应的 IP 地址(如图中的93.184.216.34),这个信息会被发送回用户的电脑。
缓存结果
- 一旦IP地址被找到,它通常会被存储在浏览器、操作系统、路由器或 ISP 的DNS缓存中,以便未来的查询可以更快得到解析。
建立 TCP 连接(三次握手)
TCP(Transmission Control Protocol,传输控制协议),TCP是一种面向连接的协议,用于在网络中的两个端点之间建立可靠的会话。
以下是TCP连接建立过程,通常称为三次握手(TCP3-way handshake):
SYN ( Synchronize ):
- 客户端发送一个SYN包到服务器以初始化一个连接。
- 客户端设置一个随机的序列号,告诉服务器它准备开始发送数据。
- 序列号不仅仅是在握手期间使用的,后续传输数据也会用到,用来保证数据的完整性和顺序。
SYN-ACK (Synchronize-Acknowledgment ):
- 服务器接收到客户端的SYN包后,会发送一个SYN-ACK包作为响应。
- 服务器同样设置一个随机的序列号,并将客户端的序列号加一,发送回给客户端,确认已经收到了客户端的同步请求(+1表示服务器确认收到)。
ACK (Acknowledgment ):
- 客户端收到服务器的SYN-ACK后,发送一个ACK包作为回应。:
- 这个ACK包将服务器的序列号加一,并可能包含客户端准备发送的数据的开始部分(比如HTTP请求行 GET/HTTP/1.1和请求头,这个被称之为TCP快速打开)。
- 此时,TCP连接已经建立,双方可以开始数据传输。
发送 HTTP 请求
HTTP(Hypertext Transfer Protocol,超文本传输协议)
它是建立在TCP连接之上的应用层协议。
HTTP工作流程如下:
客户端请求:
- 一旦TCP连接建立,客户端(通常是Web浏览器)就可以通过这个连接发送一个HTTP请求到服务器。
- 这个请求包含了方法(GET、POST等)、URI(统一资源标识符)和协议版本,以及可能包含的请求头和请求体。
服务器响应:
- 服务器接收到HTTP请求后,会处理这个请求并返回一个HTTP响应。
- 响应通常包括一个状态码(如200表示成功,404表示未找到),响应头,以及任何响应内容(如请求的HTML文件)。
TCP 为 HTTP 提供了一个可靠的通道,保证数据正确、完整地从服务器传输到客户端。
网页被解析的过程
服务器下载资源:先下载 index.html ,遇到 js,css 在下载他们。
浏览器内核
常见的浏览器内核有
- Trident(三叉戟):IE、早期的360安全浏览器、早期的搜狗高速浏览器、早期的百度浏览器、早期的UC浏览器;(微软已经放弃);
- Gecko(壁虎):Mozilla Firefox;
- Presto(急板乐曲)->Blink(眨眼):Opera;
- Webkit:Safari、.移动端浏览器(Android、iOS);
- Webkit->Blink:Google Chrome,Edge,360极速浏览器,搜狗高速浏览器等国内浏览器;
我们经常说的浏览器内核指的是浏览器的排版引擎:排版引擎(layout engine),也称为浏览器引擎(browser engine)、页面渲染引擎(rendering engine)或样版引擎。