css引擎的工作流程

moz hacks 学习笔记

css引擎是如何工作的:

解析(parse)

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

parse

样式(style)

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

style

布局(layout)

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

layout

绘制(paint)

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

paint

渲染(render)

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


render

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

  • 一个完整的DOM树
  • 页面完整的样式规则
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容