web前端之浏览器： 知识汇总

一、URL到页面

准备阶段：

输入URL，Enter进入查找

浏览器在本地查找host文件，匹配对应的IP； 找到返回浏览器并缓存

没有，则进入路由查找； 找到返回浏览器并缓存

再没有，再进入公网DNS根目录 ； 找到返回浏览器并缓存

进入，等待发送请求，建立tcp/ip 传输连接， 若没有等候的请求，则直接发送

服务器阶段：

根据请求，查找数据，返回数据

渲染阶段：

逐行解析HTML， 遇到同步的请求代码，则发送数据请求，cssLink， js， 图片，视频等；

构建htmlDOM-tree， CSSDOM ，

render-tree

2、html页面渲染:

1. 发送请求，服务器返回HTML，浏览器解析HTML，发出相应css的和js请求
   • html 不是缓存的
2. css下载完成，构建dom树，构建cssDOM完成后，结合DOM生成Rendering Tree，
   • css是由单独的下载线程异步下载的
   • css加载不会阻塞DOM树的解析
   • css加载会阻塞DOM树的渲染
   • css加载会阻塞后面js语句的执行
3. js下载完成，操作DOM，更新DOM；在html解析过程中或是DOM和CSSDOM结构构建中，同步请求加载JS，解析js都会阻塞浏览器的构和渲染
   • 解析到js会, js引擎会使html解析线程暂停，html页面停止解析
   • js请求加载完毕， js执行完毕， js引擎停止， html线程继续工作解析

3、异步请求，页面更新

重排， 重绘

4、web浏览器引擎

1. 浏览器内核（浏览器渲染引擎）：

浏览器内核可以分为这四种：Trident（IE）、Gecko（火狐）、Blink（Chrome、Opera）、Webkit（Safari）

1. 浏览器js引擎

5、浏览器本地存储

indexDB， storage，cookie

6、浏览器缓存

解析url， 查找缓存，发送请求

6.1、解析url，验证是否有缓存标识信息

1. 有，进一步验证是否过期
2. 未过期，则返回缓存的资源

6.2 查找缓存：

• Service Worker （浏览器独立线程）
• Memory Cache （内存中）
• Disk Cache （磁盘）
• Push Cache （推送缓存，session）

7、浏览器的事件轮询

1. 同步任务，解析执行语句
2. 同步执行栈空， 去轮询异步队列
3. 检查微任务
4. 检查宏任务
5. 一般性异步任务

定时器： 解析时，是现在浏览器中开辟一个独立计时环境， 在设定时间结束后，再自行加入异步轮询队列，所以定时器的回调函数执行顺序，主要与设定时间，和轮询队列决定；

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

? 其他插件线程

web前端之浏览器： 知识汇总

原文：https://www.cnblogs.com/lionker/p/11626889.html