URL到页面到底经历了什么（详细版）

时间 2019-11-07

标签 url 页面到底经历什么详细栏目 HTTP/TCP 繁體版

原文原文链接

URL到页面到底经历了什么

本文主要在整理概括
图片均来源于网络
不足之处，请留言补充

1. 游览器查看缓存

2. 浏览器解析URL获取协议，主机，端口，path

URL是啥？css
```
scheme://host.domain:port/path/filename?
```
- scheme: 协议，常见的有 http、https、ftp、file
- domain：域名，经过域名操做服务器IP
- port: 端口号
- path：路径
- filename: 定义文档/资源的名称
- ?：后接查询参数等

3. DNS解析

即域名解析，由于浏览器并不能直接经过域名找到对应的服务器，而是要经过 IP 地址。从域名找到IP的过程就是DNS解析

游览器首发搜索的自身的DNS缓存html
- 游览器会将DNS解析的IP与域名缓存起来，减小网络请求的损耗。
- 每一个游览器的缓存时间不同，chrome为60s、IE为30min、Firefox为60s
若游览器没有，则搜索操做系统中的DNS缓存chrome
若没有，则搜索操做系统的hosts文件浏览器
路由缓存：路由器也有 DNS 缓存。缓存
ISP 的 DNS 服务器：ISP 是互联网服务提供商(Internet Service Provider)的简称，ISP 有专门的 DNS 服务器应对 DNS 查询请求安全
根服务器：ISP 的 DNS 服务器还找不到的话，它就会向根服务器发出请求，进行递归查询（DNS 服务器先问根域名服务器.com 域名服务器的 IP 地址，而后再问.baidu 域名服务器，依次类推）

额外说明：DNS prefetch (游览器DNS预解析)服务器
- 根据浏览器定义的规则，提早解析以后可能会用到的域名，使解析结果缓存到系统缓存中，缩短DNS解析时间，来提升网站的访问速度。
- 现代浏览器在 DNS Prefetch 上作了两项工做：
1. html 源码下载完成后，会解析页面的包含连接的标签，提早查询对应的域名网络
2. 对于访问过的页面，浏览器会记录一份域名列表，当再次打开时，会在 html 下载的同时去解析 DNSdom
- 分为两种：socket
  
  自动解析：
```
浏览器使用超连接的href属性来查找要预解析的主机名。当遇到a标签，浏览器会自动将href中的域名解析为IP地址，这个解析过程是与用户浏览网页并行处理的。可是为了确保安全性，在HTTPS页面中不会自动解析
```
  手动解析：
```
经过link
    <link rel="dns-prefetch" href="www.baidu.com">
        
    在HTTPS页面开启自动解析功能时
    <meta http-equiv="x-dns-prefetch-control" content="on">
        
    在HTTP页面关闭自动解析功能时
    <meta http-equiv="x-dns-prefetch-control" content="off">
```

4. 打开一个socket与目标IP地址，端口创建TCP连接(三次握手)

在《计算机网络》一书中其中有提到，三次握手的目的是“为了防止已经失效的链接请求报文段忽然又传到服务端，于是产生错误”

SYN：synchronous创建联机

ACK：acknowledgement 确认

1. 第一次握手：客户端发送一个SYN=1，seq=x（x是随机数字的意思）的数据包，服务器看到咱们发过来数据包，就知道你要跟他创建连接

2. 第二次握手：服务器发给咱们一个SYN=1，seq=y，ACK=x+1。服务器发送前两个数据是为了确认本身的发消息能力，第三个数据在咱们的seq上加1，以确认创建的是同一个连接。

3. 第三次握手：咱们只须要向服务器发送一个ACK=y+1，服务器即可以确认本身的发送能力了。

5. 开始发送 HTTP 请求报文

第一部分：请求行（请求资源地址）

POST /examples/default.jsp HTTP/1.1

/*
 * POST（Method 请求方法）
 * /examples/default.jsp（URI：Uniform Resource Identifier 统一资源标识符）
 * HTTP（Protocol 协议）/1.1（Version 版本）
 */


第二部分：请求头（Request headers）

Accept: text/plain; text/html 

请求头包含请求的附加信息，由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔


第三部分：第三部分：请求体（Entity body）

lastName=Franks&firstName=Michael

6. 服务器处理请求并返回 HTTP 报文

6.1 服务器

服务器是网络环境中的高性能计算机，它侦听网络上的其余计算机（客户机）提交的服务请求，并提供相应的服务.

