为什么 Firefox 在页面设置 textContent 上使用 NVDA 会滞后？

如何解决为什么 Firefox 在页面设置 textContent 上使用 NVDA 会滞后？

最近我一直在使用屏幕阅读器测试我的网站，但在使用 NVDA 时遇到了一个疯狂的页面。更具体地说：

• 所有浏览器操作都大幅延迟，但 NVDA 本身运行良好
• 例如，页面通常在不到一秒的时间内完成加载，但在 NVDA 处于活动状态时，第一张图像可能需要几分钟才能呈现
• 刷新页面需要几分钟才能执行
• 即使切换或关闭标签页也需要几秒钟

经过一些广泛的调试后，我将问题隔离为一组导致速度变慢的相当具体的标准：

• 这只发生在 Firefox 上（我目前使用的是 Firefox 90）； Chrome 和 Edge 都很好
• 这只发生在 NVDA 上； Mac 上的 VoiceOver 即使在 Firefox 上也很好。我没有 JAWS。
• 导致速度变慢的操作是在每个 textContent 上设置一个元素的 requestAnimationFrame，因此它每秒发生数十次
• 我不确定这是否具有实验意义，但我在 Windows 10 Home 上运行

我设法抓取了一个minimal CodePen example。我在这里使用 CodePen，因为我可以复制问题的最简单方法是刷新页面。在这个例子中是一个激活微调器的刷新按钮，所以如果页面速度很快，微调器只会显示一小会；如果它很慢，那么您将可以观察到旋转器的所有荣耀。

我尝试刷新时看到的内容：

因此，虽然我查明了是什么导致了问题，但我不知道为什么会发生这种情况，因此不知道如何在不完全停用小部件的情况下解决原始页面的问题。

• Firefox/NVDA 在页面设置 textContent 上变慢的根本原因是什么？
• 除了设置 textContent 之外，还有其他我可以或应该考虑的替代方法吗？
• 这可能是应该直接向 Firefox、NVDA 或两者提交的问题吗？

谢谢！

---

附录：

• NVDA Github Issue：这个悬而未决的问题表明长页面加载缓慢，这可能与我的问题有关
• My Website's Page：我正在谈论的网站页面