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

输入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：从接收第一个字节的时间， 接收完成

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！