Question

我正在使用一些背景图案渲染地图，因此我的地图render功能如下：

let image = new Image();

render(position) {
    var drawBackground = function (callback) {      
      callback(this);
    }

    image.onload = drawBackground(() => {
      this.ctx.setTransform(this.scale, 0, 0, this.scale, -position.x, -position.y);
      var pattern = this.ctx.createPattern(image, 'repeat');
      this.ctx.fillStyle = pattern;
      this.ctx.fillRect(position.x, position.y, this.width, this.height);
    });

    image.src = require('background.jpg');
}

此render函数在main.js中的动画函数中调用，因此在requestAnimationFrame期间执行多次。

我在这一行中使用require

image.src = require('background.jpg');

因为我在Node.js服务器端使用webpack。但是这段代码会在每一轮动画中向服务器发出请求，因此消耗了大量资源。如何避免向服务器发出太多请求？我想图像是在浏览器中缓存的？但是当我分析代码时，我可以看到它试图向服务器发出许多请求。这段代码会影响性能吗？我怎么能避免这个？

如何避免从服务器下载太多的图像请求？

0 个答案: