摘要：总的来说，过程分以下几步处理标记并构建树。不说这些题外话了，我们下面来画几个图，帮助大家更清楚的理解的工作过程。
在平时的工作中，可能都是再用一些框架或者是简单的CSS来修饰我们的HTML页面，那么仔细想想一个资深的前端从业者，是否需要知道他的工作原理和过程呢，技术这种东西，当然是我们了解的越多，才会使用的越得心应手。那么下面，我就为大家来介绍一下CSS的工作过程把。
有个经典的问题：从你输入 URL 到看到页面都发生了什么？这个问题回答可长可短，回答详细了扯上大几千字都不是问题。这里我从接收到 HTML，CSS，JS 等各种文件之后开始说，前面的都不是本题重点了。
总的来说，过程分以下几步：
处理 HTML 标记并构建 DOM 树。
处理 CSS 标记并构建 CSSOM 树。
将 DOM 与 CSSOM 合并成一个渲染树。
根据渲染树来布局，以计算每个节点的几何信息。
将各个节点绘制到屏幕上。
是不是感觉很神奇，简单的几个过程就能让我们的页面变得好看起来，这还是属于很浅的一些内容，更深层次东西在bob老师最近的直播课中经常有讲到，大家可以多多关注哦。不说这些题外话了，我们下面来画几个图，帮助大家更清楚的理解CSS的工作过程、。
构建 DOM Tree：HTML 文件加载后，浏览器开始构建 DOM Tree，DOM Tree 就是描述 HTML 文档中元素层叠关系的一棵树，长这样
构建 CSSOM 树：与DOM 类似，我们需要对 CSS 构建树。首先CSS 字节转换成字符，接着转换成令牌和节点，最后链接到一个称为“CSS 对象模型”(CSSOM) 的树结构内，CSSOM 树长这样
3.合成渲染树：将 DOM 树和 CSSOM 树合并成一棵渲染树，长这样
4.绘制/栅格化：我们已经知道各个元素的样式和布局方式了，接下来就是浏览器内核（平时说的 webkit 内核）来计算，将渲染树中的每个节点转换成屏幕上的实际像素。
5.绘制到屏幕。
喜欢的可以关注小编哟~
工作日每日一更新~
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54796.html
摘要：的主要组件包含了一个全新的引擎，称为量子，也称为。这个新引擎集成了四种不同浏览器的最新创新技术，创造出一个全新的超级引擎。这可以发生在多个图层上。最终，拥有最高特异性的规则会胜出。 原文：Inside a Super Fast CSS Engine: Quantum CSS(Aka Stylo), Lin Clark 注：原文发布于 2017 年 8 月，本文翻译于 2018 年 4 ...
摘要：问预处理器的出现是否意味着开发者社区对有所不满你认为有哪些地方需要改变定义了可以做什么，而其他人制造工具让变得更好用。对于现在流行的预处理器，哪一个最好并没有共识，但是是使用更加广泛的一个。 非商业转载请注明作译者、出处，并保留本文的原始链接：http://www.ituring.com.cn/article/124049 Charles Wyke-Smith一直从事与线上应...
摘要：它制定了整个平台的规则，监督整个进程。特邀专家指的是被邀请参与标准制定的开发者，都是一些技术大牛。备注数据来源于揭秘三制定过程制定过程是公开透明的，内部交流都是公开的。 W3C的标准规范是怎么制定出来的？浏览器厂商是收到来自w3c的规范标准才结合自己的浏览器进行开发更新以支持新特性吗？一直很好奇，搜集了一些资料，主要参考了W3C CSS工作组特邀专家Lea Verou写的《CSS揭秘》...
阅读 2900·2021-10-14 09:43
阅读 2797·2021-10-14 09:42
阅读 4518·2021-09-22 15:56
阅读 2327·2019-08-30 10:49
阅读 1565·2019-08-26 13:34
阅读 2316·2019-08-26 10:35
阅读 564·2019-08-23 17:57
阅读 1967·2019-08-23 17:15
