CSS的工做过程

在平时的工做中，可能都是再用一些框架或者是简单的CSS来修饰咱们的HTML页面，那么仔细想一想一个资深的前端从业者，是否须要知道他的工做原理和过程呢，技术这种东西，固然是咱们了解的越多，才会使用的越驾轻就熟。那么下面，我就为你们来介绍一下CSS的工做过程把。
有个经典的问题：从你输入 URL 到看到页面都发生了什么？这个问题回答可长可短，回答详细了扯上大几千字都不是问题。这里我从接收到 HTML，CSS，JS 等各类文件以后开始说，前面的都不是本题重点了。
总的来讲，过程分如下几步：

1. 处理 HTML 标记并构建 DOM 树。
2. 处理 CSS 标记并构建 CSSOM 树。
3. 将 DOM 与 CSSOM 合并成一个渲染树。
4. 根据渲染树来布局，以计算每一个节点的几何信息。
5. 将各个节点绘制到屏幕上。

是否是感受很神奇，简单的几个过程就能让咱们的页面变得好看起来，这仍是属于很浅的一些内容，更深层次东西在bob老师最近的直播课中常常有讲到，你们能够多多关注哦。不说这些题外话了，咱们下面来画几个图，帮助你们更清楚的理解CSS的工做过程、。

1. 构建 DOM Tree：HTML 文件加载后，浏览器开始构建 DOM Tree，DOM Tree 就是描述 HTML 文档中元素层叠关系的一棵树，长这样

​​

1. 构建 CSSOM 树：与DOM 相似，咱们须要对 CSS 构建树。首先CSS 字节转换成字符，接着转换成令牌和节点，最后连接到一个称为“CSS 对象模型”(CSSOM) 的树结构内，CSSOM 树长这样

​​
3.合成渲染树：将 DOM 树和 CSSOM 树合并成一棵渲染树，长这样

​​
4.绘制/栅格化：咱们已经知道各个元素的样式和布局方式了，接下来就是浏览器内核（平时说的 webkit 内核）来计算，将渲染树中的每一个节点转换成屏幕上的实际像素。
5.绘制到屏幕。

喜欢的能够关注小编哟~
工做日每日一更新~