CSS的事情历程引见（图文）【html5教程】

本篇文章给人人带来的内容是关于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的事情历程引见（图文）的细致内容，更多请关注ki4网别的相干文章！