Bir tarayıcıda, büyük bir elektronik tablo veya daha fazla sayıda (10000) farklı PNG kullanmak en iyisi mi?

Yaklaşık 10000 32x32 fayans kullandığım jQuery'de bir oyun yaratıyorum. Şimdiye kadar, hepsini ayrı ayrı kullanıyorum (hareketli sayfa yok). Ortalama bir harita yaklaşık 2000 karo kullanır (bazen PNG'leri ancak hepsi ayrı div'leri yeniden kullanır) ve performans kararlı (Krom) ile biraz gecikmeli (Firefox) arasında değişir. Bu divlerin her biri kesinlikle CSS kullanılarak konumlandırılmıştır. Sadece yeni bir harita yüklendiğinde, her onay işaretiyle güncellenmeleri gerekmez.

GameQuery'de olduğu gibi, CSS arka plan konumlandırmasını kullanarak divs için spritesheet yöntemleri kullanmak performans için daha iyi olur mu?

Şimdiden teşekkür ederim!

Benim önerim

Çok fazla sayıda küçük PNG çok fazla ağ yükü ekleyecektir (HTTP isteklerinin boyutu nedeniyle değil, aynı zamanda PNG başlığı ve daha da önemlisi daha etkili bir şekilde sıkışma yetersizliği nedeniyle). Öte yandan, çok büyük bir PNG'nin yüklenmesi biraz zaman alabilen dezavantajlara sahiptir ve sürekli bir bellek yığınında bellekte kalıcı olarak durması gerekir (10.000 kutu için 40 megabayt).

Ben orta zemini tavsiye ederim : birkaç tane makul büyüklükte PNG, örneğin 32 × 32 ebadında 1024 fayans . Belki temaya göre gruplandırılmış olabilir (örneğin, orman döşemeli bir PNG, biri dağ döşemeli, diğer şehir döşemeli - oyununuzun temasını bilmiyorum, ama siz anlıyorsunuz).

Önbellek verimliliği hakkında not

Bellek erişim etkinliği nedeniyle, hareketli sayfalarınızı asla çok geniş yapmamalısınız. Karoları 128 × 8192 görüntüden ayırmak, her zaman 8192 × 128 görüntüden elde etmekten daha hızlı olacaktır.

İlk döşemeyi 8192 × 128 görüntüyle karıştırmak istediğinizi düşünün. Basitlik uğruna, 1 pikselin 1 bayt olduğunu kabul edin. İlk iki satır piksel bu şekilde belirlenir (hücreler byte numaralarını bellekte içerirler):

┌────┬────┬───┬────┬──────────┬─────┐
│  0 │  1 │...│ 31 │   ....   │ 8191│ 1st line of pixels: bytes 0 to 8191
├────┼────┼───┼────┼──────────┼─────┤
│8192│8193│...│8223│   ....   │16383│ 2nd line of pixels: bytes 8192 to 16383
├────┼────┼───┼────┼──────────┼─────┤
│ .. │ .. │...│ .. │   ....   │ ... │

Yani blit için ilk satırı ilk başlığın, tarayıcı motoru alır bayt 0için31 . Blit için ikinci bir çizgi , bu alır bayt 8192için8223 ve böylece bayt 32 hattına kadar üzerinde 253952hiç253983 alınır.

Toplam işlenen bayt sayısı 32 × 32 olacaktır. Ancak, toplam bellek aralığı 253984 bayttan fazla. Modern bir işlemcide, bu 32 veya 33 önbellek tezgahı anlamına gelir . Buna karşılık, görüntü 128 × 8192 olsaydı, bellek aralığı sadece 4000 bayt olurdu, bu da iki önbellek tezgahından daha fazlası olmadığı anlamına gelir.

Bugünün CPU'ları çok hızlı olduğu için, önbellek tezgahları çok pahalıdır ve hesaplamaları asar. Dolayısıyla, 8192 × 128 görüntü yerine 128 × 8192 görüntü kullanılması, teoride en azından 8 kat daha hızlıdır. Uygulamada bu, kabarmanın nasıl uygulanacağına bağlı olacaktır: sorunu azaltmak için alttaki motorun kendisinin görüntüleri döşemelere ayırması mümkündür.

Bunu doğru bir şekilde açıklamak kolay değil ve fazla ayrıntıya girmeyi beklemiyordum. Umarım anlamlı olur!

Büyük bir spritesheet (muhtemelen) size daha iyi performans verecek, çünkü gecikmenin en büyük nedenlerinden biri tarayıcı talebinden sunucuya tarayıcıya gidiş dönüş. 10.000 HTTP çağrısı, 10.000 daha büyük bir dosya döndüren 1 HTTP çağrısından çok daha uzun sürecektir.

Oyunun yapısına ve oluşturduğunuz HTML'ye bağlı olarak, gecikmeyi azaltmak için kullanabileceğiniz başka şeyler olabilir.