浏览器的渲染过程、渲染原理
客户端渲染主流程：解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树；
步骤：
1...处理 HTML 标记并构建 DOM 树。
2...处理 CSS 标记并构建 CSSOM 树。
3...将DOM与CSSOM合并成一个渲染树。
4...根据渲染树来布局，以计算每个节点的几何信息(layout)。
5...将各个节点绘制到屏幕上(painting)。
需要明白，这五个步骤并不一定一次性顺序完成。
如果 DOM 或 CSSOM 被修改，以上过程需要重复执行，这样才能计算出哪些像素需要在屏幕上进行重新渲染。
实际页面中，CSS 与 JavaScript 往往会多次修改 DOM 和 CSSOM
-------------------------------------------------------------------------------------------
阻塞渲染：CSS 与 JavaScript
谈论资源的阻塞时，我们要清楚，现代浏览器总是并行加载资源。例如，当 HTML 解析器（HTML Parser）被脚本阻塞时，
解析器虽然会停止构建 DOM，但仍会识别该脚本后面的资源，并进行预加载。
同时，由于下面两点：
默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。
JavaScript 不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。
存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执行和 DOM 构建。另外：
当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
JavaScript 可以查询和修改 DOM 与 CSSOM。
CSSOM 构建时，JavaScript 执行将暂停，直至 CSSOM 就绪。
所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：
CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
JavaScript 应尽量少影响 DOM 的构建。
-------------------------------------------------------------------------------------------
defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。
整个 document 解析完毕且 defer-script 也加载完成之后（这两件事情的顺序无关），会执行所有由 defer-script 加载的 JavaScript 代码，然后触发 DOMContentLoaded 事件。
defer 不会改变 script 中代码的执行顺序，defer 与相比普通 script，有两点区别：
载入 JavaScript 文件时不阻塞 HTML 的解析，
执行阶段被放到 HTML 标签解析完成之后。（针对有src属性的 script 标签）
-------------------------------------------------------------------------------------------
sync属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行——无论此刻是 HTML 解析阶段还是 DOMContentLoaded 触发之后。
需要注意的是，这种方式加载的 JavaScript 依然会阻塞 load 事件。换句话说，async-script 可能在 DOMContentLoaded 触发之前或之后执行，但一定在 load 触发之前执行。
多个 async-script 的执行顺序是不确定的。值得注意的是，向 document 动态添加 script 标签时，async 属性默认是 true（针对有src属性的 script 标签）
-------------------------------------------------------------------------------------------
使用 document.createElement 创建的 script 默认是异步的，示例如下。
console.log(document.createElement("script").async); // true
所以，通过动态添加 script 标签引入 JavaScript 文件默认是不会阻塞页面的。如果想同步执行，需要将 async 属性人为设置为 false。
-------------------------------------------------------------------------------------------
DOM Tree：浏览器将HTML解析成树形的数据结构。
1...CSS Rule Tree：浏览器将CSS解析成树形的数据结构。
2...Render Tree: DOM和CSSOM合并后生成Render Tree。
3...layout: 有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系，从而去计算出每个节点在屏幕中的位置。
4...painting: 按照算出来的规则，通过显卡，把内容画到屏幕上。
reflow（回流）：当浏览器发现某个部分发生了点变化影响了布局，需要倒回去重新渲染，内行称这个回退的过程叫 reflow。reflow 会从 <html> 这个 root frame 开始递归往下，
依次计算所有的结点几何尺寸和位置。reflow 几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显 示与隐藏）等，都将引起浏览器的 reflow。
鼠标滑过、点击……只要这些行为引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。
通常我们都无法预估浏览器到底会 reflow 哪一部分的代码，它们都彼此相互影响着。
-------------------------------------------------------------------------------------------
repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。
-------------------------------------------------------------------------------------------
尽管Webkit(谷歌之类)与Gecko(火狐)使用略微不同的术语，这个过程还是基本相同的，如下：
1.浏览器会将HTML解析成一个DOM树，DOM 树的构建过程是一个深度遍历过程：当前节点的所有子节点都构建好后才会去构建当前节点的下一个兄弟节点。
2.将CSS解析成 CSS Rule Tree 。
3.根据DOM树和CSSOM来构造 Rendering Tree。注意：Rendering Tree 渲染树并不等同于 DOM 树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
4.有了Render Tree，浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为layout，顾名思义就是计算出每个节点在屏幕中的位置。
5.再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。
它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。
