从输入url到页面加载完成的过程中都发生了什么？

了乌鹿
146 阅读6分钟

我正在参与掘金创作者训练营第6期，点击了解活动详情

前言

相信前端小伙伴们，啊，不，前端大佬们都知道，这是一道前端面试常考问题，作为前端开发工程师必须要掌握

概括

首先，我们要对此有个总体的概览认知，粗略的讲，从输入url到页面加载完成的过程中主要有以下6步：

  1. 浏览器会进行DNS域名解析，拿到域名对应的服务器ip地址，再用该ip去访问web服务器
  2. 然后会和web服务器进行tcp的三次握手建立tcp连接
  3. 连接建立成功后，浏览器会发送http的get请求
  4. 服务器收到请求并给予响应，返回请求的数据
  5. 浏览器拿到数据并进行解析、渲染
  6. 浏览器和服务器进行tcp的四次挥手，断开连接

细节

对此有整体认知后，我们需要知道其中具体过程以及涉及的技术

DNS解析

  1. 在浏览器地址栏输入URL，会进行解析（URL是统一资源定位符）。浏览器会根据解析出得协议，开辟一个网络线程，前往请求资源。

    如果输入的域名，需要DNS解析成IP，流程如下：

  • 浏览器有缓存，直接用浏览器缓存，没有就去本机缓存，没有就看是不是host。

  • 如果还没有，就向DNS域名服务器查询（这个过程经过路由，路由也有缓存），查询到对应的IP。

所请求资源是否缓存

  1. 浏览器查看缓存，如果请求资源在缓存中并且新鲜，跳转到转码步骤

  • 如果资源未缓存，发起新请求

  • 如果已缓存，检验是否足够新鲜，足够新鲜直接提供给客户端，否则与服务器进行验证。

  • 检验新鲜通常有两个HTTP头进行控制 Expires 和 Cache-Control ：

HTTP1.0提供Expires，值为一个绝对时间表示缓存新鲜日期

HTTP1.1增加了Cache-Control: max-age=,值为以秒为单位的最大新鲜时间

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

  2. 浏览器组装一个HTTP（GET）请求报文

  3. 浏览器获取主机ip地址，过程如下：

  • 浏览器缓存

  • 本机缓存

  • hosts文件

  • 路由器缓存

  • ISP DNS缓存

  • DNS递归查询（可能存在负载均衡导致每次IP不一样）

三次握手

（1）客户端发送一个TCP的SYN=1，seq=X的包到服务器端口

（2）服务器发回SYN=1，ACK=1, ack=X+1，seq=Y的响应包

（3）客户端发送ACK=1, ack=Y+1， seq=X+1

三次握手.png

向服务器发送HTTP请求

  1. TCP链接建立后发送HTTP请求

  2. 服务器接受请求并解析，将请求转发到服务程序，如虚拟主机使用HTTP Host头判断请求的服务程序

  3. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码

  4. 处理程序读取完整请求并准备HTTP响应，可能需要查询数据库等操作

接收服务器返回数据

  1. 服务器将响应报文通过TCP连接发送回浏览器

四次挥手

  1. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，关闭TCP连接的四次握手如下：

（1）主动方发送Fin=1， seq= X报文

（2）被动方发送ACK=1，ack=X+1, seq=Z报文

（3）被动方发送Fin=1， ACK=1，ack=X+1, seq=Y报文

（4）主动方发送ACK=Y， seq=X+1, ack=Y+1报文

四次挥手.png

  1. 浏览器检查响应状态吗：是否为1XX，3XX， 4XX， 5XX，这些情况处理与2XX不同

  2. 如果资源可缓存，进行缓存

  3. 对响应进行解码（例如gzip压缩）

  4. 根据资源类型决定如何处理（假设资源为HTML文档）

浏览器解析渲染

  1. 解析HTML文档，构建DOM树，下载资源，构造CSSOM树，执行js脚本，这些操作没有严格的先后顺序，以下分别解释

  2. 构建DOM树：

    (1) Tokenizing：根据HTML规范将字符流解析为标记

    (2) Lexing：词法分析将标记转换为对象并定义属性和规则

    (3) DOM construction：根据HTML标记关系将对象组成DOM树

解析.png

DOM树.png

  1. 解析过程中遇到图片、样式表、js文件，启动下载

  2. 构建CSSOM树：

    (1) Tokenizing：字符流转换为标记流

    (2) Node：根据标记创建节点

    (3) CSSOM：节点创建CSSOM树

CSSOM树.png

  1. 根据DOM树和CSSOM树构建渲染树:

    (1) 从DOM树的根节点遍历所有可见节点，不可见节点包括：

    1） script , meta 这样本身不可见的标签。

2) 被css隐藏的节点，如 display: none

    (2) 对每一个可见节点，找到恰当的CSSOM规则并应用

    (3) 发布可视节点的内容和计算样式

  2. js解析如下：

    (1) 浏览器创建Document对象并解析HTML，将解析到的元素和文本节点添加到文档中，此时document.readystate为loading

    (2) HTML解析器遇到没有async和defer的script时，将他们添加到文档中，然后执行行内或外部脚本。这些脚本会同步执行，并且在脚本下载和执行时解析器会暂停。这样就可以用document.write()把文本插入到输入流中。同步脚本经常简单定义函数和注册事件处理程序，他们可以遍历和操作script和他们之前的文档内容

    (3) 当解析器遇到设置了async属性的script时，开始下载脚本并继续解析文档。脚本会在它下载完成后尽快执行，但是解析器不会停下来等它下载。异步脚本禁止使用 document.write()，它们可以访问自己script和之前的文档元素

    (4) 当文档完成解析，document.readState变成interactive

    (5) 所有defer脚本会按照在文档出现的顺序执行，延迟脚本能访问完整文档树，禁止使用document.write()

    (6) 浏览器在Document对象上触发DOMContentLoaded事件

    (7) 此时文档完全解析完成，浏览器可能还在等待如图片等内容加载，等这些内容完成载入并且所有异步脚本完成载入和执行，document.readState变为complete，window触发load事件

  3. 显示页面（HTML解析过程中会逐步显示页面）

最后

相信看完以上内容，可以了解从浏览输入url地址到页面加载完成的过程

真可谓：掏空~ 我的所有。

掏空.webp
avatar
文章
阅读
粉丝