問題描述
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 垃圾回收的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！