6.2 MVC 后台处理阶段

6.3 http 响应报文

第一部分：响应行

HTTP/1.1 200 OK

/*
 * HTTP（Protocol 协议）/1.1（Version 版本）
 * 200（Status code）
 * OK（Description）
 */

第二部分：响应头

Server: Microsoft-IIS/4.0  
Date: Mon, 5 Jan 2004 13:13:33 GMT  
Content-Type: text/html  
Last-Modified: Mon, 5 Jan 2004 13:13:12 GMT  
Content-Length: 112
....

第三部分：响应体

<html>
   <head></head>  
    <body>
        ....
   </body>
</html>

7. 浏览器解析渲染页面

7.1 根据 HTML 解析 DOM 树

根据 HTML 的内容，将标签按照结构解析成为 DOM 树，DOM 树解析的过程是一个深度优先遍历。即先构建当前节点的全部子节点，再构建下一个兄弟节点。
在读取 HTML 文档，构建 DOM 树的过程当中，若遇到 script 标签，则 DOM 树的构建会暂停，直至脚本执行完毕。

7.2 根据 CSS 解析生成 CSS 规则树

解析 CSS 规则树时 js 执行将暂停，直至 CSS 规则树就绪。
浏览器在 CSS 规则树生成以前不会进行渲染。

7.3 结合 DOM 树和 CSS 规则树，生成渲染树

DOM树和 css 树解析为并行，两者所有完成后才会结合生成渲染树

DOM 树和 CSS 规则树所有准备好了之后，浏览器才会开始构建渲染树。
精简 CSS 并能够加快 CSS 规则树的构建，从而加快页面相应速度。

7.4 根据渲染树计算每个节点的信息（布局）

布局：经过渲染树中渲染对象的信息，计算出每个渲染对象的位置和尺寸
回流：在布局完成后，发现了某个部分发生了变化影响了布局，那就须要倒回去从新渲染。

7.5 根据计算好的信息绘制页面

绘制阶段，系统会遍历呈现树，并调用呈现器的“paint”方法，将呈现器的内容显示在屏幕上。
重绘：某个元素的背景颜色，文字颜色等，不影响元素周围或内部布局的属性，将只会引发浏览器的重绘。
回流：某个元素的尺寸发生了变化，则需从新计算渲染树，从新渲染。

8. 断开链接(四次挥手)

接收完毕后断开连接

1）客户端进程发出链接释放报文，而且中止发送数据。释放数据报文首部，FIN=1，其序列号为seq=u（等于前面已经传送过来的数据的最后一个字节的序号加1），此时，客户端进入FIN-WAIT-1（终止等待1）状态。 TCP规定，FIN报文段即便不携带数据，也要消耗一个序号。

2）服务器收到链接释放报文，发出确认报文，ACK=1，ack=u+1，而且带上本身的序列号seq=v，此时，服务端就进入了CLOSE-WAIT（关闭等待）状态。TCP服务器通知高层的应用进程，客户端向服务器的方向就释放了，这时候处于半关闭状态，即客户端已经没有数据要发送了，可是服务器若发送数据，客户端依然要接受。这个状态还要持续一段时间，也就是整个CLOSE-WAIT状态持续的时间。

3）客户端收到服务器的确认请求后，此时，客户端就进入FIN-WAIT-2（终止等待2）状态，等待服务器发送链接释放报文（在这以前还须要接受服务器发送的最后的数据）。

4）服务器将最后的数据发送完毕后，就向客户端发送链接释放报文，FIN=1，ack=u+1，因为在半关闭状态，服务器极可能又发送了一些数据，假定此时的序列号为seq=w，此时，服务器就进入了LAST-ACK（最后确认）状态，等待客户端的确认。

5）客户端收到服务器的链接释放报文后，必须发出确认，ACK=1，ack=w+1，而本身的序列号是seq=u+1，此时，客户端就进入了TIME-WAIT（时间等待）状态。注意此时TCP链接尚未释放，必须通过2∗∗MSL（最长报文段寿命）的时间后，当客户端撤销相应的TCB后，才进入CLOSED状态。

6）服务器只要收到了客户端发出的确认，当即进入CLOSED状态。一样，撤销TCB后，就结束了此次的TCP链接。能够看到，服务器结束TCP链接的时间要比客户端早一些。

参考

https://mp.weixin.qq.com/s/Ln...

http://blog.poetries.top/FE-I...