输入网址到显示网页浏览器都干了什么
程序员文章站
2022-06-19 10:34:29
输入地址到显示页面发生了什么 [Toc] 简单版 1. 浏览器发起DNS请求,解析域名得到 地址 2. 封装 请求报文,并发送给服务器 3. 服务器接收请求并处理请求,封装 响应报发送会浏览器 4. 浏览器解析响应报文, 遇到新资源继续请求 5. 浏览器根据解析结果生成 树, 树, 进行页面布局和渲 ......
目录
输入地址到显示页面发生了什么
简单版
- 浏览器发起dns请求,解析域名得到
ip
地址 - 封装
http
请求报文,并发送给服务器 - 服务器接收请求并处理请求,封装
http
响应报发送会浏览器 - 浏览器解析响应报文, 遇到新资源继续请求
- 浏览器根据解析结果生成
dom
树,cssom
树, 进行页面布局和渲染 - 最终显示完整页面
详细版
- 浏览器先查看缓存, 如果请求资源在缓存中且没过期,使用缓存
- 如果资源没有缓存,发起新请求
- 如果已缓存,检查是否过期
- 没有过期直接使用缓存
- 过期与服务器进行验证
- (资源未缓存)浏览器解析
url
, 获取请求协议,主机,端口,路径信息 - 封装一个http请求报文
- 获取
ip
地址- 查看浏览器有没有缓存这个ip地址
- 本机缓存中有没有
-
hosts
文件有没有 -
dns
查询
- 与目标
ip
服务器建立tcp
连接, 然后发送http
请求报文 - 服务器接收请求并处理
- 服务器检查
http
请求头是否包含缓存验证信息, 如果验证没有过期,返回304 - 组装
http
响应报文, 并将发送回浏览器 - 浏览器接收http响应,然后根据情况选择关闭
tcp
连接或保留重用 - 对响应报文体进行解码
- 浏览器检查响应状态码, 如果资源可以缓存,进行缓存
- 解析
html
结构,构建dom
树,cssom
树 - 解析过程遇到新的资源继续发送请求,直到所有资源都加载完毕
- 根据
dom
树和cssom
构建渲染树, 并对渲染树进行布局- 解析
html
构建dom
树 - 根据
dom
树,cssom
树构建渲染树- 不可见节点不会放入渲染树
- 不可见节点:
script
,meta
这样的节点本身不可见 - 被
css
隐藏的元素(display: none
,visibility:hidden
)
- 不可见节点:
- 不可见节点不会放入渲染树
- 对渲染树进行布局. 计算元素信息,确定大小,位置.
- 调用系统api进行绘图操作,显示页面
- 解析
- 解析,执行js(一般将js放在末尾,所以js的执行在dom渲染之后)
- 语法检查阶段
- 词法分析
- 语法分析
- 运行阶段
- 预解析
- 创建执行环境
- 确定 变量对象
- 确定 作用域
- 确定 this
- 属性填充(顺序)
- 函数参数(没有传入,初始化值为:undefined)
- 函数声明+定义(发生命名冲突会覆盖)
- 变量声明(初始化值为:undefined, 发生命名冲突会忽略)
- 创建执行环境
- 代码执行
- js引擎一行行读取代码并执行
- 预解析
- 语法检查阶段
- 显示页面