浏览器原理

浏览器构成

基本概念：

1、浏览器分类（五个主流）：chrome（内核：blink基于webkit）、
safari（webkit）、firefox（gecko）、ie（triddent）、opera（blink）

2、浏览器的构成：用户界面、浏览器引擎（查询与操作渲染引擎的接口）、渲染引擎、js解析、数据存储、网络（请求）、ui后端

浏览器内核构成：渲染引擎和js引擎（但是由于js引擎越来越独立，所以浏览器内核就单指渲染引擎）

渲染引擎
作用：解析html并显示出来
流程：解析html以构建dom树 -> 构建render树 -> layout布局render树 -> 绘制render树
dom树：html文档中的元素及其节点构成
render树：可见元素（比如head元素就是不可见）及其盒子、样式（displaynone属于不可见样式）

js引擎
这里有个nodejs引擎，这是基于谷歌浏览器js引擎（v8引擎）进行的封装）

3、浏览器作用：将用户选择的资源呈现出来

浏览器中的进程与线程

比喻：cpu-工厂 进程-车间 线程-工人

浏览器进程：
浏览器有多个进程，一个主进程，如下：
1、browser进程：主进程，一个，作用协调、主控
2、浏览器渲染进程：每打开一个tab网页就相当于开了一个渲染进程实例，进程之间相互独立，不共享资源
3、第三方插件进程：一个，每一类插件对应一个进程，仅当使用该插件时才创建
4、GPU进程：3D绘制

多进程的优缺点：如果浏览器是单进程，那么某个 Tab 页崩溃了，就影响了整个浏览器，体验有多差；同理如果是单进程，插件崩溃了也会影响整个浏览器；当然内存等资源消耗也会更大

浏览器进程与浏览器内核进程的通信：
a、Browser进程收到用户获取页面内容请求，将该任务通过RendererHost接口传递给Render进程
b、Renderer进程的Renderer接口收到消息，交给渲染线程，然后开始渲染
c、渲染线程接收请求，加载网页并渲染网页，可能需要Browser进程获取资源和需要GPU进程来帮助渲染，会有JS线程操作DOM（回流、重绘）
d、最后Render进程将结果传递给Browser进程
e、Browser进程接收到结果并将结果绘制出来

浏览器中的线程：
确切的应该是浏览器内核的线程，即渲染进程的线程，多个，每个tab页是有多线程的，线程如下：
1、GUI渲染线程
作用：将html文件渲染到浏览器界面
流程：构建 DOM 树、构建渲染树、布局、绘制、渲染层合成（composite） ，具体如下：
a、构建dom树：解析html和css，将元素与其节点构建DOM树和CSSOM树（css是由下载线程异步下载的，不会阻塞html解析，但是会阻塞render树和js解析，所以优化上把link标签的css放在顶部）
b、构建render树：根据DOM树从根节点开始遍历可见节点；针对每个可见节点寻找CSSOM树中的几何属性样式；合成构建render树
c、布局（layout）：根据构建好的render树进行位置和大小的计算（回流），根据计算好的几何属性进行layout布局
d、绘制（Paint）：遍历渲染树，调用渲染器的 paint() 方法将布局中的节点转换成界面上的实际像素。该过程有一些不影响布局的 CSS 修改引起的屏幕局部重画，称为重绘（Repaint）。绘制过程是在多个层上完成的，这些层称为渲染层（RenderLayer）。
e、渲染层合成（composite）：渲染层根据层叠顺序合并生成位图，交给显卡展示在屏幕上