【浏览器是如何运作的】笔记
【浏览器是如何运作的】笔记
Juns【浏览器是如何运作的】笔记
看了一个视频，感觉 UP 分享的质量很高，简要记录一下视频内容，这是视频地址：【干货】浏览器是如何运作的？
浏览器历史
这里不多说，让我惊讶的一点是，Chrome 的内核 Chromeium，是基于苹果开源的 Webkit 开发的 🥸，不得不说，🍎 真 🐮。
进程
浏览器有多个进程，进程之间通过 IPC(进程间通信管道)来通信。
早期的浏览器是单进程的，这也就引发了很多问题：
- 页面不稳定: 其中一个线程卡死可能导致整个进程出问题，单标签页卡死 -> 浏览器卡死
- 不安全: 浏览器之间共享数据，JS 线程可以随意访问浏览器进程内的所有数据
- 不流畅: 一个进程负责多种
为了解决这些问题，看在采用了多进程的浏览器结构
- 浏览器进程：控制地址栏、书签、前进后退，负责与其他进程协调工作
- 网络进程：收发网络请求
- GPU 进程：渲染浏览器界面
- 插件进程：控制管理插件
- 渲染器进程：渲染 tab 标签页内的所有内容
输入 URL 后的事
视频主要分析的是网络线程获取到数据之后发生的事情。
首先网络线程通过 SafeBrowsing 检查 URL 是否安全。
通过后通知 UI 线程准备好了，然后 UI 线程创建一个渲染器进程来渲染页面，浏览器进程通过 IPC 把数据传给渲染器进程。
渲染器进程
他的核心目的就是把数据渲染成可交互的 web 页面
主线程解析 HTML，构造 DOM:
- HTML -> Tokeniser：通过词法分析将 html 内容解析成多个标记
- Tokeniser -> Tree Construction：通过语法分析将标记构造成 DOM 树
图片/css 不会阻塞 html 解析，因为他们不会影响 DOM 的生成，但是 script 可能会。
为什么不跳过 js 加载？因为 js 中可能修改 html，让之前渲染的 html 没意义了，这里可以引申到
async、defer
现在获得了 DOM Tree，然后需要得知样式，就需要解析 CSS 来获得。
然后我们还需要知道每个节点的位置以及占用区域，这就需要 Layout。
通过遍历 DOM 和计算好的样式，来生成 Layout Tree。
DOM Tree 和 Layout Tree 中的节点并不是一一对应的，设置的 display:none 的节点不会出现在 Layout Tree 中。
比如::before 伪元素，他是在 Layout Tree 中的，但是不在 DOM Tree 中。
然后我们需要知道以什么顺序来绘制(paint)节点。
为了保证层级正确，主线程会遍历 Layout Tree 创建一个绘制记录表(Paint Record)，这个阶段就叫绘制，paint。
然后会通过栅格线程渲染出来，这里就省略了。
总结
文章少了一些，具体详细的还是看一下视频比较好，UP 讲的较为综合，范围也比较广。
这个视频可以用来解释 从URL到页面中渲染数据的过程，是很加分的 😆
