web前端之浏览器篇——知识汇总

一、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请求线程

其他插件线程