【报Bug】canvas组件 在H5环境下，效率非常低

示例代码：

uni-方式

drawImageQueue(images, obj, done) {  
        //  
        console.log('打印图片', images);  
        let queue = [];  
        let self = this;  
        let ctx = this.getCanvasContext(obj);  
        let isClear = false;  
        if (typeof (images) === 'string') {  
          images = [images];  
        }  
        for (let img of images) {  
          if (img.length > 0) {  
            queue.push(img);  
          }  
        }  
        let doQueue = function () {  
          let src = null;  
          if (queue.length > 0) {  
            src = queue[0];  
            queue.splice(0, 1);  
            uni.getImageInfo({  
              src: src,  
              success(res) {  
                if (!isClear) {  
                  isClear = true;  
                  ctx.clearRect(0, 0, self.size.width, self.size.height);  
                }  
                ctx.drawImage(res.path, 0, 0, self.size.width, self.size.height)  
                if (queue.length > 0) {  
                  doQueue();  
                } else {  
                  ctx.draw(true,() => {  
                    typeof (done) === 'function' && done.call();  
                  });  
                }  
              },  
              fail(res) {  
                console.error('img fail', src,res);  
                if (queue.length > 0) {  
                  doQueue();  
                } else {  
                  ctx.draw(true,() => {  
                    typeof (done) === 'function' && done.call();  
                  });  
                }  
              }  
            });  
          }  
        }  
        doQueue();  
      },  

使用console.time+console.timeEnd 平均执行时间在200ms以上

原生H5方式

function drawImage(images,done) {  

        console.log('打印图片', images);  
        var queue = [];  
        var isClear = false;  
        if (typeof (images) === 'string') {  
            images = [images];  
        }  
        for (var i = 0;i<images.length;i++) {  
            var img = images[i];  
            if (img.length > 0) {  
                queue.push(img);  
            }  
        }  
        var doQueue = function () {  
            var src = null;  
            if (queue.length > 0) {  
                src = queue[0];  
                queue.splice(0, 1);  
                getImage({  
                    src: src,  
                    success:function(res) {  
                        console.log('res',res)  
                        if (!isClear) {  
                            isClear = true;  
                            ctx.clearRect(0, 0, size.width, size.height);  
                        }  
                        ctx.drawImage(res.path[0], 0, 0, size.width, size.height)  
                        if (queue.length > 0) {  
                            doQueue();  
                        } else {  
                            typeof (done) === 'function' && done.call();  
                        }  
                    },  
                    fail:function(res) {  
                        console.error('img fail', src,res);  
                        if (queue.length > 0) {  
                            doQueue();  
                        } else {  
                            typeof (done) === 'function' && done.call();  
                        }  
                    }  
                });  
            }  
        }  
        doQueue();  
    }  

    function getImage(opt) {  
        var img = new Image(1920,1080);  
        img.src = opt.src;  
        img.onload = opt.success;  
        img.oncompvare = opt.success;  
    }  

//使用console.time+console.timeEnd 平均执行时间在60ms以内

//图片使用同样的地址。使用的本机图片，加载耗时不超过5ms

操作步骤：

drawImageQueue(images, obj, done) {  
        //  
        console.log('打印图片', images);  
        let queue = [];  
        let self = this;  
        let ctx = this.getCanvasContext(obj);  
        let isClear = false;  
        if (typeof (images) === 'string') {  
          images = [images];  
        }  
        for (let img of images) {  
          if (img.length > 0) {  
            queue.push(img);  
          }  
        }  
        let doQueue = function () {  
          let src = null;  
          if (queue.length > 0) {  
            src = queue[0];  
            queue.splice(0, 1);  
            uni.getImageInfo({  
              src: src,  
              success(res) {  
                if (!isClear) {  
                  isClear = true;  
                  ctx.clearRect(0, 0, self.size.width, self.size.height);  
                }  
                ctx.drawImage(res.path, 0, 0, self.size.width, self.size.height)  
                if (queue.length > 0) {  
                  doQueue();  
                } else {  
                  ctx.draw(true,() => {  
                    typeof (done) === 'function' && done.call();  
                  });  
                }  
              },  
              fail(res) {  
                console.error('img fail', src,res);  
                if (queue.length > 0) {  
                  doQueue();  
                } else {  
                  ctx.draw(true,() => {  
                    typeof (done) === 'function' && done.call();  
                  });  
                }  
              }  
            });  
          }  
        }  
        doQueue();  
      },  

预期结果：

无

实际结果：

无