Web前端最全web前端之浏览器篇——知识汇总(1)，前端面试常见算法

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

• 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

• 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

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个常驻线程：

---

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。