浏览器渲染流程(上) DOM树、CSSOM树、布局


浏览器渲染流程(上) DOM树、CSSOM树、布局

前言

面试题查漏补缺中,不太熟悉的点重新学习,输出文章,备战秋招。

这篇文章是讲浏览器怎么渲染出页面的。

顺带一提:本文有一些很好的过程图,是从参考文章里引用过来的,并且参考文章的图好像又是极客时间的李兵老师的视频里的。(😅)

渲染流程

浏览器渲染流程(上) DOM树、CSSOM树、布局
  1. 解析HTML,生成DOM树

  2. 解析CSS,生成CSSOM树

  3. 布局(Layout)

    • 结合DOM树CSSOM树,生成渲染树

    • 布局计算

  4. 分层(Layer)

  5. 绘制(Paint)

  6. 合成(上面部分是在主线程,而合成部份是在合成线程上执行的color{red}上面部分是在主线程,而合成部份是在合成线程上执行的上面部分是在主线程,而合成部份是在合成线程上执行的)

    • 光栅化(Raster)

    • 合成(Composite)与显示

1. 生成DOM树

为什么要生成DOM树?

因为浏览器不理解和使用HTML,所以需要解析HTML,转换成浏览器能够理解的结构。

浏览器渲染流程(上) DOM树、CSSOM树、布局

上面的HTML中获取某个节点,以及属性等都非常不方便。

浏览器渲染流程(上) DOM树、CSSOM树、布局

生成DOM树之后就很方便了。根节点是document,比如我们想要访问span标签的时候只需要document.body.children[0].firstElementChild就可以了。如果没有生成DOM树,那获取起来就超级复杂了,仔细想想都会觉得麻烦。

从上面的那张图,我们也可以看出来,有一个HTML解析器的模块,将输入的HTML解析、转换成DOM树输出。那么它是怎么解析的呢?

  1. 通过分词器将字节流转换成TokenToken分为Tag token文本TokenTag Token又能分成Start TagEnd Tag。如<div></div>

  2. 将转换的Token列表解析为DOM节点。可以使用栈结构来实现,遇到开始标签就入栈,遇到结束标签就出栈。(这一部分详细的知识应该是AST抽象语法树那一块的,后续研究完再写博客)

2. 生成CSSOM树

生成CSSOM树和生成DOM树的目的一样,都是转换为浏览器能够理解的结构

通过document.styleSheets可以查看最后的结构。CSSOM结构主要是JavaScript提供操作样式表的能力,以及提供基础的样式信息

浏览器渲染流程(上) DOM树、CSSOM树、布局

上面生成DOM树就OK了,但是这里生成CSSOM树之后,还需要进行两步操作:

  1. 转换样式表的属性值,使其标准化

    这里的转换属性,使其标准化是什么意思?

    举几个例子就能够让你恍然大悟:

    很明显,我们能根据习惯来随意选择,但是渲染引擎理解起来就很麻烦,所以需要将所有值转换为渲染引擎容易理解标准化的计算值。

    浏览器渲染流程(上) DOM树、CSSOM树、布局
    • 字体大小单位能用pxem

    • 颜色能用redrgb(255, 0, 0)

    • 字体粗细能用bold700

  2. 计算出DOM树中每个节点的具体样式

    计算DOM节点的具体样式,需要考虑CSS的继承样式层叠规则

    浏览器渲染流程(上) DOM树、CSSOM树、布局

    在上图中,灰色的就是继承的属性,而黑色则是节点新增属性,包括覆盖掉继承属性的。

    注意:上面这颗还不是渲染树color{red}上面这颗还不是渲染树上面这颗还不是渲染树

3. 布局(Layout)

3.1 生成渲染树

生成渲染树的实现其实就是上两步生成的DOM树CSSOM树结合起来。

注意:display为none的节点不会上树,而visibility为hidden的节点还是会上树。color{red}display为none的节点不会上树,而visibility为hidden的节点还是会上树。display为none的节点不会上树,而visibility为hidden的节点还是会上树。

因为displaynone就是指将节点从DOM树上移出去,也就是说如果这个时候上树,之后还得把它移出去。所以就在生成渲染树的阶段直接不让它上树。而visibilityhidden只是让该节点隐藏起来而已,只是看不见,其他样式都还在。

浏览器渲染流程(上) DOM树、CSSOM树、布局

生成渲染树的示例图:

浏览器渲染流程(上) DOM树、CSSOM树、布局

3.2 布局计算

生成渲染树之后,需要计算渲染树每个节点的大小位置

后续请看下一篇

参考

技术淘金丨浏览器渲染流程[1]

浏览器渲染原理流程[2]

浏览器的渲染过程 – musicBird – 博客园[3]

参考资料

[1]

http://forum.microapp.bytedance.com/mini-app/posts/626a148306b7b66d55cf8bcb: http://forum.microapp.bytedance.com/mini-app/posts/626a148306b7b66d55cf8bcb

[2]

https://zhuanlan.zhihu.com/p/271859197: https://zhuanlan.zhihu.com/p/271859197

[3]

https://www.cnblogs.com/musicbird/p/16185965.html: https://www.cnblogs.com/musicbird/p/16185965.html

原文始发于微信公众号(赤蓝紫):浏览器渲染流程(上) DOM树、CSSOM树、布局

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

文章由半码博客整理,本文链接:https://www.bmabk.com/index.php/post/45067.html

(0)

相关推荐

发表回复

登录后才能评论
半码博客——专业性很强的中文编程技术网站,欢迎收藏到浏览器,订阅我们!