html - Improving site performance with many images

Question

I am currently making a game in HTML/JS that includes approximately 1200 blocks per level. All of the blocks are individual images, but they are a lot of the time similar. They are 20*20 pixels. After inserting the pictures instead of placeholder divs, the perfomance has gone down a lot.

I am not sure, if it is because of the bandwith, but I would expect the pc to cache the images and reuse it.

Or maybe it is a memory problem with the amount of images.

socket.on("sendBlocks",function(blocks,blocksCoords){
    if(typeof blocksCoords[area.X + "_" + area.Y] !== "undefined"){
    mapLimit.artX = 0;
    mapLimit.artY = -1;
    while(mapLimit.X + mapLimit.Y != mapLimit.artX + mapLimit.artY){
        mapLimit.artY = mapLimit.artY + 1;
        if(mapLimit.artY > mapLimit.Y){
            mapLimit.artX = mapLimit.artX + 1;
            mapLimit.artY = 0;
        }
        //Change block, executed for every art-coord.
        if(typeof blocksCoords[area.X + "_" + area.Y][mapLimit.artX + "_" + mapLimit.artY] !== "undefined"){
            switch(blocksCoords[area.X + "_" + area.Y][mapLimit.artX + "_" + mapLimit.artY].type){
                case "wood":
                    $("#" + mapLimit.artX.toString() + "_" + mapLimit.artY.toString()).attr("src","https://db.tt/TyZBx7EG");
                    break;
                case "empty":
                    $("#" + mapLimit.artX.toString() + "_" + mapLimit.artY.toString()).attr("src","https://db.tt/SdXqMMiE");
                    break;
            }
        }else if(typeof blocksCoords[area.X + "_" + area.Y][mapLimit.artX + "_" + mapLimit.artY] === "undefined"){
            $("#" + mapLimit.artX.toString() + "_" + mapLimit.artY.toString()).attr("src","https://db.tt/SdXqMMiE");
        }
    }
    }else if(typeof blocksCoords[area.X + "_" + area.Y] === "undefined"){
        $(".block").css("background-color","white");
    }

This code will be executed every time that the blocks are updated from the server. Checking if the block is wood, empty or undefined. Giving it different textures for each type of block.

The server updates the blocks every 100 ms, is that too fast?

Any suggestions to how this problem can be solved? Thanks a lot :)

Answer 1

A browser allows a maximum of 6-8 connection to a domain. So say you have 1200 images, it can only download 8 images at a time. This is something I learned recently. The solution to this was to create subdomains like images.website.com. That way the browser will treat the domain as if its a different one and allow you more 6-8 connections. So now 8 connections for website.com and 8 connection for images.website.come. That gives you 16 connections. Its upto you how many subdomains you'd like to make.