html笔记_2_浏览器渲染过程

浏览器渲染

从 HTML 到 DOM

1. 浏览器通过请求获取页面 字节流， 对字节流进行解码成字符流

2. 输入流预处理，将字符转换成统一格式，例如对\n进行处理，最终生成规范化的字符流数据

3. 令牌化，将字符数据转换成令牌（Token）,同时解析 HTML 生成 DON 树

   • 令牌化

     每次接收一个或多个字符，同时更具当前状态和字符来更新下一个状态，不同状态相同数据可能产生不同结果

     • 补充：如果遇到 script 标签，如果是内联代码，直接交给 Js 脚本引擎，等待 Js 指向完成后再启用渲染引擎继续解析，如果脚本内容中调用了改变 DOM 结构的函数，如 document.write() 时，渲染引擎会回到第二步，将代码加入字符流，重新进行解析，如果是外链则会根据标签属性进行操作，如async、defer等等

4. 构建 DOM 树

   • 浏览器在渲染解析的同时会创建一个 Document 对象，Document 对象会作为根节点，被不断的进行修改和扩充，标记步骤产生的令牌会被送到树构建器，HTML5 标准中定义了每种令牌对应的 DOM 元素，树构建器会根据不同的令牌对 DOM 树进行处理
   • 为了纠正元素嵌套错误，可能存在未关闭的标签，树构建器创建新的 DOM 元素还会被插入到一个开放的元素栈中
   • 补充：CSS 到 CSSOM，css 解析过程很 html 解析过程一致，最终也会生成 树状结构

CSSOM树的结点具有继承属性，子节点会先继承父节点属性，再进行覆盖

完整的 CSSOM 树，包括浏览器默认的样式

从 DOM 到渲染

5. 构建渲染树

   • DOM 树包含的结构和内容与 CSSOM 树包含的样式规则都是独立的，为了方便渲染，先要将两者合并成一棵渲染树
   • 从 DOM 树根节点开始遍历，在 CSSOM 树找到对应节点的样式
   • 遍历过 程中忽略不需要渲染的节点，如脚本标记，以及不可见节点，display:none 同时将一些需要渲染的伪类加入到渲染树内

6. 布局

   • 布局就是计算元素的大小和位置
   • 计算布局是一个复杂的操作，不同的因素会影响到元素的生成，生成的元素也会影响下一元素的生成
   • 布局完成后会输出对应的 盒模型 会将相对值转换成实际像素值

7. 绘制

   • 绘制就是将渲染树中的每个节点转换成屏幕上实际像素的过程
   • 注意，如果没有弄清楚绘制的顺序，那么可能会导致页面错误渲染
   • 绘制过程的第一步就是遍历布局输入，生成绘制记录，让后渲染引擎根据绘制记录去渲染
   • 对于无动画效果的情况，只需考虑空间维度，生成不同的图层，然后将图层进行合成，形成最终页面
   • 绘制过程不是一成不变的