播放音频文件可以确保Javascript的完整后台性能

对我来说，这是最简单和侵入性最小的解决方案——除了播放微弱/几乎空的声音，没有其他潜在的副作用

你可以在这里找到详细信息:https://stackoverflow.com/a/51191818/914546

(从其他回答中，我看到一些人使用音频标签的不同属性，我想知道是否有可能使用音频标签的完整性能，而不实际播放一些东西)

注意:这个解决方案不适合如果你喜欢你的间隔工作在背景上，例如，播放音频或其他东西。但如果你感到困惑，例如当你回到页面或选项卡时，你的动画不能正常工作，这是一个很好的解决方案。

有很多方法可以实现这个目标，也许“WebWorkers”是最标准的一个，但当然，它不是最简单和方便的一个，特别是如果你没有足够的时间，所以你可以试试这种方法:

基本概念:

为你的间隔(或动画)建立一个名字，并设置你的间隔(动画)，所以它会运行时，用户第一次打开你的页面:var interval_id = setInterval(your_func, 3000); 通过$(window).focus(function() {});$(window).blur(function() {});你可以clearInterval(interval_id)每次浏览器(标签)是去激活和重新运行你的间隔(动画)每次浏览器(标签)将再次激活interval_id = setInterval();

示例代码:

var interval_id = setInterval(your_func, 3000);

$(window).focus(function() {
    interval_id = setInterval(your_func, 3000);
});
$(window).blur(function() {
    clearInterval(interval_id);
    interval_id = 0;
});

我在使用HTML5播放器时也遇到了同样的问题。当标签变成非活动时，它被卡住了。 所以我发现WebWorker允许使用没有限制的间隔/超时。我用它来张贴“tick”到主javascript。

WebWorkers代码:

var fading = false;
var interval;
self.addEventListener('message', function(e){
    switch (e.data) {
        case 'start':
            if (!fading){
                fading = true;
                interval = setInterval(function(){
                    self.postMessage('tick');
                }, 50);
            }
            break;
        case 'stop':
            clearInterval(interval);
            fading = false;
            break;
    };
}, false);

主要Javascript:

var player = new Audio();
player.fader = new Worker('js/fader.js');
player.faderPosition = 0.0;
player.faderTargetVolume = 1.0;
player.faderCallback = function(){};
player.fadeTo = function(volume, func){
    console.log('fadeTo called');
    if (func) this.faderCallback = func;
    this.faderTargetVolume = volume;
    this.fader.postMessage('start');
}
player.fader.addEventListener('message', function(e){
    console.log('fader tick');
    if (player.faderTargetVolume > player.volume){
        player.faderPosition -= 0.02;
    } else {
        player.faderPosition += 0.02;
    }
    var newVolume = Math.pow(player.faderPosition - 1, 2);
    if (newVolume > 0.999){
        player.volume = newVolume = 1.0;
        player.fader.postMessage('stop');
        player.faderCallback();
    } else if (newVolume < 0.001) {
        player.volume = newVolume = 0.0;
        player.fader.postMessage('stop');
        player.faderCallback();
    } else {
        player.volume = newVolume;
    }
});

对我来说，像其他人一样在后台播放音频并不重要，我的问题是我有一些动画，当你在其他选项卡中回到它们时，它们就像疯了一样。我的解决方案是把这些动画放在里面，如果这是防止非活动标签:

if (!document.hidden){ //your animation code here }

多亏了这个，我的动画只有在TAB激活时才会运行。 我希望这能对我的案子有所帮助。

我能够调用我的回调函数在至少250ms使用音频标签和处理其ontimeupdate事件。它一秒钟被调用3-4次。这比一秒钟的滞后setTimeout要好

只要这样做:

var $div = $('div');
var a = 0;

setInterval(function() {
    a++;
    $div.stop(true,true).css("left", a);
}, 1000 / 30);

不活跃的浏览器选项卡缓冲了一些setInterval或setTimeout函数。

Stop (true,true)将停止所有缓冲事件，并立即只执行最后一个动画。

window.setTimeout()方法现在限制在非活动选项卡中每秒发送不超过一个超时。此外，它现在将嵌套超时限制到HTML5规范允许的最小值:4毫秒(而不是以前的10毫秒)。