chromium rendering pipeline

chromium rendering pipeline

介绍

  1. 目前的浏览器(chrome safari edge ie) 对如何将内容渲染到屏幕的处理步骤都是不同的。chromium提供了一种更为严格的处理模型, 这个模型对作者来说更容易理解并能保持各平台的一致性。

pipeline stage

这里写图片描述

  • 浏览器渲染一帧需要从上图pipeline的头执行到尾

  • pipeline中的每一个步骤都是可以跳过的,即使前面的步骤会为后面的layout 或者paint创建脏区域。比如requestAnimationFrame执行的时 候 就会导致重新layout,尽管从pipeline的一开始并没有设置脏区域。pipeline中每一步都是为后面的做准备。比如 在一个scroll事件的处理中执行 requestAnimationFrame, 这两个步骤应该在同一帧。

  • 在pipeline执行过程中,我们不能附加其它的操作进去。比如 setTimeout和 setInterval 是不能在requestAnimationFrame到paint中间处理的。类似的,输入事件比如鼠标, touch 不能在一个pipeline执行过程中响应。

  • 每一个步骤都要以树的形式来遍历处理各个frame。 并确保在两个相同orgin的iframe处理之前,他们的父frame已经被处理过

  • 需要注意的是style layout 跟 pipeline中animation部分能在frame外部执行,比如getComputedStyle将会强制执行layout步骤的 update style。


没有更多推荐了,返回首页