JavaScript 检测是否启用硬件加速

Question

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

这可以使用某种形式的 DOM 嗅探吗？

Answer 1

与所有其他特定于浏览器的功能一样，您能做的最好的事情可能就是设计某种功能测试并实际测量对您重要的功能的性能。

您可以在加载网站的第一页时执行此操作，然后使用该设置设置 cookie，这样您只需每隔一段时间执行一次，并且只要满足以下条件就不必再次执行此操作cookie 存在。

根据您最关心的性能类型，您可以设计一个非常具体的测试。例如，如果您非常关心图像缩放，您可以设计一个 JS 测试，在足够大的循环中在一堆不同尺寸之间缩放图像，以获得可测量的时间，然后决定您的计时阈值是多少。

这不仅比加速打开或关闭的单一二元选择更好，而且还能够测试您关心的特定功能并能够了解它们的实际速度。

Answer 2

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

Answer 3

没有任何官方方法可以检测到这一点。问题是，即使设置了浏览器的硬件加速 (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 });

虽然这在大多数情况下可能有效（在我的 FF 和 macOS 上的 Chrome 中有效），但它肯定不是万无一失的，因为最终目标是让 HWA 渲染器像软件渲染器一样精确，所以请谨慎使用此测试。