面试官: 说说地址栏输入 URL 敲下回车后发生了什么?

1,662

前言

“在浏览器里输入URL到页面展示,这中间发生了什么?”这是一道经典的面试题,能较为全面的考察应聘者知识掌握层度的,身为一个前端工程师,浏览器是我们平时打交道最多的地方,也是我们应该了解的地方,其中涉及到了网络,操作系统,Web等一系列的知识等

简单分析

从开发&运维角度方面来看,总体来说分为以下几个过程:

  • DNS 解析:将域名解析成 IP 地址
  • TCP 连接:TCP 三次握手
  • 发送 HTTP 请求
  • 服务器处理请求并返回 HTTP 报文
  • 浏览器解析渲染页面
  • 断开连接:TCP 四次挥手

image.png 整个过程解释

  • 浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程。

  • 网络进程发起真正的URL请求。

  • 然后网络进程接受到网络进程的响应数据,发送‘提交导航’消息到渲染进程;

  • 渲染进程接受到"提交导航"的消息后,便开始准备接收HTML数据,接收数据的方式是直接和网络进程建立数据管道。

  • 最后渲染进程会向浏览器进程"确认提交",告诉浏览器进程:“已经准备好接受和解析页面数据了”。

  • 浏览器进程接受到渲染进程“提交文档”的消息后,便开始移除之前旧的文档,然后更新浏览器进程中的页面状态

详细分析

URL解析

首先判断你输入的是一个合法的URL 还是一个待搜索的关键词,并且根据你输入的内容进行对应操作
URL的解析第过程中的第一步,一个url的结构解析如下:

image.png

DNS查询

在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过 IP 地址。

  1. IP 地址

IP 地址是指互联网协议地址,是 IP Address 的缩写。IP 地址是 IP 协议提供的一种统一的地址格式, 它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异。

  1. 什么是域名解析

DNS 协议提供通过域名查找 IP 地址,或逆向从 IP 地址反查域名的服务。

DNS 是一个网络服务器,我们的域名解析简单来说就是在 DNS 上记录一条信息记录

  1. 浏览器如何通过域名去查询 URL 对应的 IP 呢?

DNS域名解析分为递归查询和迭代查询两种方式,现一般为迭代查询。

image.png

TCP连接

tcp是一种面向有连接的传输层协议,在确定目标服务器服务器的IP地址后,则经历三次握手建立TCP连接,流程如下:

image.png

发送 http 请求

当建立tcp连接之后,就可以在这基础上进行通信,浏览器发送 http 请求到目标服务器

请求的内容包括:

  • 请求行
  • 请求头
  • 请求主体

image.png

响应请求

当服务器接收到浏览器的请求之后,就会进行逻辑操作,处理完成之后返回一个HTTP响应消息,包括:

  • 状态行
  • 响应头
  • 响应正文

image.png 在服务器响应之后,由于现在http默认开始长连接keep-alive, 当页面关闭之后,tcp链接则会经过四次挥手完成断开

页面渲染

当浏览器接收到服务器响应的资源后,首先会对资源进行解析:

  • 查看响应头的信息,根据不同的指示做对应处理,比如重定向,存储cookie,解压gzip,缓存资源等等
  • 查看响应头的 Content-Type的值,根据不同的资源类型采用不同的解析方式

关于页面的渲染过程如下:

  • 解析HTML,构建 DOM 树
  • 解析 CSS ,生成 CSS 规则树
  • 合并 DOM 树和 CSS 规则,生成 render 树
  • 布局 render 树( Layout / reflow ),负责各元素尺寸、位置的计算
  • 绘制 render 树( paint ),绘制页面像素信息
  • 浏览器会将各层的信息发送给 GPU,GPU 会将各层合成( composite ),显示在屏幕上

image.png 总结:

  • 从浏览器接收url到开启网络请求线程(这一部分可以展开浏览器的机制以及进程与线程之间的关系)

  • 开启网络线程到发出一个完整的HTTP请求(这一部分涉及到dns查询,TCP/IP请求,五层因特网协议栈等知识)

  • 从服务器接收到请求到对应后台接收到请求(这一部分可能涉及到负载均衡,安全拦截以及后台内部的处理等等)

  • 后台和前台的HTTP交互(这一部分包括HTTP头部、响应码、报文结构、cookie等知识,可以提下静态资源的cookie优化,以及编码解码,如gzip压缩等)

  • 单独拎出来的缓存问题,HTTP的缓存(这部分包括http缓存头部,ETagcatch-control等)

  • 浏览器接收到HTTP数据包后的解析流程(解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树,然后layoutpainting渲染、复合图层的合成、GPU绘制、外链资源的处理、loadedDOMContentLoaded等)

  • CSS的可视化格式模型(元素的渲染规则,如包含块,控制框,BFCIFC等概念)

  • JS引擎解析过程(JS的解释阶段,预处理阶段,执行阶段生成执行上下文,VO,作用域链、回收机制等等)

  • 其它(可以拓展不同的知识模块,如跨域,web安全,hybrid模式等等内容)