How to test (automatedly) that an operation occurs after browser repaint?
According to the comments of this blog post, the following technique executes an operation asynchronously but waits for a repaint:
function nextTick(callback) {
var img = new开发者_开发技巧 Image;
img.onerror = callback;
img.src = 'data:image/png,' + Math.random();
}
whereas this one does not wait for a repaint:
var mc = new MessageChannel;
function nextTick(callback) {
mc.port1.onmessage = callback;
mc.port2.postMessage(0);
}
How could I verify this, programmatically, in a way that automated tests running on multiple platforms/browsers could check?
You may want to use requestAnimationFrame
instead of the workaround in the blog post.
Read more about it at Paul Irish's blog http://paulirish.com/2011/requestanimationframe-for-smart-animating/
精彩评论