通过 framerate / requestAnimationFrame 确定元素是否在屏幕上

Question

我的 JS 在 x 域 iframe 中交付，因此无法访问顶部窗口来确定元素位置。我读到的另一个用于确定元素是否在屏幕上的选项是“浏览器优化”，我相信它会在 iframe 中运行一些帧速率测试，并假设如果帧速率很慢，那是因为浏览器知道它不在屏幕上，因此没有优先处理它。

在 60fps 时，浏览器应尝试每 16.6666666667 毫秒以 1 帧为屏幕内容制作动画。每次帧速率低于 16.6666666667fps 时，我都会使用日志设置这个小提琴，但是当框在屏幕上或屏幕外滚动时似乎没有明显的区别：

var lastTime = 0;
var box = document.getElementById('box');
var slowIsGt = 16.6666666667;

function loop(time) {
    var delay = time - lastTime;
    var fps = 1000/delay;

    //console.log(delay + ' ms, ' + fps);
    if(delay>slowIsGt){
        console.log('RENDERING SLOWER THAN ' + slowIsGt + ' ' +delay + ' ms, ' + fps);
    }

    updateAnimation();
    requestAnimationFrame(loop);
    lastTime = time;
}

function updateAnimation(){
    if(box.style['text-shadow'] === '1px 1px 1px'){
        box.style['text-shadow'] = '0 0 0';     
    }else{
        box.style['text-shadow'] = '1px 1px 1px';                       
    }
}

document.getElementById('startBtn').addEventListener('click', function(){
    requestAnimationFrame(loop);
});

现场演示：https://jsfiddle.net/4xhpL4cw/1/

以前有没有人尝试过这样的事情？我看不出我如何得到一个可衡量的结果来清楚地说它是在屏幕上还是在屏幕外。这也会受到最终用户计算机 CPU 的巨大影响。网上资源很少，但这可能是我发现的最有用的东西：http://www.contextis.com/documents/2/Browser_Timing_Attacks.pdf

Answer 1

看来根据Timing control for script-based animations：

当文档的隐藏属性 ([Page Visibility]) 为 false 且动画帧请求回调列表不为空时，用户代理必须定期排队一个任务，该任务对该文档的顶级浏览上下文的所有动画进行采样。

因此，如果 iframe 被认为是隐藏的，那应该可以按预期工作。但是，根据Page Visibility 规范：

在获取时，如果顶层浏览上下文（浏览器视口中的根窗口）[HTML5] 包含的 Document 根本不可见，则 hidden 属性必须返回 true。

由于 iframe 包含在可见文档中，这是顶级浏览上下文，因此 iframe 仍被视为未隐藏。我通过将 iframe 滚动进/出视图并记录到控制台是否隐藏它来验证这一点。

因此，如果 iframe 滚动到视野之外，动画帧事件不会触发，这似乎很棒，但这并不是规范描述其行为的方式。

感谢this Webkit bug report了解详情。