JavaScript如何检测硬件加速是否启用

Question

有没有可能检测到浏览器是否支持硬件加速的页面渲染，并且也可以看到它是否已启用？我知道Firefox 4、IE9和Chrome都支持它，但由于浏览器版本、操作系统和计算机硬件本身的版本不同，它可能已经启用，也有可能没有。

这是通过某种形式的DOM嗅探来实现的吗？

- matsko

---

即使启用了硬件加速，如何检测哪些操作被加速？ - Gabe

Answer 1

没有官方的方法来检测这个。问题是，即使浏览器的硬件加速（HWA）设置已经开启，你也不能确定浏览器是否真正使用了HWA来渲染你的内容。很多情况可能会阻止在某个时刻使用HWA，即使HWA通常是支持的（这主要适用于Firefox，但其他浏览器在HWA暂时不可用时也可能会使用软件渲染）。

不过，你可以尝试渲染一些你期望软件渲染器和HWA渲染器会有不同结果的内容，并强制使用软件渲染器与默认渲染器进行比较。Canvas 2D API提供了一种通过软件渲染器强制渲染的方法：willReadFrequently，而已知HWA在渲染清晰斜线时效果不佳。

const hasHWA = (() => {
  // create a test function for both "default" drawing and forced software
  const test = (force=false) => {
    const canvas = new OffscreenCanvas(200, 200);
    // willReadFrequently will force software rendering
    const ctx = canvas.getContext("2d", { willReadFrequently: force });
    ctx.moveTo(0, 0),
    ctx.lineTo(120, 121); // HWA is bad at obliques
    ctx.stroke();
    return ctx.getImageData(0, 0, 200, 200).data.join();
  };
  // check that both return different results
  return test(true) !== test(false);
})();
console.log({ hasHWA });

但是尽管这在大多数情况下可能有效（在我的macOS上的FF和Chrome上有效），它肯定不是百分之百可靠的，因为最终目标是使硬件加速渲染器与软件渲染器一样精确，所以请谨慎使用这个测试。

- Kaiido

Answer 2

像所有其他浏览器特定功能一样，您可以做的最好的事情可能是设计某种功能测试，并实际衡量您关心的性能。

您可以在网站加载第一页时执行此操作，然后设置一个带有该设置的cookie，这样只需要每隔一段时间执行一次即可，只要存在cookie就不必再次执行。

根据您最关心的性能类型，您可以设计一个相当特定的测试。例如，如果您非常关心图像缩放，则可以设计一个JS测试，对一堆不同大小的图像进行缩放，并循环足够多次以获得可测量的时间，然后决定您的计时阈值。

这不仅比单个二进制加速选项更好，而且还能够测试您关心的特定功能并能够查看它们实际的速度。

- jfriend00

---

https://dev59.com/5W_Xa4cB1Zd3GeqP0226 - useless

@useless - 你为什么要踩票？根据你提供的答案，我的想法似乎是确切的最佳方法。 - jfriend00

Answer 3

我最近发现了 Chrome 的一个实用命令行开关（我使用的是 v. 16.0.912），该开关会在 HTML（CSS3）元素周围绘制红色边框，这些元素实际上正在进行硬件加速。您可以在我发布的博客中阅读更多详细信息。

- Jeroen

---

博客已删除 - atom217