从在浏览器输入url到页面加载完成的过程中都发生了什么(前端角度)

当我们在浏览器输入url地址并按下回车键以后,从前端角度讲,大概会经历下面几个处理过程:

  1. 在浏览器的地址栏输入URL并按下回车;

  2. 浏览器首先会检查本地是否存在当前请求页面的缓存,并查看缓存是否过期;

    1. 如果存在该请求页面的缓存且缓存未过期,则直接加载缓存;
    2. 如果不存在该请求页面的缓存或者缓存已过期,则进入步骤3
  3. DNS根据输入的URL地址解析对应的服务器IP地址;

  4. 根据获取的IP地址建立TCP连接(三次握手);
    TCP

    在通过DNS实现域名解析后,获取到了服务器的IP地址。在获取到IP地址后,便会开始建立一次连接,这是由TCP协议完成的,主要通过三次握手进行连接,三次握手过程大致如上图所示。
      1. 第一次握手:建立连接时,客户端发送syn包(syn=j)到服务器,并进入SYN_SENT状态,等待服务器确认;
      2. 第二次握手:服务器收到syn包,必须确认客户的SYN(ack=j+1),同时自己也发送一个SYN包(syn=k),即SYN+ACK包,此时服务器进入SYN_RECV状态;
      3. 第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。
      完成三次握手,客户端与服务器开始传送数据。

  5. TCP连接建立成功后,浏览器向服务器发出HTTP请求;

    HTTP请求一般包含请求起始行、请求头和请求体三个部分。常见的请求有GET和POST两种,其中GET请求一般只包含请求起始行和请求头,而POST请求包含请求起始行、请求头和请求体。

  6. 服务器接收到HTTP请求,处理请求,并向浏览器作出响应,返回相应的数据到浏览器;

    服务器在收到浏览器发送的HTTP请求之后,会将收到的HTTP报文封装成HTTP的Request对象,并通过不同的Web服务器进行处理,处理完的结果以HTTP的Response对象返回,响应内容主要包括状态码,响应头,响应报文三个部分。

  7. 浏览器收到响应,根据响应数据进行页面的构建和渲染,主要过程如下:

    1. 浏览器根据返回数据读取HTML文件并解析HTML结构;
    2. 开始根据HTML结构构建DOM树;
      DOM
    3. 构建过程中遇到图片等资源需要再次向服务器发出请求以获取相关资源;
    4. DOM树构建完成,开始加载CSS文件,准备构建CSSOM树;
    5. 构建CSSOM树,将样式对应到DOM树相应的节点;
      CSSOM
    6. 进行页面渲染,完成页面显示,页面加载完成。
  8. 断开与服务器的TCP连接。

参考文章
踮起脚尖眺望6 - 从输入url到页面加载完成发生了什么?——前端角度