首页 / CSS / CSS的工作过程介绍（图文）

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了CSS的工作过程介绍（图文），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1634字，纯文字阅读大概需要3分钟。

内容图文

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

CSS的工作过程介绍（图文） - 文章图片

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

CSS的工作过程介绍（图文） - 文章图片

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

CSS的工作过程介绍（图文） - 文章图片

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

5、绘制到屏幕。

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

以上就是CSS的工作过程介绍（图文）的详细内容。

内容总结

以上是互联网集市为您收集整理的CSS的工作过程介绍（图文）全部内容，希望文章能够帮你解决CSS的工作过程介绍（图文）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/418002.html

来源：【匿名】