Question

我目前正在制作一个HTML / JS游戏，每个级别包含大约1200个块。所有的块都是单独的图像，但它们在很多时候都是相似的。它们是20 * 20像素。插入图片而不是占位符div后，性能下降了很多。

我不确定，如果是因为带宽，但我希望电脑能够缓存图像并重复使用。

或许这可能是图像数量的内存问题。

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");
    }

每次从服务器更新块时都会执行此代码。检查块是木材，空的还是未定义的。为每种类型的块提供不同的纹理。

服务器每隔100毫秒更新一次块，这太快了吗？

有关如何解决此问题的任何建议？非常感谢：）

Answer 1

浏览器允许最多6-8个域连接。所以说你有1200张图片，它一次只能下载8张图片。这是我最近学到的。解决方案是创建像images.website.com这样的子域。这样浏览器就会将域视为不同的域，并允许您更多6-8个连接。所以现在8个连接为website.com，8个连接为images.website.come。这给你16个连接。它取决于你想要制作多少个子域名。

使用许多图像提高网站性能

1 个答案: