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

Question

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

因此,我想测试浏览器的实际可用计算能力,以便知道何时可以显示动画或加载图像.

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

我只想知道浏览器是否忙碌以及是否可以为其提供更多工作(如加载图像或显示动画).

在Google Chrome中,我们可以使用控制台执行此操作:

为什么不以编程方式？

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

任何帮助表示赞赏.如果您有任何问题或意见,请告诉我.

Answer 1

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

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

2.降低cpu\内存成本(css-transform-gpu\reduce-dom-tree\virtual-dom\shadow-dom...)

3.[最重要]一切尽在掌控之中，并恪守承诺。Image\css\js，可以用来onload触发next；动画你可以通过api使用js控制（https://css-tricks.com/controlling-css-animations-transitions-javascript/），或者使用类似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()
    })
  })
}

运行代码片段来统计你的CPU，同时你可以运行一些昂贵的东西并查看日志的反应