前言
“在浏览器里输入URL到页面展示,这中间发生了什么?”这是一道经典的面试题,能较为全面的考察应聘者知识掌握层度的,身为一个前端工程师,浏览器是我们平时打交道最多的地方,也是我们应该了解的地方,其中涉及到了网络,操作系统,Web等一系列的知识等
简单分析
从开发&运维角度方面来看,总体来说分为以下几个过程:
- DNS 解析:将域名解析成 IP 地址
- TCP 连接:TCP 三次握手
- 发送 HTTP 请求
- 服务器处理请求并返回 HTTP 报文
- 浏览器解析渲染页面
- 断开连接:TCP 四次挥手
整个过程解释
-
浏览器进程接收到用户输入的 URL 请求,浏览器进程便将该 URL 转发给网络进程。
-
网络进程发起真正的URL请求。
-
然后网络进程接受到网络进程的响应数据,发送‘提交导航’消息到渲染进程;
-
渲染进程接受到"提交导航"的消息后,便开始准备接收HTML数据,接收数据的方式是直接和网络进程建立数据管道。
-
最后渲染进程会向浏览器进程"确认提交",告诉浏览器进程:“已经准备好接受和解析页面数据了”。
-
浏览器进程接受到渲染进程“提交文档”的消息后,便开始移除之前旧的文档,然后更新浏览器进程中的页面状态
详细分析
URL解析
首先判断你输入的是一个合法的URL 还是一个待搜索的关键词,并且根据你输入的内容进行对应操作
URL的解析第过程中的第一步,一个url的结构解析如下:
DNS查询
在浏览器输入网址后,首先要经过域名解析,因为浏览器并不能直接通过域名找到对应的服务器,而是要通过 IP 地址。
- IP 地址
IP 地址是指互联网协议地址,是 IP Address 的缩写。IP 地址是 IP 协议提供的一种统一的地址格式, 它为互联网上的每一个网络和每一台主机分配一个逻辑地址,以此来屏蔽物理地址的差异。
- 什么是域名解析
DNS 协议提供通过域名查找 IP 地址,或逆向从 IP 地址反查域名的服务。
DNS 是一个网络服务器,我们的域名解析简单来说就是在 DNS 上记录一条信息记录
- 浏览器如何通过域名去查询 URL 对应的 IP 呢?
DNS域名解析分为递归查询和迭代查询两种方式,现一般为迭代查询。
TCP连接
tcp是一种面向有连接的传输层协议,在确定目标服务器服务器的IP地址后,则经历三次握手建立TCP连接,流程如下:
发送 http 请求
当建立tcp连接之后,就可以在这基础上进行通信,浏览器发送 http 请求到目标服务器
请求的内容包括:
- 请求行
- 请求头
- 请求主体
响应请求
当服务器接收到浏览器的请求之后,就会进行逻辑操作,处理完成之后返回一个HTTP响应消息,包括:
- 状态行
- 响应头
- 响应正文
在服务器响应之后,由于现在http默认开始长连接keep-alive, 当页面关闭之后,tcp链接则会经过四次挥手完成断开
页面渲染
当浏览器接收到服务器响应的资源后,首先会对资源进行解析:
- 查看响应头的信息,根据不同的指示做对应处理,比如重定向,存储cookie,解压gzip,缓存资源等等
- 查看响应头的 Content-Type的值,根据不同的资源类型采用不同的解析方式
关于页面的渲染过程如下:
- 解析HTML,构建 DOM 树
- 解析 CSS ,生成 CSS 规则树
- 合并 DOM 树和 CSS 规则,生成 render 树
- 布局 render 树( Layout / reflow ),负责各元素尺寸、位置的计算
- 绘制 render 树( paint ),绘制页面像素信息
- 浏览器会将各层的信息发送给 GPU,GPU 会将各层合成( composite ),显示在屏幕上
总结:
-
从浏览器接收
url
到开启网络请求线程(这一部分可以展开浏览器的机制以及进程与线程之间的关系) -
开启网络线程到发出一个完整的
HTTP
请求(这一部分涉及到dns查询,TCP/IP
请求,五层因特网协议栈等知识) -
从服务器接收到请求到对应后台接收到请求(这一部分可能涉及到负载均衡,安全拦截以及后台内部的处理等等)
-
后台和前台的
HTTP
交互(这一部分包括HTTP
头部、响应码、报文结构、cookie
等知识,可以提下静态资源的cookie
优化,以及编码解码,如gzip
压缩等) -
单独拎出来的缓存问题,
HTTP
的缓存(这部分包括http缓存头部,ETag
,catch-control
等) -
浏览器接收到
HTTP
数据包后的解析流程(解析html
-词法分析然后解析成dom
树、解析css
生成css
规则树、合并成render
树,然后layout
、painting
渲染、复合图层的合成、GPU
绘制、外链资源的处理、loaded
和DOMContentLoaded
等) -
CSS
的可视化格式模型(元素的渲染规则,如包含块,控制框,BFC
,IFC
等概念) -
JS
引擎解析过程(JS
的解释阶段,预处理阶段,执行阶段生成执行上下文,VO
,作用域链、回收机制等等) -
其它(可以拓展不同的知识模块,如跨域,web安全,
hybrid
模式等等内容)