美文网首页
css引擎的工作流程

css引擎的工作流程

作者: strong9527 | 来源:发表于2017-11-14 18:11 被阅读35次

moz hacks 学习笔记

css引擎是如何工作的:

解析(parse)

把相关的文件解析成浏览器可以理解的对象,包括DOM对象。DOM可以知道页面的结构。包括父子关系,但是它不知道这些元素看起来是什么样子的。

parse

样式(style)

解析出所有元素看起来应该是什么样子的。对每一个DOM节点来说,css引擎计算出那些css规则进行应用,然后为每一个DOM节点计算出样式。

style

布局(layout)

计算出每一个节点的尺寸和在屏幕的位置。屏幕上的每一个元素都被创立在一个个的区块中。但是区块并不代表一个DOM节点,一个区块可能也代表一行文字。

layout

绘制(paint)

在不同的图层绘制不同的区块。我觉得这像旧时代用洋葱皮层纸手绘动画。这使得只改变相应涂层的样式,而不影响到其他图层成为可能。

paint

渲染(render)

将这些不同的图层全部折叠起来,变成一个图片,并最终渲染到屏幕上。


render

这就意味着,当开始计算这些样式的时候,css引擎已经有了两样东西:

  • 一个完整的DOM树
  • 页面完整的样式规则

相关文章

网友评论

      本文标题:css引擎的工作流程

      本文链接:https://www.haomeiwen.com/subject/dmbfvxtx.html