我一直在为几个画布游戏项目使用createjs Easeljs库。总的来说，我印象深刻，但是最近在chrome中遇到了一个使我退缩的问题。
当鼠标左键按下并移动鼠标时，Chrome上的FPS降至30（由开发人员工具报告）。对于游戏正常运行的60FPS，这是很明显的。
为了理解这一点，我剥离了一块裸露的画布和股票，问题仍然存在。所以我迷路了。我可以使用以下代码重现该问题：
<html>
<head>
<script src="./javascript/easeljs-0.8.1.combined.js"></script>
<script>
function init() {
canvas = document.getElementById("gameCanvas");
createjs.Ticker.setFPS(60);
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNC;
stage = new createjs.Stage(canvas);
createjs.Ticker.on("tick", tick);
};
function tick(evt)
{
stage.update();
}
</script>
</head>
<body onLoad="init();" bgcolor="#ffffff">
<canvas id="gameCanvas" width="1136px" height="640px" style="border: thin black solid; margin: 0 auto;"></canvas>
</body>
</html>
我知道这个问题：Html Canvas lag when Left Mouse is down and moving on Chrome，但在这种情况下我看不到它有什么帮助。
是否有人有任何想法或资源可以帮助您解决此问题？
编辑：
抱歉，我将股票行情设置为
createjs.Ticker.timingMode = createjs.Ticker.RAF;
这解决了这些问题，并且我得到了间歇性掉帧（但未提及）
无论如何，任何人都无法阐明发生这种情况的原因，以及如果导致这种情况，为什么我会在地球上使用同步的股票代答器？
最佳答案
RAF提供了不确定的帧率（即，不能保证您具有任何特定的帧率），这意味着浏览器可以自由地随意调整或增加fps，以响应各种情况。看来，当鼠标按下时，Chrome可能会触发额外的RAF事件，以便更频繁地重新绘制并提供更流畅的鼠标交互。RAF_SYNC通过尝试将指定的帧率与任意帧率对齐来工作。它具有一些公差，以使其在帧速率排列不佳时可以正常工作，但是当指定的帧速率显着低于实际RAF帧速率（例如，目标为20或30 fps）时，效果会更好。
从文档：
方差通常是
RAF频率的除数。通常是60，所以帧速率是10
12、15、20和30运作良好。
在这种情况下，由于您的目标fps很高（基本上可能会达到最大RAF），因此没有太大的回旋余地。当Chrome浏览器的帧速超过60fps时，RAF_SYNC就开始难以将帧对齐以使其达到命中率。前一帧和当前帧之间没有足够的时间经过，因此它等待一个额外的帧。结果是帧速率下降到您指定速率的一半以上。在20或30 fps时，您可能根本不会注意到这一点，因为它可以很好地对齐。
例如，假设Chrome跳到80fps，而您将目标设置为RAF_SYNC模式下的60fps：
Chrome触发了RAF事件。
滴答声会查看自上次滴答后经过的时间，发现它只有12ms，认为距离目标16.67ms还不够，并等待下一个RAF事件
Chrome触发了另一个RAF事件。
自上次滴答以来，滴答声的外观已超过16.67ms，并立即触发滴答声，但此时已过去25ms。
重复。您现在以〜40fps而不是60fps的速度运行，即使实际帧速率为〜80fps。
我希望这是有道理的。