检测实际可用的计算和处理能力浏览器javascript

Question

我正在开发一个包含大量图像和动画的大型网站。我的问题是动画和图像占用了大量可用浏览器的计算和处理能力，有时可能会饱和并崩溃。

所以，我想测试一下浏览器的实际可用计算能力，以了解何时可以显示动画或加载图像。

在网络上，我找到了Document.readyState 方法，但它只给了我一个信息：页面何时加载以及外部资源是否已完全加载。 但是，浏览器可以绘制动画或加载一些其他外部资源......

我只是想知道浏览器是否忙，是否可以给它更多工作（例如加载的图像或显示动画）。

在谷歌浏览器中，我们可以通过控制台做到这一点：

为什么不以编程方式？

注意，我在 Stack Overflow 中找到了 this 答案。我的帖子不是重复的，因为我想找到加载图像和显示动画的最佳时机我不能在我的代码中多次使用这个测试。

感谢您的帮助。如果您有任何问题或 cmets，请告诉我。

Answer 1

如果您尝试优化动画，检查 CPU 使用率可能没有帮助。您应该避免在 CPU 上渲染图形。现代浏览器可以使用 GPU 做很多事情，理想情况下，这是运行动画的地方。

您可以尝试以下几种方法。他们为我工作。

优化您的动画

如果您为正确的属性设置动画，则可以利用 GPU。我相信 GPU 加速的 CSS 属性是 transform、opacity 和 filter (source)。如果您正在为其他属性设置动画（例如margin、left、width），您可能会看到更多的卡顿和崩溃。对于相对定位的元素尤其如此，因为它会导致回流。

优雅降级

使用您链接到的 FPS 方法我取得了很好的成功。 requestAnimationFrame 正是您所需要的。它会告诉您浏览器何时准备好渲染另一帧。如何处理这些信息取决于您。

我检查requestAnimationFrame 回调中的帧速率，以确定要向用户显示的动画和效果类型。我的方法是保留一系列过去的渲染时间，然后偶尔对它们进行平均以做出决定。

如果您认为您的大多数用户都能够运行动画，那么从高质量版本开始，如果您检测到渲染时间较慢，则降级。相反，如果大多数用户无法渲染您精美的图形，那么如果您检测到良好的渲染时间，请升级。

WebGL

WebGL 与浏览器图形一样快。如果您有一些全窗口动画，请考虑将它们移植到 WebGL。一般来说，WebGL 对渲染较小的组件没有多大帮助，因为您很快就会达到最大上下文的数量（16 个？）。

Answer 2

当然，我知道最好的方法是提高性能。有很多方法可以提高性能，也需要付出很多努力。我在这里列出的理想路径：

1.降低网络成本(compress\concat\cdn...)

2.降低 cpu\memory 的成本（css-transform-gpu\reduce-dom-tree\virtual-dom\shadow-dom...）

3.[最重要的] 让一切尽在掌控之中，并在承诺中串联起来。 Image\css\js，可以使用onload来触发next；动画你可以通过api（https://css-tricks.com/controlling-css-animations-transitions-javascript/）使用js控制，或者使用move.js之类的东西。这个过程就像一个网页游戏，你可能也需要一个加载视图。

4.那你就知道是闲还是闲了

--- 旧答案---

我根据这个想法做了一个npm包，https://github.com/postor/cpu-stat-browser

--- 旧答案---

我使用 setTimeout 来检测 cpu 使用情况，日志更小，cpu 更忙， 这将计入页面/浏览器之外的使用，您可以开始您的工作并在日志中的数字足够大时停止此操作。

let k = 0
let profilling = true
let interval = null
let period = 1000

console.log = (x) => {
  document.write(x + '<br>')
  window.scrollTo(0, document.body.scrollHeight);
}

start()

interval = setInterval(() => {
  console.log(k)
  k = 0
}, period)

async function start() {

  while (profilling) {
    await step()
  }
}

function stop() {
  clearInterval(interval)
  profilling = false
}

async function step() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      k++
      resolve()
    })
  })
}

运行 sn-p 来统计你的 cpu，同时你可以运行一些昂贵的东西并查看日志的反应