记录一些知识，便于自己以后的学习，别无它用。
名词
关键渲染路径
浏览器收到服务器返回的 HTML，CSS，JavaScript 字节数据并对其进行解析和转变成像素的渲染过程被称为关键渲染路径。
浏览器渲染过程
1. 处理 HTML 标记并构造 DOM 树
字符编码
将 HTML 的原始字节数据转换为文件指定编码的字符
令牌化
浏览器会根据 HTML 规范将字符串转换成各种令牌
(如<html>、<p>、<body>这些标签和这些标签中的字符串和属性等都会被转化为令牌，每
个令牌具有特殊的含义和规则)
生成节点对象
每个令牌都会被转换成定义其属性和规则的对象，即节点对象
构建 DOM 树
将节点对象构建成 DOM 树型结构
2. 处理 CSS 标记并构造 CSSDOM 树
浏览器解析遇到 <link> 标签时，浏览器就开始解析 CSS 并构建 CSSOM 树
3. 将 DOM 与 CSSOM 合并成一个渲染树(Render Tree)
4. 根据渲染树来布局(Layout)，以计算每个节点的几何信息
从渲染树(Render Tree)的根节点开始遍历，采用盒子模型的模式来表示每个
节点与其他元素之间的距离，从而确定每个元素在屏幕内的位置大小
5. 绘制(Paint) DOM 节点
将渲染树(Render Tree)绘制成像素
重绘与回流
重绘(repaint)
将渲染树的每个节点都转换为屏幕上的实际像素
改变元素的背景色，文字颜色，边框颜色等不影响元素周围，布局的属性时，屏幕的一部分要
重画，但元素的几何尺寸没有变
回流(reflow)
计算节点在设备视口内的确切位置和几何信息
元素的变化影响到了布局，需要重新渲染便开始回流，浏览器从 root frame 开始递归往下，一
次计算所有的结点几何尺寸和位置。
回流必将重绘，重绘不一定回流
flush队列
因为每句 JavaScript 操作 DOM 都回流或者重绘，对于浏览器压力很大，所以浏览器会维护一个队列，用于存放回流和重绘的操作，等队列中的数量一定时或者一定时间后，会一次性批处理执行队列中的操作。
当获取布局信息的操作的时候，会强制队列刷新
offsetTop offsetLeft offsetWidth offsetHeight
scrollTop scrollLeft scrollWidth scrollHeight
clientTop clientLeft clientWidth clientHeight
getComputedSytle()
getBoundingClientRect
感谢以下博客的博主，将知识分享出来
https://juejin.im/post/5ca0c0abe51d4553a942c17d
https://juejin.im/post/5d136700f265da1b7c6128db
