从输入URL到页面加载的过程?如何由一道题完善自己的前端知识体系
    在浏览器中输入url到页面显示出来的过程发生了什么

    • 输入关键词
    • 浏览器联想
    • 键入Enter
    • 分析url
      • url组成
        • 协议
        • 主机
        • 虚拟目录
        • url参数
    • 提取url中的域名
    • 检查浏览器缓存
      • Service Worker
        • 运行在浏览器背后的独立线程
        • 可用作缓存
      • Memory Cache
        • 内存缓存
        • 页面关闭释放
        • 一般用作JSCSS文件
      • Disk Cache
        • 磁盘缓存
        • 长期有效
        • 一般用作图片资源缓存
      • Push Cache
        • HTTP/2新功能
        • 在一次资源请求中, 服务器可以主动推送客户端可能需要的资源
        • 可与H5SSE(监听服务端发送事件)配合使用
      • New Request
    • DNS解析
      • 提取url中的域名信息
      • 检查浏览器缓存
      • 检查操作系统缓存的Hosts文件
      • 检查路由器缓存
      • 检查运营商提供的本地DNS服务器(localDNS)缓存, 不具有权威性
      • 检查是否在本地区域配置文件中, 返回解析结果, 具有权威性
      • 本地DNS服务器
        • 转发模式
          • 依次寻找上一级DNS服务器解析
        • 非转发模式
          • 本地DNS发送请求到根DNS
          • 根DNS返回顶级域名服务器(.com、.top、…)地址
          • 本地DNS联系该顶级域名服务器来具体子级域名(xx.com、xxx.xx.com)
      • 本地DNS服务器接收到IP地址
        • 写入缓存
      • 返回给客户端
    • CDN
      • 提取url中的域名
      • 本地DNS服务器解析
      • 将域名解析权交给CNAME指向的CDN的DNS负载均衡系统
      • DNS负载均衡返回离用户最近的IP地址给本地DNS服务器
      • 本地DNS返回IP地址给用户
    • TLS/SSL四次握手
      • Client Hello(随机数X, 支持的加密方法)
      • Server Hello(rsa公钥, 随机选取客户端支持的加密方法, 随机数Y, 证书)
      • Client生成随机数secret, 发送使用公钥加密后的secret
      • Server通过私钥解密secret, 利用X、Y、secret生成session-key(唯一的对话密钥)
    • TCP三次握手
      • 客户端发送SYN(seq = x)到服务器, 进入SYN-SEND状态
      • 服务端发送SYN + (ACK = x + 1) + (seq = y)到服务器, 进入SYN-RECEIVED状态
      • 客户端发送ACK = y + 1, 确认接受连接, 双方进入ESTABLISHED状态
      • 超时重传机制
        • 停止等待ARQ
          • 正常传输
            • 一方发送数据报文, 在规定的时间内对方接收到应答, 就取消定时器
          • 报文丢失
            • 发送备份的数据
          • ACK超时
            • 重传报文
        • 连续ARQ
          • 滑动窗口机制
            • 控制流量
    • IP、ICMP
      • IP
        • 寻址
          • 路由功能
        • 分段
          • 数据包的分片和重组, 以适应数据链路层的传输限制
      • ICMP
        • ping命令
        • 报告无法传送的数据包的错误
    • ARP
      • 地址解析协议
      • IP地址 -> MAC地址(路由器、网卡的‘身份证号’)
    • 以太网
      • 信道传输
    • 回溯⬆
    • 服务端返回各种资源
    • 浏览器渲染机制
      • 解析构建DOM树
        • 浏览器根据html文件的编码方式, 将字节转化为对应字符
        • 将字符串转化为符合H5标准的令牌(尖括号字符串)
        • 转化为对应的DOM节点, 并完善其属性
        • 根据节点的对应关系构建DOM树
      • 解析构建CSSOM树
        • 浏览器根据css文件的编码方式, 将字节转化为对应字符
        • 将字符串转化为符合H5标准的令牌(尖括号字符串)
        • 将令牌转化为相应的CSS Rules样式对象
        • 根据CSS样式的层级关系, 构建CSSOM树
      • 构建Render Tree
        • 从DOM树的根节点开始遍历
        • 只添加可见节点
      • 计算节点(flow)
      • 绘制(paint)
    • TCP四次分手
      • 客户端发送FIN + (seq = x)至服务器, 进入FIN-WAIT-1状态
      • 服务端发送(ACK = x + 1) + (seq = y)到客户端, 进入CLOSE-WAIT状态, 此时仍然可以发送数据到client
      • 等待资源发送完成, 再次发送FIN + (seq = z)到客户端, 进入LAST-ACK状态, 此时客户端进入FIN-WAIT-2状态.
      • 客户端发送(ACK = z + 1)确认应答, 通过延时确认机制, 等待2MSL, 确保服务端接收到消息.