gpt4 book ai didi

javascript - 为什么 requestAnimationFrame 如此不稳定且不一致? ubuntu 上的 Chrome

转载 作者:行者123 更新时间:2023-11-28 04:08:50 25 4
gpt4 key购买 nike

这可能是在黑暗中拍摄,但我不知道是什么原因造成的。

我用 webgl 开发了一个游戏引擎。我的主要测试浏览器是 Firefox,一切都运行良好。即使我正在做更激烈的事情(例如与多个帧缓冲区混合),也不会出现延迟或随机卡顿。

但是,在 Chrome 上,情况就完全不同了。即使运行最简单的任务,Chrome 也很难保持稳定的 fps。我决定创建一个实验来看看问题是否出在我的代码中或 requestAnimation 循环中。这是我运行的代码:

<!DOCTYPE html>
<html>
<body>
<div id="fpsCounter"></div>

Lowest fps
<div id="minFps"></div>

<br>
Highest fps
<div id="maxFps"></div>
<script>
var minFps = 999;
var maxFps = 0

var fps = 0;
var last = performance.now();
var now;
var fpsUpdateTime = 20;
var fpsUpdate = 0;
var fpsCounter = document.getElementById("fpsCounter");
var minFpsEle = document.getElementById("minFps");
var maxFpsEle = document.getElementById("maxFps");
function timestamp(){
return window.performance && window.performance.now ? window.performance.now() : new Date().getTime();
}


var getMaxFps = false;
setTimeout(function(){
getMaxFps = true;
}, 2000);

function gameLoop(){
now = performance.now();
if(fpsUpdate == 0){
fps = 1000 / (now - last);
fpsUpdate = fpsUpdateTime;
}
fpsUpdate--;

fpsCounter.innerHTML = fps;
if(parseInt(fps, 10) < parseInt(minFps, 10)){
minFps = parseInt(fps, 10);
minFpsEle.innerHTML = minFps;
}

if(parseInt(fps, 10) > parseInt(maxFps, 10) && getMaxFps){
maxFps = parseInt(fps, 10);
maxFpsEle.innerHTML = maxFps;
}

last = now;
requestAnimationFrame(gameLoop);
}
gameLoop();
</script>
</body>

</html>

所有代码所做的就是循环动画帧并将 fps 放入 div 中。在 Firefox 上,这与整个游戏引擎的效果一样,它的平均帧率保持在 58 fps 左右,并且永远不会低于 52 fps。 Chrome 很难达到 40 fps 以上,并且经常低于 28 fps。奇怪的是,Chrome 经常出现速度突发,chrome 获得的最高 fps 是 99 fps,但这有点毫无意义,因为稳定的 60 fps 更重要。

详细信息:

Firefox version: 55.0.2 64-bit
Chrome version: 60.0.3112.78 (official version) 64-bit
OS: Ubuntu 16.04 LTS
Ram: 8gb
GPU: gtx 960m
Cpu: intel core i7HQ

这就是 Chrome 中的性能表现: enter image description here

最佳答案

我制作了这个简约的 html 页面进行测试:

<!DOCTYPE html>
<html>
<head>
<title>requestAnimationFrame</title>
</head>
<body>
<canvas id="canvas" width="300" height="300"></canvas>
<script>
"use strict"

// (tested in Ubuntu 18.04 and Chrome 79.0)
//
// requestAnimationFrame is not precise
// often SKIPs a frame
//

function loop() {
requestAnimationFrame(loop)
var ctx = document.getElementById("canvas").getContext("2d")
ctx.fillStyle = "red"
ctx.fillRect(100,100,200,100)
}

loop()
</script>
</body>
</html>

summary - dev tools image

不存在内存泄漏问题。脚本执行时间可以忽略不计。

fps - dev tools image

FPS 的行为不一致(在 Ubuntu 上运行 Chrome)。

在此测试中,问题出在硬件加速上。

禁用硬件加速时,FPS 正常。


已编辑

我对仅包含单个 Canvas 的页面进行了更多测试。我的结论是,浏览器太复杂(或有缺陷),很难 100% 顺利运行。


我的游戏架构

var previousTimeStamp = 0

function mainLoop(timeStamp) {
if (! shallSkipLoop(timeStamp)) { gameLoop() }
requestAnimationFrame(mainLoop)
}

function gameLoop() {
// some code here
}

function shallSkipLoop(timeStamp) {
var deltaTime = timeStamp - previousTimeStamp
previousTimeStamp = timeStamp
//
// avoiding bad frame without less than 1000 / 60 ms!!!
// this happens when browser executes a frame too late
// and tries to be on time for the next screen refresh;
// but then may start a long sequence of unsynced frames:
// one very short (like 5ms) the other very long (like 120ms)
// maybe it is a bug in browser
//
return deltaTime < 16
}

requestAnimationFrame(mainLoop)

关于javascript - 为什么 requestAnimationFrame 如此不稳定且不一致? ubuntu 上的 Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46477620/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com