一、URL到页面
**准备阶段: **
输入URL,Enter进入查找
浏览器在本地查找host文件,匹配对应的IP; 找到返回浏览器并缓存
没有,则进入路由查找; 找到返回浏览器并缓存
再没有,再进入公网DNS根目录 ; 找到返回浏览器并缓存
进入,等待发送请求,建立tcp/ip 传输连接, 若没有等候的请求,则直接发送
**服务器阶段: **
根据请求,查找数据,返回数据
渲染阶段:
逐行解析HTML, 遇到同步的请求代码,则发送数据请求,cssLink, js, 图片,视频等;
构建htmlDOM-tree, CSSDOM ,
render-tree
2、html页面渲染:
- 发送请求,服务器返回HTML,浏览器解析HTML,发出相应css的和js请求
- html 不是缓存的
- css下载完成,构建dom树,构建cssDOM完成后,结合DOM生成Rendering Tree,
- css是由单独的下载线程异步下载的
- css加载不会阻塞DOM树的解析
- css加载会阻塞DOM树的渲染
- css加载会阻塞后面js语句的执行
- js下载完成,操作DOM,更新DOM;在html解析过程中或是DOM和CSSDOM结构构建中,同步请求加载JS,解析js都会阻塞浏览器的构和渲染
- 解析到js会, js引擎会使html解析线程暂停,html页面停止解析
- js请求加载完毕, js执行完毕, js引擎停止, html线程继续工作解析
3、异步请求,页面更新
重排, 重绘
4、web浏览器引擎
- 浏览器内核(浏览器渲染引擎):
浏览器内核可以分为这四种:Trident(IE)、Gecko(火狐)、Blink(Chrome、Opera)、Webkit(Safari)
- 浏览器js引擎
5、浏览器本地存储
indexDB, storage,cookie
6、浏览器缓存
解析url, 查找缓存,发送请求
6.1、解析url,验证是否有缓存标识信息
- 有,进一步验证是否过期
- 未过期,则返回缓存的资源
6.2 查找缓存:
- Service Worker (浏览器独立线程)
- Memory Cache (内存中)
- Disk Cache (磁盘)
- Push Cache (推送缓存,session)
7、浏览器的事件轮询
- 同步任务,解析执行语句
- 同步执行栈空, 去轮询异步队列
- 检查微任务
- 检查宏任务
- 一般性异步任务
定时器: 解析时,是现在浏览器中开辟一个独立计时环境, 在设定时间结束后,再自行加入异步轮询队列,所以定时器的回调函数执行顺序,主要与设定时间,和轮询队列决定;
8、TTFB:
TTFB是“最初的网络请求被发起”到“从服务器接收到第一个字节前”所花费的毫秒数。
9、timechart: (以可并行)
blocked: 预处理: 缓存查询, 网络阻塞
DNS lookup: 域名IP查询 (浏览器生命周期内只查询解析一次)
connect: TCP建立连接的时间
send: 请求开始,到发送完的时间
wait: 接收服务器响应的第一个字节的时间,可以代表服务器的处理的时间
Receive:从接收第一个字节的时间, 接收完成
TTFB:是“最初的网络请求被发起”到“从服务器接收到第一个字节前”所花费的毫秒数;即: DNS lookup~wait
network: 更网络相关的时间,TTFB+Rececive
**优化建议: **
https: 减少重定向
https: 减少请求,就会对上面的阶段减少,也会减少浏览器重绘重排;提升用户体验
图片合并: 减少服务器查找时间,IO时间
10、新版 Timing 表
Queued: 请求解析到的事件
Startlled : 开始进入线程的时间
Resource Scheduling 资源拍排程
Queueing: 排程中的时间
Connection Start
Stalled: 预处理时间
DNS Lookup: 域名映射IP时间
initial connection: 初始化连接时间
SSL: 安全套接字时间
Request sent 请求发送时间
Waiting(TTFB): 服务器查询时间
Content Download: 资源下载时间
11、浏览器5个常驻线程:
js引擎分配的线程
GUI渲染页面的线程
浏览器事件线程
浏览器定时器触发线程
浏览器http请求线程
其他插件线程