浏览器的工作原理

参考https://segmentfault.com/a/1190000017019877这篇好文进行整理

浏览器的组成

用户界面：除了浏览器主窗口显示用户请求的页面外，其他显示的各个部分都属于用户界面。
用户界面后台：用于绘制基本的窗口小部件。
浏览器引擎：在用户界面和渲染引擎之间传递指令。
渲染引擎：负责显示请求的内容。
网络：用于网络调用。
JavaScript解释器：用于解析和执行 JavaScript 代码，比如chrome的javascript解释器是V8。
数据存储：浏览器需要在硬盘上保存各种数据，例如cookie。

浏览器进程与线程

（1）进程是是操作系统进行资源分配和调度的一个独立单位。是能拥有资源和独立运行的最小单位，也是程序执行的最小单位。每个进程有各自独立的一块内存，使得各个进程之间内存地址相互隔离。
线程是程序执行中一个单一的顺序控制流程，是程序执行流的最小单元。
进程和线程的关系：一个进程可以有多个线程。线程之间可以共享资源，而进程之间不可以。
（2）浏览器的进程：浏览器是多进程的，但有一个主控进程，每开一个页面就会开一个进程。

Browser进程：浏览器的主进程（负责协调、主控），只有一个
第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件的时候才创建
GPU进程：最多一个，用于3D绘制
浏览器渲染进程（内核）：默认每个tab页面一个进程，互不影响，控制页面渲染，脚本执行，事件处理等（有时会优化，如多个空白tab会合成一个进程）

（3）浏览器的线程：

• GUI渲染线程：负责渲染浏览器界面HTML元素,当界面需要重绘(Repaint)或由于某种操作引发回流(reflow)时,该线程就会执行。在Javascript引擎运行脚本期间,GUI渲染线程都是处于挂起状态的,也就是说被”冻结”了。
• Javascript引擎线程：主要负责处理Javascript脚本程序，例如V8引擎。
• 事件触发线程：当一个事件被触发时该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理。
• 定时触发器线程：浏览器定时计数器并不是由JavaScript引擎计数的, 因为JavaScript引擎是单线程的, 如果处于阻塞线程状态就会影响记计时的准确, 因此通过单独线程来计时并触发定时是更为合理的方案。
• 网络请求线程：在XMLHttpRequest在连接后是通过浏览器新开一个线程请求， 将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件放到 JavaScript引擎的处理队列中等待处理。

渲染引擎

常见的浏览器渲染引擎有两种：一是firefox使用的Gecko，这是Mozilla公司“自制”的渲染引擎。另一个是safari和chrome使用的都是webkit。
渲染过程：
渲染过程看这里讲的非常完善
渲染过程2