How to avoid making too many requests to download image from server?
<p>I am rendering a map with some background pattern so my map <code>render</code> function is like this:</p>

<pre><code>let image = new Image();

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

    image.onload = drawBackground(() =&gt; {
      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');
}
</code></pre>

<p>And this <code>render</code> function is called in my animate function in <code>main.js</code> so it is executed many times during <code>requestAnimationFrame</code>. </p>

<p>I use <code>require</code> in this line </p>

<pre><code>image.src = require('background.jpg');
</code></pre>

<p>because I use webpack in Node.js server end. But this code will make a request to the server in every round of animation so it is consuming a lot of resources. How to avoid making too many request to the server? I guess the image is cached in the browser?  But when I profile the code I can see it is attempting to make many requests to the server. Will this code affect performance? How can I avoid this?</p>