时间戳

首页 > 解决方案 > 我实际上能以多快的速度为网站图标设置动画？

javascript - 我实际上能以多快的速度为网站图标设置动画？

问题描述

我有一个预先存在的 HTML 文档，其中定义了以下网站图标：

<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
<link rel="shortcut icon" href="/img/favicon.ico">

所有网站图标图像在内容方面都是相同的，但以不同的分辨率存储。在同一目录中，我也有每个图标的略有不同的版本，在文件名中favicon被替换为favicon2。

我正在考虑一个至少需要大约 11 fps 才能完成的动画创意。我拼凑了一些愚蠢的 JS，看看我可以多快地更新网站图标而不实际实现任何效果，结果有点失望：

var flipflop = false;
setInterval(function() {
    flipflop = !flipflop;
    document.querySelectorAll('link[href*="favicon"]').forEach(function(el) {
        var href1 = el.href.replace(/favicon2?/, 'favicon'),
            href2 = href1.replace('favicon', 'favicon2');

        el.href = flipflop ? href1 : href2;
    });
}, 100);

即使在 100 ms / 10 fps 下，动画也很不稳定（至少在 Firefox 68 中）。有些帧的使用寿命明显比其他帧长。如果我进一步降低它，它会开始明显丢帧。

我知道代码本身正在以足够的速度执行，只是没有像我想要的那样经常刷新图标。我尝试过使用requestAnimationFrameinsetInterval没有明显改善。

我还没有找到另一个技巧，或者这不是浏览器旨在以这种速度执行的操作？

标签： javascripthtmlanimationfavicon

解决方案

推荐阅读