CSS的工作历程介绍（图文）

本篇文章给大家带来的内容是关于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 文档中元素层叠关系的一棵树，长这样

2、构建 CSSOM 树：与DOM 相似，我们需要对 CSS 构建树。第一CSS 字节转换成字符，接着转换成令牌和节点，最后链接到一个称为“CSS 对象模型”(CSSOM) 的树构造内，CSSOM 树长这样

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

4、绘制/栅格化：我们已经知道各个元素的样式和规划方式了，接下来就是阅读器内核（平常说的 webkit 内核）来运算，将渲染树中的每个节点转换成屏幕上的实际像素。

5、绘制到屏幕。

【引荐课程：CSS视频教程】

以上就是CSS的工作历程介绍（图文）的具体内容，更多请关注百分百源码网其它相关文章！