用许多图像提高网站性能 [英] Improving site performance with many images

问题描述

我目前正在制作一个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; $ b $如果（mapLimit.artY> mapLimit.Y）{
 mapLimit.artX = mapLimit.artX + 1; 
 mapLimit.artY = 0; 
} 
 //改变块，为每个艺术坐标执行
 if（typeof blocksCoords [area.X +_+ area.Y] [mapLimit.artX +_+ mapLimit.artY]！==undefined）{ 
 switch（blocksCoords [area.X +_+ area.Y] [mapLimit.artX +_+ mapLimit.artY] .type）{
 casewood： 
 $（＃+ mapLimit.artX.toString（）+_+ mapLimit.artY.toString（））。attr（src，https://db.tt/TyZBx7EG）; 
休息; 
 caseempty：
 $（＃+ mapLimit.artX.toString（）+_+ mapLimit.artY.toString（））。attr（src，https：/ /db.tt/SdXqMMiE）; 
休息; 
} 
} 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（背景色，‘白’）; 
} 
  

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

服务器每100 ms更新一次块，速度是否太快？

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

解决方案

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

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 :)

解决方案

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.

这篇关于用许多图像提高网站性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！