如何(自动)测试浏览器重绘后是不是发生操作?

Posted

技术标签:

【中文标题】如何(自动)测试浏览器重绘后是不是发生操作?【英文标题】:How to test (automatedly) that an operation occurs after browser repaint?如何(自动)测试浏览器重绘后是否发生操作? 【发布时间】:2011-11-28 14:20:14 【问题描述】:

根据the comments of this blog post,以下技术异步执行操作但等待重绘:

function nextTick(callback) 
    var img = new Image;
    img.onerror = callback;
    img.src = 'data:image/png,' + Math.random();

而这个不等待重绘:

var mc = new MessageChannel;
function nextTick(callback) 
    mc.port1.onmessage = callback;
    mc.port2.postMessage(0);

如何以在多个平台/浏览器上运行的自动化测试可以检查的方式以编程方式验证这一点?

【问题讨论】:

【参考方案1】:

您可能希望使用requestAnimationFrame 而不是博客文章中的解决方法。

在 Paul Irish 的博客http://paulirish.com/2011/requestanimationframe-for-smart-animating/了解更多信息

【讨论】:

对动画完全不感兴趣。希望进行计算但让浏览器在我这样做时让 UI 响应。 (根据链接的 cmets,前者屈服于浏览器 UI,而后者屈服于其他 javascript 代码。)

以上是关于如何(自动)测试浏览器重绘后是不是发生操作?的主要内容,如果未能解决你的问题,请参考以下文章

React ChartJS 防止新数据在重绘后被添加到状态中?

TreeView重绘后 水平滚动条问题

回流&重绘

单张图片在线预览+图片压缩

浏览器重绘与回流

浏览器的重绘与重排