从输入一个url后到页面加载完成都发生了什么

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/crystal6918/article/details/55190555
  1. 浏览器查询缓存
    如果上次响应的头部中有Cache-Control: max-age=,值,则检查此值,否则检查Expires。若表明资源没有过期的话直接进行渲染,否则继续请求步骤

  2. 浏览器通过DNS获取ip地址

    • 浏览器缓存

    • 系统缓存
      浏览器会查找操作系统缓存中是否有这个域名对应的DNS解析结果,一般在hosts文件

    • 路由缓存

    • 浏览器向本地域名服务器请求IP地址

    • 如果本地域名服务器不知道的话,将会进行递归搜索

      • 本地域名服务器向根域名服务器进行请求
      • 根域名服务器将所要查询域名中的顶级域的ip地址返回给本地域名服务器
      • 本地域名服务器根据返回的ip地址再向顶级域发送请求
      • 顶级域将二级域的ip地址返回给本地域名服务器
      • 本地域名服务器向二级域发送请求
      • 不断重复这样的过程……
    • 最后本地域名服务器将IP地址返回给浏览器

  3. 建立TCP连接

    • 客户端发送SYN=1,seq = x,进入SYN_SENT状态
    • 服务器返回ACK=x+1,seq = y,进入SYN_RCV状态
    • 客户端发送ACK = y+1,seq = z,双方进入ESTABLISHED状态
  4. TCP建立完成后发送HTTP请求

  5. 服务器接受请求并解析

    • 如果头部有缓存相关信息如if-none-match与if-modified-since,则验证缓存是否有效,若有效则返回304
  6. 服务器将响应报文通过TCP连接发送回浏览器

  7. 浏览器接收响应,并关闭TCP连接:

    • 浏览器发送FIN=1,Seq = x
    • 服务器返回ACK=x+1,Seq = z
    • 服务器端发送FIN=1,seq = y
    • 路蓝旗发送ACK=y
  8. 浏览器检查状态码并进行对应操作

  9. 对响应进行解码(如gzip压缩)
  10. 解析HTML文档,构建DOM树
  11. 解析过程中遇到图片、样式表、js文件则启动下载
  12. 根据样式文件构建CSS树
  13. 根据DOM树与CSS树构建渲染树
    • 从DOM树的根节点遍历所有可见节点,即不包括script、meta这样的不可见元素与display:none的元素
    • 对每一个可见节点找到对应的CSS规则并应用
    • 发布可视节点的内容和计算样式
  14. 显示页面,window触发load事件

这里写图片描述

没有更多推荐了,返回首页