提高 JavaScript 性能以呈现图像答案

【问题标题】：Improve JavaScript performance to render Image提高 JavaScript 性能以呈现图像
【发布时间】：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" width="768px" height="432px">
        Canvas not supported
    </canvas>
    <script>
        setInterval(updateImg, 125);
    </script>
    </body>
</html>

是否有可能提高其性能？

【问题讨论】：

标签： javascript html image canvas setinterval

【解决方案1】：

也许可以试试 Promise？例如调用 Promise 的某种“无限循环”函数，如果这个 Promise 解决了你再次回调函数

【讨论】：