提高 JavaScript 性能以呈现图像
Posted
技术标签:
【中文标题】提高 JavaScript 性能以呈现图像【英文标题】：Improve JavaScript performance to render Image 【发布时间】：2021-08-13 11:42:25 【问题描述】：我有一个简单的 html 代码，它每 125 毫秒显示一个图像。目标是显示从摄像机捕获的视频。 图像显示在 Canvas 容器中，并在每次使用 setInterval 方法时重复 updateImg() 函数。
我的代码在我的 PC 的浏览器上仍然可以正常运行，但如果我使用装有 android 4 的旧平板电脑的浏览器，我的代码就会出现问题（有一点延迟）。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='pragma-directive' content='no-cache'>
<meta http-equiv='cache-directive' content='no-cache'>
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='pragma' content='no-cache'>
<meta http-equiv='expires' content='0'>
<title>Canvas</title>
<script>
var img = new Image();
img.src='http://10.0.9.231:3000/camera?i='+(new Date()).getTime();
function updateImg()
var onScreenContext = document.getElementById("myCanvas").getContext('2d');
onScreenContext.drawImage(img, 0, 0);
img.src='http://10.0.9.231:3000/camera?i='+(new Date()).getTime();
</script>
</head>
<body>
<canvas id="myCanvas" >
Canvas not supported
</canvas>
<script>
setInterval(updateImg, 125);
</script>
</body>
</html>是否有可能提高其性能？
【问题讨论】：
【参考方案1】：也许可以试试 Promise？ 例如调用 Promise 的某种“无限循环”函数，如果这个 Promise 解决了你再次回调函数
【讨论】：
以上是关于提高 JavaScript 性能以呈现图像的主要内容，如果未能解决你的问题，请参考以下文章
多个小型 spritesheet 或一个巨大的 spritesheet 以提高性能？ ---（java游戏开发）[关闭]