前端应该掌握的浏览器知识

一、浏览器的主要功能

浏览器的主要功能就是向服务器发出请求，在浏览器窗口中展示您想要访问的网络资源。这里所说的资源一般是指 HTML 文档，也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI(统一资源标示符)指定。

二、浏览器的主要结构

• 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的你请求的页面外，其他显示的各个部分都属于用户界面。
• 浏览器引擎 - 在用户界面和渲染引擎之间传送指令。
• 渲染引擎 - 负责显示请求的内容。如果请求的内容是 HTML，它就负责解析 HTML 和 CSS 内容，并将解析后的内容显示在屏幕上。
• 网络 - 用于网络调用，比如 HTTP 请求。其接口与平台无关，并为所有平台提供底层实现。
• 用户界面后端 - 用于绘制基本的窗口小部件，比如组合框和窗口。其公开了与平台无关的通用接口，而在底层使用操作系统的用户界面方法。
• JavaScript 解释器。用于解析和执行 JavaScript 代码，比如chrome的javascript解释器是V8。
• 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据，例如 Cookie。新的 HTML 规范
  (HTML5)定义了“网络数据库”，这是一个完整（但是轻便）的浏览器内数据库。

三、浏览器的工作流程

• 地址栏输入地址触发网络请求，获取到html文件。
• HTML解析器解析HTML文件构建成为DOM树。
• 遇到CSS通过CSS解析器解析成为CSSOM。
• 遇到JS通过JS解析器解析。
• DOM Tree和CSSOM构建呈现树(6、7两个步骤)。
• 呈现树根据结构样式确定节点的位置(布局或者回流) ----回流。
• 确定好位置以后，根据外观样式绘制 ----重绘。
• 通过UI后台和用户界面组件把内容显示到浏览器主窗口上。

四、浏览器的进程和线程

浏览器的多进程包括：
1.Browser进程：浏览器的主进程（负责协调、主控），只有一个。作用有：

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

2.第三方插件进程：每种类型的插件对应一个进程，仅当使用该插件时才创建
3.GPU进程：最多一个，用于3D绘制等
4.浏览器渲染进程（浏览器内核）（Render进程，内部是多线程的）：默认每个Tab页面一个进程，互不影响。主要作用为页面渲染，脚本执行，事件处理等。
浏览器的多线程包括：
1.GUI渲染线程

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

2.JS引擎线程

• 也称为JS内核，负责处理Javascript脚本程序。（例如V8引擎）
• JS引擎线程负责解析Javascript脚本，运行代码。
• 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引擎执行。

五、 Browser进程和浏览器内核（Render进程）的通信过程

1. Browser进程收到用户请求，首先需要获取页面内容（譬如通过网络下载资源），随后将该任务通过RendererHost接口传递给Render进程
2. Renderer进程的Renderer接口收到消息，简单解释后，交给渲染线程，然后开始渲染
   • 渲染线程接收请求，加载网页并渲染网页，这其中可能需要Browser进程获取资源和需要GPU进程来帮助渲染
   • 当然可能会有JS线程操作DOM（这样可能会造成回流并重绘）
   • 最后Render进程将结果传递给Browser进程
3. Browser进程接收到结果并将结果绘制出来

六、多进程的优势

相于单进程浏览器，多进程有如下优点：

• 避免单个page crash影响整个浏览器
• 避免第三插件crash影响整个浏览器
• 多进程充分利多核优势
• 放便使沙盒模型隔离插件等进程，提浏览器稳定性

七、 GUI渲染线程与JS引擎线程互斥

由于JavaScript是可操纵DOM的，如果在修改这些元素属性同时渲染界面（即JS线程和UI线程同时运行），那么渲染线程前后获得的元素数据就可能不一致了。 因此为了防止渲染出现不可预期的结果，浏览器设置GUI渲染线程与JS引擎为互斥的关系，当JS引擎执行时GUI线程会被挂起， GUI更新则会被保存在一个队列中等到JS引擎线程空闲时立即被执行。