CSS

的工作流程在平时的工作中，我们可能会用到一些框架或者简单的CSS来装饰我们的HTML页面，所以仔细想想一个资深的前端从业者是否需要了解他的工作原理，至于流程和技术，当然，我们对它了解得越多，使用起来就越容易。那么下面，我就为大家介绍一下CSS的工作过程。有一个经典问题：在您键入URL和看到页面之间发生了什么？这个问题的答案可长可短，如果回答的很详细，涉及到几千字，那是没有问题的。这里我在收到HTML、CSS、JS等各种文件后开始说，前面的不是本题的重点。一般来说，该过程有以下步骤：处理HTML标记和构建DOM树。处理CSS标记并构建CSSOM树。将DOM和CSSOM合并到一个渲染树中。根据渲染树布局计算每个节点的几何信息。将单个节点绘制到屏幕上。是不是觉得很神奇？几个简单的过程就可以让我们的页面好看。这还是很肤浅的内容。更深层次的东西，在Bob老师最近的直播讲课中经常提到。你可以了解更多关注。这些题外话不说了，下面先画几张图，帮助大家更清楚地了解CSS的工作过程。BuildaDOMTree：HTML文件加载完成后，浏览器开始构建DOMTree，DOMTree是描述HTML文档中元素级联关系的树。看起来像这样BuildaCSSOMtree:和DOM类似，我们需要为CSS建立一棵树。首先CSSbytes被转换成字符，然后转换成token和节点，最后链接成一个叫做“CSSObjectModel”（CSSOM）的树结构，CSSOM树看起来像这样3.复合渲染树：DOM树与CSSOM树变成渲染树，看起来是这样的4.绘制/光栅化：我们已经知道了每个元素的样式和布局，接下来就是浏览器内核（通常称为webkit内核）去计算，将其中的每个节点渲染树转换为屏幕上的实际像素。5.绘制到屏幕上。喜欢的话可以关注小编哦~平日每天更新~