计网OSI七层
应用层 HTTP FTP DNS
表示层
会话层
传输层 TCP UDP
网络层
数据链路层 Mac地址
物理层 电线光纤
1 Url解析-判断url是否正确
协议 主机地址 端口号 文件路径 查询参数 锚点
协议: http or https 443
端口号:默认80
文件路径:资源在网站的位置
查询参数:?key1=value1&key2=value2&token=xxx
锚点: #xxx
2 DNS域名解析
缓存判断:浏览器 操作系统 路由器 ISP缓存
- 浏览器缓存：浏览器检查是否在缓存中
- 操作系统缓存：操作系统DNS缓存，去本地的hosts文件查找
- 路由器缓存：路由器DNS缓存
- ISP 缓存： ISP DNS缓存（ISP DNS 就是在客户端电脑上设置的首选 DNS 服务器，又称本地的DNS服务器）
IP查找:根服务器-顶级域名服务器-域名服务器
3 TCP三次握手
4 浏览器发送请求-HTTP请求报文 并携带请求体信息
-
请求行：有请求方法、请求的url、http协议及其版本
-
请求头：把浏览器的一些基础信息告诉服务器。比如包含了浏览器所使用的操作系统、浏览器内核等信息，以及当前请求的域名信息、浏览器端的 Cookie 信息等
-
空行：最后一个请求头之后是一个空行，发送回车符和换行符，通知服务器以下不再有请求头
-
请求体（报文主体/请求中文）：当使用POST, PUT等方法时，通常需要客户端向服务器传递数据。这些数据就储存在请求正文中。在请求包头中有一些与请求正文相关的信息，例如: 现在的Web应用通常采用Rest架构，请求的数据格式一般为json。这时就需要设置
Content-Type: application/json。
5.服务器响应请求 并返回数据
-
响应行/状态行：由 HTTP 版本协议字段、状态码和状态码的描述文本 3 个部分组成
-
响应头：用于指示客户端如何处理响应体，告诉浏览器响应的类型、字符编码和字节大小等信息
-
空行：最后一个响应头部之后是一个空行，发送回车符和换行符，通知服务器以下不再有响应头部。
-
响应体：返回客户端所需数据
6.浏览器解析渲染页面
1.解析html-构建dom树 遇到script 等待下载完成再解析html,
-
- 事实上，浏览器在解析HTML的过程中，遇到了 script元素是不能继续构建DOM树的
- 它会 停止继续构建，首先下载JavaScript代码，并且执行JavaScript的脚本
- 只有 等到JavaScript脚本执行结束后，才会继续解析HTML，构建DOM树
-
为什么要这样做呢?
- 这是 因为JavaScript的作用之一就是操作DOM，并且可以修改DOM
- 如果我们等到DOM树构建完成并且渲染再执行JavaScript会造成严重的回流和重绘，影响页面的性能
- 所以会在遇到script元素时，优先下载和执行JavaScript代码，再继续构建DOM树
-
但是这个也往往会带来新的问题，特别是现代页面开发中:
- 在目前的开发模式中（比如Vue、React)，脚本往往比HTML页面更“重”，处理时间需要更长
- 所以会造成页面的解析阻塞，在脚本下载、执行完成之前，用户在界面上什么都看不到
-
为了解决这个问题，script元素给我们提供了两个属性(attribute) :defer和async
defer不需要等待脚本下载 async 独立脚本
2.解析css 构建css dom
3.渲染(render)dom树
7.四次挥手
-
浏览器先判断是否为合法的url格式，不合法则在搜索引擎中搜索
-
合法后，DNS解析会先判断缓存中是否有url的IP地址。
-
缓存的查询顺序是：浏览器缓存 -> 操作系统缓存（本地的hosts文件） -> 路由器缓存 -> 本地的DNS服务器缓存
-
在缓存中没有的情况，则向服务器发起请求查询ip地址。
-
查询IP地址的顺序是：根域名服务器 -> 顶级域名服务器 -> 权威域名服务器。直到查找到返回，并将其存储在缓存中下次使用
-
TCP建立连接，也就是三次握手
-
第一次握手，携带建立连接请求SYN=1和随机序列seq=x
-
第二次握手，携带确定字段ACK=1、连接请求SYN=1、随机序列seq=y和ack为上一次握手的seq+1，就是x+1
-
第三次握手，携带确定字段ACK=1、ack=y+1、seq=x+1
-
如果是https，还有一个TCP四次握手
-
第一次握手，客户端向服务端发送 支持的协议版本 + 支持的加密方法 + 生成的随机数
-
第二次握手，服务端向客户端发送 证书 + 公钥 + 随机数
-
第三次握手前，客户端会先验证证书有没有过期、域名对不对、是否可信机构颁发的。
-
没有问题或者用户接受不受信的证书，浏览器会生成一个新的随机数
-
第三次握手，将之前的三个随机数通过一定的算法生成会话秘钥，之后的加密解密都是用这个秘钥
-
第四次握手，服务端收到回复，是用确定的加密方法进行解密，得到第三个随机数，使用同样的算法计算出会话秘钥
-
建立连接之后，浏览器发送http请求
-
请求报文由请求行、请求头、空行和请求体组成
-
服务器解析请求报文，返回响应报文
-
响应报文由响应行、响应头、空行和响应体组成，我们需要的html文件就在响应体中
-
浏览器拿到html文件并开始解析，构建dom tree。遇到css文件，下载并构建CSSOM tree。等到两者都构建完成之后，一起构建Render tree。然后进行布局和绘制
-
其中遇到了script标签，则停止构建dom tree，等下载完成之后才会继续构建dom tree
-
当资源传输完毕之后，TCP关闭连接，进行四次挥手的操作，其中四次挥手的操作客户端和服务器都可以发起
-
第一次挥手，携带断开连接的FIN=1、确定字段ACK=1、随机序列seq=u，ack=v
-
第二次挥手，携带确定字段ACK=1、随机序列seq=v，ack=u+1
-
第三次挥手，携带确定字段ACK=1、断开连接FIN=1、随机序列seq=w、ack=u+1
-
第四次挥手，携带确定字段ACK=1，随机序列seq=u+1，ack=w+1
-
等待2MSL后进入关闭状态
-
断开连接，结束通讯
