浏览器内核：
浏览器UI界面
浏览器引擎 -> data persistence
渲染引擎： 网络、js解释器(引擎)、UI backend、css解释器、html解释器
// js解释器，常见的V8引擎
浏览器架构：多进程，多线程模型。
基于blink内核的chromium浏览器为例，常见进程：
1、browser进程：浏览器主进程，负责浏览器界面和各页面的管理，打开浏览器就是启动了这个一个进程。
2、renderer进程：负责页面渲染，一个页面对应一个Renderer进程。
3、GPU进程： 如果页面启动了硬件加速，浏览器就会开启一个GPU进程，最多只能有一个。
浏览器每个进程内部有多个线程，比如保持用户界面的高度响应，保证ui线程不被其他阻碍而影响用户操作。
// js这门语言，就是单线程脚本，由于线程阻塞，如下定时器的console不会被输出：
setTimeout(function () {
console.log('是否输出？');
}, 0);
while (true) {
var a = 1;
}
以上执行过程，需要将同步和异步的两类代码分别压入堆栈和异步队列中，通过Event Loop实现异步操作。
任务队列 -> 函数执行堆栈 -> 需要异步函数 - > 异步处理模块 -> 异步到达触发条件后进行相应回调，根据同步模块类型，压入指定任务队列。
浏览器渲染机制： 布局，绘制，组合视图。
网页dom树和事件机制：
RenderLayer和RenderBlock和RenderObject，RenderLayer对多关系，浏览器内核会把dom节点的相关信息renderObject保存起来，
生成renderLayer包括：
document节点对应renderView节点，
dom树中子女节点renderBlock节点，
显示指定css位置对节点(position: absolute或fixed)，具有透明效果，css 3d属性的节点，canvas元素或videl元素的节点。
renderLayer的节点使用可以有效减小网页结构的复杂程度，能减小重新渲染的开销。
浏览器渲染方式：软件渲染（cpu）、硬件渲染（GPU）
cpu渲染：浏览器发生布局，绘制阶段；如果renderObject更新改变，相关联的renderObject发生改变而不是整个layer的Object发生改变，成为cpu缓存。
GPU渲染：发生组合阶段，如果页面某个合成层发生位置的偏移、缩放、透明度等操作，GPU会把更新的合成层进行相应的变化送入compositor(合成器)重新合成即可。
PS：书写一个div位置从left: 0变化到left: 200px的动画，使他不触发重排和重绘。
重新一帧的时候，需要经历布局，绘制，组合三个阶段。layout和paint时间占比较高。
// 如果要减少布局和绘制，则最佳解决是在重新渲染触发硬件加速而跳过重排和重绘的过程。
dom tree -> render tree（渲染树，只显示display: 非none） -> layout tree （布局树，经过盒子模型的树) -> paint ->
composite layer
composite layer: 合成层, 当渲染树上的节点涂鸦完毕后生成位图,浏览器把此位图从CPU运输到GPU。
浏览器解析过程
https://www.cnblogs.com/quincyWang/p/6932382.html
js性能检测：算法和时间和空间复杂度
工具：benchmark.js、jsPerf
详细后续补充…