检测实际可用的计算能力浏览器JavaScript
我正在开发一个包含大量图像和动画的巨大网站。 我的问题是，动画和图像占用了浏览器的大量可用计算能力，有时它可能会饱和并且只会崩溃。
所以，我想测试浏览器的实际可用计算能力，以了解何时可以显示动画或加载图像。
在网络中，我找到了Document.readyState方法，但它只给我一个信息：加载页面时，以及外部资源是否完全加载。 但是，浏览器可以绘制动画或加载其他外部资源...
我只想知道浏览器是否忙碌，如果我可以给它更多的工作（如加载的图像或显示动画）。
在Google Chrome中，我们可以使用控制台执行此操作：
为什么不以编程方式？
请注意，我在Stack Overflow中找到了这个答案。 我的帖子不是重复的，因为我想找到加载我的图像并显示我的动画的最佳时刻我无法使用此测试，在我的代码中多次查看。
任何帮助表示赞赏。 告诉我你是否有问题或意见。
当然，我知道最好的方法是提高性能。 有很多方法可以提高性能和所需的工作量。 我在这里列出的理想路径：
1.降低网络成本（compress concat cdn ...）
2.降低cpu memory的成本（css-transform-gpu reduce-dom-tree virtual-dom shadow-dom ...）
3. [最重要]让所有事情都掌握在控制之中，并且保证承诺。 Image css js，你可以使用onload来触发下一个; 你可以通过api使用js控件（https://css-tricks.com/controlling-css-animations-transitions-javascript/），或者使用像move.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()
})
})
}如果您尝试优化动画，检查CPU使用率可能没有帮助。 您应该避免在CPU上渲染图形。 现代浏览器可以在GPU上做很多事情，理想情况下，这就是您的动画将运行的地方。
这里有几件事你可以尝试。 他们为我工作。
优化您的动画
如果您正在动画正确的属性，那么您可以利用GPU。 我相信GPU加速的CSS属性是transform ， opacity和filter （source）。 如果你正在动画其他属性（例如margin ， left ， width ），你可能会看到更多的连线和崩溃。 相对定位的元素尤其如此，因为它会导致回流。
优雅的退化
我已经使用您链接的FPS方法取得了很好的成功。 requestAnimationFrame完全符合你的需求。 它告诉你何时浏览器准备渲染另一帧。 这取决于你如何处理这些信息。
我检查requestAnimationFrame回调中的帧频，以确定向用户显示哪种类型的动画和效果。 我的方法是保留一系列过去的渲染时间，然后偶尔平均来做出决定。
如果您认为大多数用户可以运行动画，那么从高质量版本开始，如果检测到渲染时间较慢，则会降级。 相反，如果大多数用户无法渲染您的图形，那么如果您检测到渲染时间较好，则升级。
WebGL的
WebGL与浏览器图形一样快。 如果您有一些全窗口动画，请考虑将它们移植到WebGL。 一般来说，WebGL对渲染较小的组件没有太大的帮助，因为你很快就达到了最大上下文的数量（16？）。
链接地址: http://www.djcxy.com/p/40737.html上一篇: Detect actual available computing power browser javascript