html页面加载解析过程（详解）

相关概念：

ISO（国际标准化组织），
OSI（开放系统互连）
ANSI（美国国家标准协会）

七层协议（合并成五层网络协议）
应用层：HTTP FTP TFTP SMTP SNMP DNS TELNET HTTPS POP3 DHCP
    表示层：合并到应用层
    会话层：合并到应用层
传输层：TCP/UDP，数据包一旦离开网卡，即进入网络传输层
网络层：ICMP IGMP IP（IPV4 IPV6）
数据链路层
物理层

三次握手：客户端与服务器在进行TCP数据（字节流）通信前建立连接的过程
# 1、client（客户端） => server（服务端）: 请求建立TCP连接
    seq = j ，随机生成一个值为j的序列号 (seq=客户端ip地址的随机序列号)
    ack = 0 (ack=ip地址的的确认位号)
    SYN = 1 (端口号，1表示请求建立连接)
    ACK = 0 (端口号)
# 2、server => client: 从客户端发的第一个包内的SYN = 1 (端口号)，得知客户端请求建立TCP连接，回复客户端请求，发送
    seq = k (服务端的随机序列号)
    ack = j + 1 (在客户端的seq值的基础上加1，即 j + 1，表示服务端已收到请求，接收功能正常)
    SYN = 1
    ACK = 1（表示同意建立连接）
# 3、client => server: 收到服务端返回的包内ack = j + 1，确认服务端已收到建立TCP的通信的请求
    seq = j + 1（在第一次发送的 j 的基础上加1）
    ack = k + 1 (server 的ack的值加1，即 k + 1，表示客户端已收到信息，即服务端发送功能正常)
    SYN = 1
    ACK = 1

四次挥手：客户端与服务器之间通信结束关闭连接

html页面加载解析，从浏览器地址输入URL开始
1、DNS解析，拿到IP地址
# 将域名解析成IPP地址（查询浏览器缓存 => 计算机本地DNS缓存 => 路由器缓存 => DNS服务器缓存 => 根域名服务器）

2、通过IP地址，发起HTTP请求（TCP/IP的请求构建），获取html页面
# 3次握手，建立连接
# 服务器响应请求，返回数据（html文档）
# 根据请求头Connection: Keep-Alive判断是否需要持久连接
# 如果不是持久连接，就通过4次挥手，断开TC连接

3、http请求成功后服务器返回html文档数据（字节流），浏览器接收到数据，开始解析渲染页面
# 整体过程：解析 => (DOM / CSSOM) => Render Tree => 渲染
# 字节流（解码） => 字符流（词法分析器） => 词语/tokens(语法分析器) => NODE节点 => DOM（构建）
# html文档解析过程，是循序渐进的，即边加载边解析，然后构建DOM，不会等到整个页面加载完才开始解析
# 如果html解析的过程遇到 link 标签，就会去请求加载css文件，css文件完整加载完毕后才开始构建CSSOM，在解析CSSOM的过程不会阻塞html文档的解析
# 如果html解析的过程遇到了内联style则会直接解析，这个解析过程与DOM的构建同时进行
# 如果html解析的过程遇到 script 标签（没有defer，async），解析就会暂停并开始请求加载和执行js文件，如果是内联 script 就直接执行
# 如果js执行中对 DOM 进行了修改，DOM 就需要重新构建（从受影响的位置开始）
# js执行完，浏览器继续html解析
# 如果html解析的过程中遇到img，就会去异步去请求加载图片，不会阻塞页面解析，图片的加载会引起页面回流（预设定好尺寸）
# 浏览器将构建好 DOM 与 CSSOM 之后， 会将他们结合构建成 Render Tree
# 如果 DOM 比 CSSOM 先构建完，不会阻塞 Render Tree 的构建，如果 CSSOM 比 DOM 快，需要等待 CSSOM 构建完，再合并成渲染树（CSS匹配规则从右到左）
# Render Tree 只会构建需要在屏幕上显示的部分， html, head, meat, link, style, script和display:none;等标签会被忽略
# 但visibility: hidden;的标签只是隐藏，会有占位，所以不会被 Render Tree 忽略。
# 浏览器根据 Render Tree 将html文档渲染到屏幕上
# Render Tree 上面的 DOM 节点是以盒子模型的状态存在的，渲染时需要计算每个元素的尺寸和位置 => 回流reflow
# 当盒模型的位置，大小以及其他属性，如颜色,字体,等确定下来之后，浏览器便开始绘制内容 => 重绘repain
# 回流一定导致重绘，但重绘不一定会导致回流（回流性能开销更大）
# 浏览器把最终绘制好的图层信息发送给 GPU 渲染到屏幕上