浏览器页面渲染机制
一、所谓浏览器渲染，是个怎样的过程？
【答】浏览器引擎读取、解析html、css、js代码，生成可视化、可交互页面的过程。
【简述】html、css、js ——> 页面
二、浏览器去哪里读取html、css、js？
【答】从url解析出的ip地址处，读取。
!!特别注意!!：浏览器读取的是是原始数据字节，而不是你编写的代码的实际字符。
【解析】数据以“数据包”的形式通过互联网发送，而数据包以字节为单位。一个字节Byte，等于8 Bit。即，“数据包”由0和1组成。
三、浏览器如何处理自己不认识的原始数据字节（Bytes）？
1.从 HTML 的原始字节到 DOM
Bytes => Characters(即我们所编写的字符代码，根据html文件的字符编码转换生成)
=> Tokens(解析器解析文本中的标签等内容，将文本字符解析为有意义的标记)
=> Node(节点：具有特定属性的不同对象)
=> DOM(链接各个节点)
2.从 CSS 的原始字节到 CSSOM
解析 HTML 的过程中，遇到 link 标签，浏览器会直接发送请求，获取指定的 CSS 。
Bytes => Characters => Tokens => Node => CSSOM
四、如何使用已经得到 DOM 对象和 CSSOM 对象？
DOM 和 CSSOM 树结构是两个独立的树结构。
DOM 中包含关于页面 HTML 元素关系的所有信息，而 CSSOM 则包含关于元素样式的信息。
浏览器将 DOM 和 CSSOM 组合，生成一棵渲染树。
【注】渲染树中不包含隐藏元素。如display:none;的元素，只存在于DOM中，不存在于渲染树中。由于结合了CSSOM的规则，因此渲染树不会构建隐藏元素。
五、生成渲染树后，做什么？
【答】布局 + 绘制。
布局：浏览器计算页面上每个对象的确切大小和位置。
绘制：确认大小和位置后，浏览器进行元素的绘制，页面得以呈现。
六、附：渲染性能相关
【优化网站的第一准则】
让最重要的 HTML 和 CSS 尽可能快地传递到客户端。
【关于阻塞渲染】
1.DOM 构造过程中遇到 link 标签，会直接请求 CSS 文件，DOM 的构造继续进行。
请求回 CSS 文件，CSSOM 构造就开始。DOM 和 CSSOM 的构造过程，没有相互阻塞。
2.引入 js ：
（1）每当浏览器遇到脚本标签时，DOM 构造就会暂停。整个 DOM 构建过程都将停止，直到脚本执行完成。（js执行，优先于DOM构建）
（2）当浏览器遇到脚本标签，而 CSSOM 还没有准备好时，Javascript 执行将会停止，直到 CSSOM 就绪。（CSSOM构建，优先于js执行）
DOM 构造在遇到脚本标签时会停止，但 CSSOM 不会发生这种情况。对于 CSSOM，JS 执行会等待。没有 CSSOM，就没有 JS 执行。
【关键渲染路径】
从接收 HTML、CSS 和 JS 字节到将它们转换为屏幕上的像素的整个过程称为关键渲染路径。优化网站性能就是优化关键渲染路径。
#参考：
