【极客时间】浏览器工作原理与实践-0 工程师视角下的浏览器是怎样的

极客时间-浏览器工作原理与实践

https://time.geekbang.org/column/intro/100033601?tab=intro

0 工程师视角下的浏览器是怎样的

什么是浏览器

可以将浏览器理解为一个软件。

基于标准实现的软件

深入来看，浏览器是基于一套套标准实现的，包括：

• 页面标准
  • W3C
  • WHATWG
• 语言标准
  • ECMAScript
  • WebAssembly
• 网络标准
  • RFC-XXX

引入标准后，与其他软件有了本质区别。
浏览器开发厂商角度：严格按照标准实现浏览器，就可以执行标准的代码。
开发者角度：严格按照标准开发项目，就能实现同一套代码的跨平台应用。
因此，可以说浏览器是基于一套套标准的实现，外壳是浏览器，本质是标准的实现。

浏览器发展过程中，制定和实现了很多标准，但一部分标准没有得到广泛应用，如WebSQL，FileSystem，Application Cache.

WebSQL： 可以让开发者在页面中使用数据库SQL语言
FileSystem：可以让开发者在页面以文件的形式读写数据
Application Cache：可以让开发者将页面内容缓存在本地，如APP一样，实现没有网络的情况依然可以打开页面

以上标准看上去似乎很有用，但出于各种原因，并没有得到开发者认可，这意味着标准制定者和开发者没有达成共识，所以这些标准被放弃了或继续改造成几方都能接受的标准。如Application Cache经过改造，升级为了PWA.

被开发者认可的标准，如WebSocket，被广泛应用，意味着标准制定者和开发者达成了共识。

综上所述，得出如下结论：浏览器背后是标准，标准背后是共识。

因此，只要基于标准，就能开发出跨平台的应用。

特别是最近几年，浏览器所支持的标准越来越多，这些新标准可以满足越来越多的项目需求。

因此在选择项目方案时，前端基本是一个候选项。特别是PC段，浏览器基本上能解决大部分项目需求，无论是音乐、视频还是游戏，基本都能通过浏览器完成。

毫不夸张说，PC端浏览器已经处于绝对统治地位。而且这种地位还在不断加强。

对于移动设备，目前依然是军阀混战局面。本地应用，浏览器以及新框架层出不穷。

李兵认为最终胜出的可能是浏览器，因为1 开放基因，容易实现跨平台；2 浏览器技术不断迭代。

浏览器在升级过程中，使用场景和功能都在不断丰富，开发环境也在进化，各种技术层出不穷，让前端开发停不下学习的脚步。出现这种现象的原因，归结如下：

• 前端技术大爆炸
• 浏览器支持业务边界在增加
• 每种技术都在快速自我迭代更新

如何学习前端呢？

前端技术点多，更新速度快，如何以不变应万变呢（把握住不变的东西，以应付复杂的知识变迁呢）？

开始上升到哲学的高度。

教育就是忘记在学校所学的一切之后所剩下的东西。

李兵认为所剩下的东西：人的思维方式。

成熟的思维方式是建立在立体的知识体系网络之上的。

如何通过浏览器的学习建立前端知识体系网络呢

通过浏览器的学习建立前端知识体系网络。

浏览器5个核心部分

• 浏览器架构设计
• JavaScript引擎工作原理
• 页面工作原理
• 浏览器网络
• 浏览器安全

浏览器架构发展史

单进程浏览器
所有的页面和插件都是运行在一个进程里。
其中一个页面的卡顿，崩溃都会影响到其他页面。

现代浏览器
实现了多进程架构，每个页面都是运行在单独的进程里。此时的页面可以看成是一个单独的Web应用。

未来浏览器
会朝着面向服务架构SOA的方向演化。简单来说，除了页面会运行在单独进程中，其他基础服务也会独立出来，运行在单独的进程里，这也是现代操作系统的架构原型。

通过对浏览器架构学习和演化方向，建立对浏览器的宏观认知。

JavaScript引擎工作原理

JavaScript虽然语法与C语言很像，但背后机制完全不一样。
站在浏览器中JavaScript引擎的视角分析其代码的执行流程，那么很多问题如闭包，变量提升，this，词法环境等疑难问题也就迎刃而解了。在此基础上，结合浏览器的事件循环机制，理解回调，微任务，宏任务，Promise等概念也会非常轻松。

页面工作原理

页面是浏览器的核心，浏览器很多功能点都是服务于页面的。
前端工程师所做的一切都是为了最终的页面展示。
要充分理解页面，需把握2点：

• 事件循环系统

浏览器页面运行在单进程中，要让不同类型的任务在主进程中有条不紊地执行，需要有一个事件循环系统负责接收和调度不同的事件。

上述引用第一句话有歧义，
错误表述：“浏览器页面运行在单进程中” ❌
正确表述：
现代浏览器采用多进程架构（每个标签页独立进程）。
每个渲染进程的 主线程是单线程运行 的，依赖事件循环调度任务。✅
注意：渲染进程中还有其他线程（如合成线程、Worker 线程）并行工作，主线程是单线程工作模式，其他线程不一定需要事件循环。

循环系统是页面的心脏，如果深入理解了Web页面中的事件循环系统，就可以从更高维度理解页面是如何运作的，并加深对页面中异步事件的理解。

• 构建页面的核心流程

从数据接收到页面显示的整个核心流程，那么页面性能问题就是小菜一碟

浏览器网络

通过浏览器页面数据请求过程，向下理解http，cookie，cache，tcp，dns和管线化等概念，向上可以串联https，http2，http3，WebSocket和页面安全等知识点。

浏览器安全

为什么会谈浏览器安全，因为与浏览器打交道的内容都是通过网络获取的，而浏览器对网络的内容默认态度就是不信任。因此安全十分重要，对可能存在危险的地方要重点防护。不安全的地方有3个：

• 网络传输过程，数据可能被篡改或窃取
• 操作系统层面：恶意Web应用可以通过浏览器漏洞攻击操作系统
• 通过XSS等手段获取页面信息

理解不安全根源，就可以明白沙箱、HTTPS, XSS, CSRF, 同源策略等

以上五部分是前端核心知识，还有其他围绕核心知识展开的零散知识，比如React, Vue, CSS, HTML, WebAssembly, Build Tools, TypeScript, Web移动开发，Web桌面开发。

学习计划：3月学完浏览器工作原理，共46讲+介绍

时间	预期完成课程	是否完成
2.27	入门介绍	https://blog.youkuaiyun.com/qq_37581764/article/details/145890276?spm=1001.2014.3001.5501
3.1 六	0-2	https://editor.youkuaiyun.com/md?articleId=145916346
3.2 日	3-5	√
3.3	6	√
3.4	7	√
3.5 三	8-9	√
3.6		×
3.7		×
3.8 六	10-13	×
3.9 日	14-17	×
3.10		×
3.11		×
3.12 三	18-19	×
3.13		×
3.14		×
3.15 六	20-23	×
3.16 日	24-27	×
3.17		×
3.18		×
3.19 三	28-29	×
3.20		×
3.21		×
3.22 六	30-33	×
3.23 日	34-37	×
3.24		×
3.25		×
3.26 三	38-39	×
3.27 四		×
3.28 五		×
3.29 六	40-43	×
3.30 日	44-46	×