浏览器渲染原理

Upward
1,314 阅读3分钟

浏览器渲染原理

构建DOM树

什么是DOM树

  • HTML编程的接口

    • 提供了文档对文档结构化的表述
    • 定义了一种方式去改变文档结构、样式和内容

为什么要构建DOM树

  • 浏览器无法直接理解HTML结构，需要解析成DOM树浏览器才能理解。

DOM解析的特点

  • 不会被阻塞

DOM树存在哪？

  • DOM树存在内存中，且可以通过JS修改

    • 可以通过JS拿到DOM树内容操控DOM

如何构建一颗DOM树

  • 字节流转换成HTML结构
  • 将HTML结构解析成一个一个的token
  • 将token解析成一个一个node节点
  • 最后根据节点构建DOM树

preview

token的拆分

token是浏览器最小有意义的单元

  • token的类型

    • Start Tag
    • EndTag
    • Comment
    • Character
    • Uninitialized
    • DOCTYPE
    • EndOfFile

单个是如何变成token的（状态机）

  • 从浏览器网络进程接收字符
  • 没接收一个字符判断一次状态，在以上七个token中跳转
  • 最后匹配一个token
  • 生成token.

token如何成为DOM树

  • 解析开始维护一个token栈，将StartTaghtml，和startTagdocument压入栈
  • 然后将解析的token放入栈中，并创建dom树
  • 当解析完成一个标签时，弹出栈
  • 直至startTagDocument弹出栈

token-dom.png

构建CSSOM Tree

生成stylesheets

  • 渲染引擎接收到CSS文本，会将css结构转化为浏览器理解的结构，styleSheets,和DOM一样可以通过程序进行修改，在内存中。

style-sheet.png

标准化样式内容

  • 转化样式表中的内容使其标准化（em -> px, rem -> px, color -> rgb）(变成浏览器理解的内容)

标准化.png

计算每个元素的最终样式

  • 根据样式的继承规则和层叠规则计算属性的最终样式，生成CSSOM

构建布局树

创建布局树

  • DOM树包含所有节点，而我们呢的布局树只需要看得见的（没有设置display:none）元素的dom结构，所以创建一颗独立的树结构，只含有可见节点。

布局计算

  • 根据CSSOM计算元素的样式，计算元素的坐标位置。

总结

遍历DOM树，计算元素坐标位置。

布局树.png

构建图层树

分层

  • 层叠上下文的元素(在z轴上显示的等级)

    • position：fixed
    • css 3d
    • video
    • canvas
    • css3动画

  • 需要裁剪的地方

图层.png

  • 布局树和图层树的关系

    • 父元素如果有图层，子元素没有，子元素和父元素一个图层
    • 如果两个都有图层，各自暂用一个图层。

绘制

  • 一个一个图层的绘制
  • 每一个图层的绘制又是一系列的指令，构成一个待绘制列表，按照顺序进行绘制。

绘制列表.png

绘制流水线（栅格化）

  • 渲染进程的主进程在准备好绘制列表后，主线程只是提交绘制列表给合成线程。

绘制.webp

  • 合成线程回将绘制内容划分为图块(256 * 256, 512 * 512)

    • 栅格化的最小单位

  • 渲染进程的栅格化的线程池中根据在视口范围内的图块优先生成在视口内的位图

    • 位图能够看到的图层区域。

位图.png

  • 栅格化的过程一般放在GPU的进程中，根据图块生成位图，保存在GPU的内存中。

三个花.webp

合成和显示

所有图块被光栅化，合成线程生成绘制图块的命令，让浏览器主进程绘制将页面绘制在内存中，最后显示在页面上。

渲染过程.png

avatar
文章
阅读
粉丝