浏览器-04 WebKit 渲染2

渲染主循环(main loop)和requestAnimationFrame

requestAnimationFrame

使用

requestAnimationFrame

而非

setTimeout/setInterval

绘制动画;

requestAnimationFrame

:告诉浏览器

JavaScript

想发起一个动画帧,然后在动画帧绘制之前,需要做一些动作,这样浏览器可以根据需要来优化自己的

mainloop

机制和调用时间点,以达到较好地平衡效果;

var start = null;
var element = document.getElementById("example");

function step(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
element.style.left = Math.min(progress/10, 200) + "px";
if (progress < 2000) {
window.requestAnimationFrame(step);
}
}

window.requestAnimationFrame(step);

渲染mainloop

mainloop

过程

chromium

是多进程的结构,

Browser

进程用户界面的

mainloop

和

Renderer

进程的主线程的

mainloop

分别位于两个不同的进程,所以

UI

和渲染可以互相不影响;

但是

Renderer

进程的渲染工作和

JavaScript

的执行工作都在其主线程中,由

mainloop

来负责调度完成,存在竞争;

过程:大的循环加上一个事件队列

当队列中有事件时,从队列中取出第一个事件,设置相应的状态信息,处理该事件及其对应的处理函数,直到该函数处理完后,才重新检查队列中是否有事件;

如果有,继续处理;如果没有,则继续等待;

存在问题:

如果队列中事件多,很多事件可能来不及处理,造成比较大的延时,因而事件的平均等待时间会比较长;

如果事件的处理函数需要的时间很长,就会造成后面的事件一直在等待,同样会增加事件的平均等待时间;

WebKit

和

Chromium

中的实现

setTimeout

和

setInterval

的实现:

WebKit

会为

DOM

中的每个

setTimeout

和

setInterval

的调用创建一个

DOMTimer

,而后该对象会由存储

TLS(thread localstorage)

中的

ThreadTimers

负责管理,其内部其实是一个最小堆,每次取

timeout

最小时间,同时,相同的

Timer

可以合并;

当

Timer

超时后,

Chromium

清除该

Timer

对象,同时调用相应的回调函数,回调函数通常会更新页面的样式和布局, 这会触发

relayout

,从而触发立即重新绘制一个新帧;

setTimeout

和

setInterval

从不考虑浏览器内部发生了其他什么事,它只要求浏览器在某个时间之后调用它的回调函数,无论浏览器很繁忙或者页面被隐藏;

requestAnimationFrame

的实现原理就是其会申请绘制下一帧, 时间由浏览器决定,只需要浏览器在绘制下一帧前执行其设置的回调函数,完成

JavaScript

对动 画所做的设置和逻辑即可;

JavaScript

调用

requestAnimationFrame

,相应的

webkit

和

chromium

会调度一个需要绘制下一证的事件,该事件会将

requestAnimationFrame

的调用上下文和回调函数记录下来;

上面的请求会触发

Chromium

更新页面内容的事件,该事件被

mainloop

调度处理后,会检查是否需要调用动画的相关处理,如果有动画需要处理,就会依次调用那些回调函数,

JavaScript

引擎会更新相应的

CSS

属性或者

DOM

树修改;

Chromium

触发重新计算

layout

,更新自己的

Renderer

树,而后绘制完成一帧的渲染;

为了实现更好的性能,

chromium

中对

requestAnimationFrame

有三个设计原则:

当页面不可见时,其回调函数不会被调用,这可以减少

CPU

和

GPU

的使用率;

其最大调用频率不会超过

60hz

,无论屏幕的刷新率是多少,;因而回调函数也不会每秒调用超过60次,这是因为

60FPS

已经能够满足

UI

流畅的要求了;

只有当页面真正开始渲染时,回调函数才会被调用;

设计机制带来的编程考虑

回调函数不能太大,不能占用太长时间,否则会影响页面的响应和绘制的频率;

requestAnimationFrame

不需要设置间隔时间,不同刷新率的间隔时间不一样,这完全由浏览器来控制,而不需要操心;

回调函数无需合并,可以在任意位置设置回调函数,它们可以被浏览器集中处理, 而无需要一个统一的入口;