浏览器页面渲染机制

【答】浏览器引擎读取、解析html、css、js代码，生成可视化、可交互页面的过程。

【简述】html、css、js ——> 页面

【答】从url解析出的ip地址处，读取。

!!特别注意!!：浏览器读取的是是原始数据字节，而不是你编写的代码的实际字符。

【解析】数据以“数据包”的形式通过互联网发送，而数据包以字节为单位。一个字节Byte，等于8 Bit。即，“数据包”由0和1组成。

1.从 HTML 的原始字节到 DOM

Bytes => Characters(即我们所编写的字符代码，根据html文件的字符编码转换生成) 

=> Tokens(解析器解析文本中的标签等内容，将文本字符解析为有意义的标记)

=> Node(节点：具有特定属性的不同对象)

=> DOM(链接各个节点)

2.从 CSS 的原始字节到 CSSOM

解析 HTML 的过程中，遇到 link 标签，浏览器会直接发送请求，获取指定的 CSS 。

Bytes => Characters => Tokens => Node => 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 字节到将它们转换为屏幕上的像素的整个过程称为关键渲染路径。优化网站性能就是优化关键渲染路径。

#参考：

https://mp.weixin.qq.com/s?__biz=MzUxMzcxMzE5Ng==&mid=2247489674&idx=1&sn=7a73f9398be8024bebb6467e730c4d3b&chksm=f951adc9ce2624df6b09ed1da77751420ddd72eb2c0e95f456a8f2a834207704cfd05797da14&mpshare=1&scene=24&srcid=10146IVFb7pKqrp5PUfwOHzO&key=176169aca01be184ea280000b22c3af83676181e03a560dbdf52f5a2255d8e8baca4c7a146b17079054785a58cdce8ae142d651a142520d25c10a2c7bb536f54951c8d162bc95a4d1403070af27ff8db&ascene=0&uin=Mjg3MDc5MzAwMA%3D%3D&devicetype=iMac+MacBookPro13%2C2+OSX+OSX+10.12.1+build(16B2657)&version=12020010&nettype=WIFI&lang=zh_CN&fontScale=100&pass_ticket=Al6lGL1ZtXRoreFinnsEISGeg7KwVV1Xp8rXr09PfW9hN6%2FCK4Vdf9F863L3x530