Bagaimana saya berjaya menghasilkan jutaan imej kecil pada halaman web

Saya sedang membina 10MPage.com yang merakam keadaan internet pada tahun 2025. Setiap pengguna internet dibenarkan memuat naik imej kecil bersaiz 64x64 piksel dan menyumbang kepada arkib ini.

Seperti namanya, ia perlu mampu mengendalikan 10 juta imej kecil ini. Apabila saya mula-mula menghasilkan konsep ini, saya bimbang tentang cara untuk membuatnya dengan cekap. Dalam artikel ini saya akan bercakap tentang percubaan pertama saya adalah dan penyelesaian terakhir.

Sebelum anda meneruskan, lihat 10MPage.com dan lihat jika anda boleh mengetahui cara ia dilakukan. Dan jika anda telah mencapai 10MPage, mengapa tidak menuntut jubin untuk diri sendiri? :)

Tag imej berbanding kanvas

Pilihan pertama yang perlu saya buat ialah jika saya mahu menggunakan elemen HTML atau kanvas skrin penuh.

Tag imej berasingan

Saya pada mulanya menguji dengan tag

<div>



<p>With this CSS:<br>
</p>

<pre class="brush:php;toolbar:false">    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: auto; /* Enable scrolling */
        }

        .grid {
            display: block;
            position: relative;
            width: 100%; /* The grid will take the full width */
        }

        .row {
            display: flex; /* Each row is a flex container */
        }

        .tile {
            width: 64px;
            height: 64px;
            box-sizing: border-box;
            border: 1px solid #ccc; /* Visual separation between tiles */
        }

        .tile img {
            width: 64px;
            height: 64px;
            object-fit: cover;
        }
    </style>

Beginilah rupanya:

Baiklah tetapi terdapat beberapa perkara yang boleh menjadi isu:

• Tatal penyemak imbas
• DOM Besar
• Malas memuatkan

Kanvas

Pendekatan seterusnya adalah melalui kanvas, untuk memudahkan saya memutuskan untuk melukis papan dam sahaja. Menambah menatal juga mudah, beginilah rupanya:

<badan>
<kanvas>



<p>Tangkapan skrin:<br>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668501927013.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<p>Pendekatan ini bagus kerana ia membolehkan saya memaparkan segala-galanya melalui kod yang akan menjadikan ciri yang lebih maju lebih mudah.</p>

<h3>
  
  
  Membuat keputusan tentang tag imej atau kanvas
</h3>

<p>Akhirnya saya memutuskan untuk menggunakan kanvas kerana ia lebih fleksibel daripada div. Ini kerana perkara seperti memuatkan animasi, menatal lancar, memuatkan malas dan fakta bahawa ia diberikan secara masuk melalui kod yang memberikan banyak kawalan. </p>

<p>Tetapi memuatkan banyak imej kecil menyebabkan banyak overhed, untuk meminimumkan bahawa saya ingin menggabungkan imej kecil dalam blok yang lebih besar.</p>

<h2>
  
  
  Optimumkan penghantaran jubin
</h2>

<p>Memuatkan setiap imej secara berasingan menambahkan banyak permintaan rangkaian. Mari cepat mengira pada skrin 1080p. Lebar ialah 1920 piksel yang akan menjadi 1920 / 64 = 30 jubin. Dengan ketinggian 1080 piksel yang akan menjadi 1080 / 64 = ~17 jubin. Jadi untuk memaparkan skrin penuh jubin pada paparan HD penuh, ia memerlukan pemaparan 30*17 = 510 imej kecil. </p>
<p>Tetapi kita perlu boleh menatal! Dan apabila menatal saya tidak mahu menunjukkan banyak ikon pemuatan sebelum membuat persembahan. Jadi ini bermakna kita perlu memuatkan imej sekeliling juga. Jika kita ingin memuatkan terlebih dahulu di sekelilingnya, kita perlu menambah lapan kali jubin. Bayangkan segi empat tepat hitam ialah paparan:</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668502115888.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<p>*<em>Itu akan menjadi 510 * 8 = 4080 imej! *</em></p>

<p>Adalah tidak realistik untuk memaparkan imej sebanyak itu dengan begitu pantas. Penyelesaiannya?  Gabungkan jubin individu dalam blok yang lebih besar.</p>

<p>Menggunakan PHP, saya menulis pengawal yang menghasilkan imej yang mengandungi 16*16 jubin. Setiap blok adalah 64 * 16 = 1024 piksel lebar dan tinggi. Anda boleh melihat ini apabila anda pergi ke 10MPage dan melihat dalam tab rangkaian konsol anda.</p>

<p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668502382486.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<p>Skrip akan menambah tanda soal untuk tempat yang tidak diisi.</p>

<p>Jadi daripada 4080 imej untuk 1920 * 3 = 5760 piksel dengan 1080 * 3 = 3240 piksel, kini kita hanya memerlukan 24 imej: 5760 / 1024 = ~6, 3240 / 1024 = ~4 (kedua-duanya dibundarkan), 6* 4 = 24. Mana yang boleh dilakukan!</p>

<h2>
  
  
  Menyembunyikan blok
</h2>

<p>Saya telah melaksanakan beberapa perkara untuk 'menyembunyikan' bahawa jubin dimuatkan dalam blok yang lebih besar.</p>

<h3>
  
  
  Skrin pemuatan sentiasa mempunyai jubin 64x64
</h3>

<p>Memuatkan skrin<br>
<img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/173668502441571.jpg?x-oss-process=image/resize,p_40" class="lazy" alt="How I managed to render million small images on a webpage"></p>

<h3>
  
  
  Grid penuh sentiasa diberikan segi empat sama
</h3>

<p>Untuk menyembunyikan jurang yang besar di bahagian bawah atau kanan grid, grid tidak akan memuatkan blok jika ia bukan segi empat sama. Anda tidak akan melihat blok di bahagian bawah dan kemudian blok kosong di sebelah kiri atau kanan blok itu.</p>

<p>Terima kasih kerana membaca artikel ini, saya harap anda telah belajar sesuatu. <br>
Jika anda melakukannya, mengapa tidak menambah bahasa pengaturcaraan kegemaran anda, syiling crypto atau haiwan kesayangan anda pada 10MPage? Ianya percuma!</p>


          </kanvas></badan>