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

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

**优化建议： \ 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 **

https： 减少重定向

https： 减少请求，就会对上面的阶段减少，也会减少浏览器重绘重排；提升用户体验

图片合并： 减少服务器查找时间，IO时间

10、新版 Timing 表

---