问题描述
I'm profiling the following code's memory usage using the Timeline in Chrome Dev Tools v27.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<title>RAF</title>
</head>
<body>
<script type='text/javascript' charset='utf-8'>
var frame = function() {
window.webkitRequestAnimationFrame(frame);
};
window.webkitRequestAnimationFrame(frame);
</script>
</body>
</html>
Notice it's simple. But eventually I see the a tooth pattern appear that indicates the garbage collector is reclaiming memory.
Does raf create garbage objects by default? Is there any way to avoid this? Thx.
I have found out the following: If you change your RAF function into two "ping-pong" like functions, you get alot less garbage. You can't avoid the first initial "big GC", but after that you see only minor GCs of about 50kb instead of 700kb-1mb GCs. The code will look like this:
<script type='text/javascript' charset='utf-8'>
window.frameA = function() {
window.webkitRequestAnimationFrame(window.frameB);
};
window.frameB = function() {
window.webkitRequestAnimationFrame(window.frameA);
};
window.webkitRequestAnimationFrame(window.frameA);
</script>
I guess this is the best you can do in Chrome. I noticed that in FF the gc intervals or memory hardly changes, so its probably related to the chrome debugging stuff (see the linked chrome bug report above for more details). However, I noticed an improvement in my own game when deploying RAF like this - and heck I need to be able to debug it without artificial GCs that won't happen on normal users machines.
这篇关于requestAnimationFrame 垃圾回收的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！