浏览器工作原理

Posted 2021-03-06 samfung

先从进程、线程说起

形象一点比喻，比如一开一家饭店，那就是一个进程，饭店里只请一个员工干活那就是单线程，如果有多个员工干活那就是多线程。
通常来说，打开一个程序就是开了一个进程（也有些程序是多进程的），系统会给它开辟一块内存用于运行。
对于进程线程专业一点说辞：

• 进程是cpu资源分配的最小单位（是能拥有资源和独立运行的最小单位）
• 线程是cpu调度的最小单位（线程是建立在进程的基础上的一次程序运行单位，一个进程中可以有多个线程）
• 不同进程之间也可以通信，不过代价较大
• 现在，一般通用的叫法：单线程与多线程，都是指在一个进程内的单和多。（所以核心还是得属于一个进程才行）

浏览器是多进程的

浏览器是多进程的。chrome中 更多工具 => 任务管理器 查看。
浏览器之所以能够运行，是因为系统给它的进程分配了资源（cpu、内存）
简单点理解，每打开一个Tab页，就相当于创建了一个独立的浏览器进程（并不绝对，譬如打开多个空白标签页后，会发现多个空白标签页被合并成了一个进程）。
浏览器都有哪些进程：

Browser进程

浏览器的主进程（负责协调、主控），只有一个。作用有

• 负责浏览器界面显示，与用户交互。如前进，后退等
• 负责各个页面的管理，创建和销毁其他进程
• 将Renderer进程得到的内存中的Bitmap，绘制到用户界面上
• 网络资源的管理，下载等

第三方插件进程

每种类型的插件对应一个进程，仅当使用该插件时才创建

GPU进程

最多一个，用于3D绘制等

浏览器渲染进程（浏览器内核）

（Renderer进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为

• 页面渲染，脚本执行，事件处理等

浏览器多进程的好处

某个扩展插件或者标签页面出问题不至于影响到整个浏览器。

浏览器内核（渲染进程 - 重点）

对于前端来说，主要关注的是渲染进程，因为页面的渲染，JS的执行，事件的循环，都在这个进程内进行。
该进程内的一些主要线程：

1、GUI渲染线程

• 负责渲染浏览器界面，解析html，CSS，构建DOM树和RenderObject树，布局和绘制等。
• 当界面需要重绘（Repaint）或由于某种操作引发回流(reflow)时，该线程就会执行
• 注意，GUI渲染线程与JS引擎线程是互斥的，当JS引擎执行时GUI线程会被挂起（相当于被冻结了），GUI更新会被保存在一个队列中等到JS引擎空闲时立即被执行。（所以说JS执行会阻塞HTML解析）

2、JS引擎线程

• 也称为JS内核，负责处理javascript脚本程序。（例如V8引擎）
• JS引擎线程负责解析Javascript脚本，运行代码。
• JS引擎一直等待着任务队列中任务的到来，然后加以处理，一个Tab页（renderer进程）中无论什么时候都只有一个JS线程在运行JS程序（JS单线程）
• 同样注意，GUI渲染线程与JS引擎线程是互斥的，所以如果JS执行的时间过长，这样就会造成页面的渲染不连贯，导致页面渲染加载阻塞。

3、事件触发线程

• 归属于浏览器而不是JS引擎，用来控制事件循环（可以理解，JS引擎自己都忙不过来，需要浏览器另开线程协助）
• 当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中
• 当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
• 注意，由于JS的单线程关系，所以这些待处理队列中的事件都得排队等待JS引擎处理（当JS引擎空闲时才会去执行）

4、定时触发器线程

• 传说中的setInterval与setTimeout所在线程
• 浏览器定时计数器并不是由JavaScript引擎计数的,（因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确）
• 因此通过单独线程来计时并触发定时（计时完毕后，添加到事件队列中，等待JS引擎空闲后执行）
• 注意，W3C在HTML标准中规定，规定要求setTimeout中低于4ms的时间间隔算为4ms。

5、异步http请求线程

• 在XMLHttpRequest在连接后是通过浏览器新开一个线程请求
• 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

页面渲染

不同浏览器的渲染引擎

• Firefox：Gecko
• Safari：Webkit
• Chrome：Blink（旧版本Webkit）
• IE：Trident
• Edge：EdgeHTML

正常网页加载流程是这样的

1. 浏览器一边下载HTML网页，一边开始解析。也就是说，不等到下载完就开始解析。
2. 解析过程中，浏览器发现 script 元素，就暂停解析，把页面渲染的控制权交给 JavaScript 引擎。（script标签的defer、async属性，见下面的外链）
3. 如果 script 元素引用外部脚本，就下载该脚本再执行，否则直接执行代码。
4. JavaScript 引擎执行完毕，控制权交还给渲染引擎，恢复往下解析HTML网页。
5. HTML代码解析为DOM，CSS代码解析为CSSOM（CSS Object Model）。
6. DOM和CSSOM合成渲染树（render tree）。
7. 计算渲染树布局（layout），将渲染树绘制到屏幕。

HTML解析

回流重绘

你真的了解回流重绘吗？