在平时的工作中，可能都是再用一些框架或者是简单的 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. 绘制到屏幕。
喜欢的可以关注小编哟~ 工作日每日一更新~