requestAnimationFrame在Chrome里的实现
requestAnimationFrame是HTML5游戏和动画必不可少的函数,相对于setTimeout或setInterval它有两个优势,一是它注册的回调函数与浏览器的渲染同步,不用担心Timer的时间间隔太长或太短。二是时间间隔相对与Timer要稳定,requestAnimationFrame注册的回调函数最高执行频率是60FPS,虽然在HTML5游戏里通常是达不到的,但是它两次调用之间时间间隔要比Timer稳定一些。前段时间我在CanTK Runtime里自己模拟过requestAnimationFrame,为了深入的理解Chrome里实现requestAnimationFrame方法,花了一点时间去读Blink的代码。
requestAnimationFrame的基本用法如下:
var start = null;
var element = document.getElementById("SomeElementYouWantToAnimate");
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);
我比较关注的是回调函数的注册和调用过程:
- 1.注册回调函数的实现。
(WebKit/Source/core/dom/ScriptedAnimationController.cpp)
ScriptedAnimationController::CallbackId ScriptedAnimationController::registerCallback(FrameRequestCallback* callback)
{
CallbackId id = m_callbackCollection.registerCallback(callback);
scheduleAnimationIfNeeded();
return id;
}
注册之后还需要请求重绘,scheduleAnimationIfNeeded最终会调到ThreadProxy::SendCommitRequestToImplThreadIfNeeded:
(cc/trees/thread_proxy.cc)
bool ThreadProxy::SendCommitRequestToImplThreadIfNeeded(
CommitPipelineStage required_stage) {
DCHECK(IsMainThread());
DCHECK_NE(NO_PIPELINE_STAGE, required_stage);
bool already_posted =
main().max_requested_pipeline_stage != NO_PIPELINE_STAGE;
main().max_requested_pipeline_stage =
std::max(main().max_requested_pipeline_stage, required_stage);
if (already_posted)
return false;
Proxy::ImplThreadTaskRunner()->PostTask(
FROM_HERE,
base::Bind(&ThreadProxy::SetNeedsCommitOnImplThread,
impl_thread_weak_ptr_));
return true;
}
void ThreadProxy::SetNeedsCommitOnImplThread() {
TRACE_EVENT0("cc", "ThreadProxy::SetNeedsCommitOnImplThread");
DCHECK(IsImplThread());
impl().scheduler->SetNeedsBeginMainFrame();
}
void Scheduler::SetNeedsBeginMainFrame() {
state_machine_.SetNeedsBeginMainFrame();
ProcessScheduledActions();
}
- 2.执行回调函数的实现。
WebKit/Source/core/dom/ScriptedAnimationController.cpp
void ScriptedAnimationController::executeCallbacks(double monotonicTimeNow)
{
// dispatchEvents() runs script which can cause the document to be destroyed.
if (!m_document)
return;
double highResNowMs = 1000.0 * m_document->loader()->timing().monotonicTimeToZeroBasedDocumentTime(monotonicTimeNow);
double legacyHighResNowMs = 1000.0 * m_document->loader()->timing().monotonicTimeToPseudoWallTime(monotonicTimeNow);
m_callbackCollection.executeCallbacks(highResNowMs, legacyHighResNowMs);
}
void FrameRequestCallbackCollection::executeCallbacks(double highResNowMs, double highResNowMsLegacy)
{
// First, generate a list of callbacks to consider. Callbacks registered from this point
// on are considered only for the "next" frame, not this one.
ASSERT(m_callbacksToInvoke.isEmpty());
m_callbacksToInvoke.swap(m_callbacks);
for (size_t i = 0; i < m_callbacksToInvoke.size(); ++i) {
FrameRequestCallback* callback = m_callbacksToInvoke[i].get();
if (!callback->m_cancelled) {
TRACE_EVENT1("devtools.timeline", "FireAnimationFrame", "data", InspectorAnimationFrameEvent::data(m_context, callback->m_id));
InspectorInstrumentationCookie cookie = InspectorInstrumentation::willFireAnimationFrame(m_context, callback->m_id);
if (callback->m_useLegacyTimeBase)
callback->handleEvent(highResNowMsLegacy);
else
callback->handleEvent(highResNowMs);
InspectorInstrumentation::didFireAnimationFrame(cookie);
TRACE_EVENT_INSTANT1(TRACE_DISABLED_BY_DEFAULT("devtools.timeline"), "UpdateCounters", TRACE_EVENT_SCOPE_THREAD, "data", InspectorUpdateCountersEvent::data());
}
}
m_callbacksToInvoke.clear();
}
这行代码m_callbacksToInvoke.swap(m_callbacks);比较有意思,在循环执行的callbacks会有新的callback注册进来,我在实现这个功能时,没看过这段代码,当时费了点功夫才想明白怎么搞。
上面的代码是由RenderWidgetCompositor::BeginMainFrame调过来的:
(src/content/renderer/gpu/render_widget_compositor.cc)
void RenderWidgetCompositor::BeginMainFrame(const cc::BeginFrameArgs& args) {
double frame_time_sec = (args.frame_time - base::TimeTicks()).InSecondsF();
double deadline_sec = (args.deadline - base::TimeTicks()).InSecondsF();
double interval_sec = args.interval.InSecondsF();
WebBeginFrameArgs web_begin_frame_args =
WebBeginFrameArgs(frame_time_sec, deadline_sec, interval_sec);
compositor_deps_->GetRendererScheduler()->WillBeginFrame(args);
widget_->webwidget()->beginFrame(web_begin_frame_args);
}
requestAnimationFrame在Chrome里的实现的更多相关文章
- LocalStorage在Chrome里的实现
前段时间我们在实现CanTK-Runtime时,也曾在V8基础上模拟过浏览器的LocaleStorage功能,其实现非常简单:每个domain的数据使用的单独文件存储,因为同一时间只有一个游戏运行,所 ...
- 【27前端】base标签带有href属性会让chrome里的svg元素url失效
一个chrome的问题,但具体原因不明. 触发条件:chrome浏览器base标签里href属性有值的时候 触发问题:svg里面的元素如果有用url的滤镜和模糊,则会失效,在firefox里和IE10 ...
- 玩爽了!直接在Chrome里抓取数据
一个小测试发现可以自动做题,于是想通过脚本的方式看能不能获取相应的题库,刚好可以学习一下JS异步操作.花了一天时间,总算跑顺利了,遇到了不少坑.记录下来分享. 1.JS如何顺序执行 JS有强大的异步操 ...
- 直接在Chrome里抓取数据
一个小测试发现可以自动做题,于是想通过脚本的方式看能不能获取相应的题库,刚好可以学习一下JS异步操作.花了一天时间,总算跑顺利了,遇到了不少坑.记录下来分享. 1.JS如何顺序执行 JS有强大的异步操 ...
- favicon.ico在chrome里显示正常,在ie,edge浏览器中不显示
代码: <head> <meta charset="UTF-8"> <link href="imgs/favicon.ico" r ...
- 关闭在chrome里使用双指前进后退页面的功能
defaults write com.google.Chrome AppleEnableSwipeNavigateWithScrolls -bool FALSE
- 在CHROME里安装 VIMIUM 插件, 方便操作
VIMIUM 插件使用方法 VIMIUM 命令列表 网页导航 j, :向下滚动网页 k, :向上滚动网页 h : 向左滚动 l : 向右滚动 gg : 滚动到网页头部 G : 滚动到网页底部 :向上翻 ...
- 如何在CHROME里调试前端代码?
以前看前端们调得很神的, 刚看书到这里,作一个记录,演练了一下,确实有点神!!! :) <!DOCTYPE html> <html lang="en"> & ...
- Chrome 里的请求报错 "CAUTION: Provisional headers are shown" 是什么意思?
在调试器中看到文件显示提示为 CAUTION: Provisional headers are shown, 可是直接复制链接访问资源却可以正常访问, 最后发现是https 问题,资源采用ssl协议, ...
随机推荐
- WPF调用office2010的ppt出错
各位热爱WPF编程小伙伴不可避免的会遇到将ppt嵌入到自己编写的软件,可是有时候会遇到错误,此错误值出现在卸载office2013并安装其他版本office时候会出现.这是由于某些机器上offic ...
- PostGIS_导入shp格式的数据
1.导入shp到PostGIS 开启PostGIS shp Loader,如下图: 打开View connection details....输入连接数据库的参数,如下: 连接成功后,点击Add Fi ...
- Duilib将UI资源文件打包到exe教程
转载:http://www.voidcn.com/blog/w839687571/article/p-6001921.html 转载:http://www.voidcn.com/blog/x35698 ...
- Centos 中如何快速定制二进制的内核RPM 包
随着Linux服务器越来越多了,底层系统内核想要保持版本统一就需要定制专门的二进制安装包来便捷的升级和管理. RedHat系那当然就是使用rpmbuild来做定制化管理了. 今天我们分俩个部分(roo ...
- mysql中整数类型后面的数字,是不是指定这个字段的长度?比如int(11),11代表11个字节吗?
原文地址: http://www.cnblogs.com/stringzero/p/5707467.html 原先对mysql不太理解,但也没有报错.但理解的不够深入.这次补上. 原来以为int ...
- CG绘画笔记
看一些比较好的作品:看作品哪些部分,部件,盔甲比较吸引人,提取一个比较好的点,进行组合创作. 逆光.切光布局构图 创作:故事.情感.经历.朋友.时代 灵感: 电影.音乐 变化(色彩)透视 空气透视视觉 ...
- CUBRID学习笔记 5 错误码
服务器错误码 AS Error Code Number CAS Error Code Error Message Note -1000 CAS_ER_DBMS "CUBRID DBMS Er ...
- ServiceStack.OrmLite 笔记8 -还是有用的姿势
复杂点的使用2 InsertAll, UpdateAll and DeleteAll 的参数要是IEnumerables Each关键字 返回 IEnumerable 并且是延迟加载的 全局设置 当字 ...
- Codeforces Round #376 (Div. 2) C. Socks bfs
C. Socks time limit per test 2 seconds memory limit per test 256 megabytes input standard input outp ...
- Codeforces Round #281 (Div. 2) C. Vasya and Basketball 二分
C. Vasya and Basketball time limit per test 2 seconds memory limit per test 256 megabytes input stan ...