chromium rendering pipeline
介绍
- 目前的浏览器(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。