Cara menyimpan gambar di Memori browser Agar performa server membaik

January 6, 2023

Simpan gambar di Memory browser agar performa server membaik

Walaupun belum membuktikannya, tapi aku cukup yakin metode ini dapat membuat performa server menjadi lebih baik. Yuk mari kita bahas.

Metode ini menggunakan API browser yakni Blob URL Store. Fungsi ini akan menyimpan gambar ke dalam memory browser, sehingga ketika client hendak melihatnya maka tidak perlu request ulang ke server. Cukup membaca file dari memory yang telah tersedia. Nah dari sini saja sudah terlihat bahwa metode ini memungkinkan sekali untuk mengurangi load dari server yang kita miliki.

Sebelum lebih jauh, kita kenalan dulu sama apa itu Blob URL Store. Blob URL Store adalah sebuah API pada browser yang memungkinkan untuk menyimpan dan mengakses URL dari file-file binary seperti gambar, audio, dan video. API ini menggunakan objek Blob (Binary Large Object) untuk menyimpan file-file tersebut, dan mengembalikan URL yang dapat digunakan untuk mengakses file tersebut dari aplikasi web.

Kita dapat menggunakan Blob URL Store untuk menyimpan file-file yang tidak terlalu besar dan tidak perlu disimpan dalam database. Ini dapat berguna jika ingin menyimpan file tersebut secara sementara.

Lalu bagaimana cara membuatnya? nah simak ya:

Untuk menggunakan Blob URL Store, kita perlu menggunakan fungsi URL.createObjectURL() untuk membuat URL dari objek Blob. Setelah url tersebut tercipta, kita dapat menggunakannya selayaknya URL biasanya, bisa kita sematkan pada element <img> ataupun akses secara langsung.

Langsung praktek aja ya! Untuk membuat Blob URL Store dari sebuah gambar, kita menggunakan fungsi fetch() untuk mengambil file dari server, lalu menggunakan metode blob() untuk mengambil data binary dari file tersebut. Sebelum kita eksekusi untuk membuat Object Url-nya. Berikut ini adalah contohnya:

fetch('image.jpg')
  .then(response => response.blob())
  .then(blob => {
    let url = URL.createObjectURL(blob);
  });

fetch('image.jpg')

.then(response => response.blob())

.then(blob => {

let url = URL.createObjectURL(blob);

});

Variable url di atas menghasilkan unique url dari file yang kita load. Hasilnya seperti ini :

blob:https://domain-name.tld/1e67e00e-860d-40a5-89ae-6ab0cbee6273

1	blob:https://domain-name.tld/1e67e00e-860d-40a5-89ae-6ab0cbee6273

Kalau sudah jadi begitu, kita bisa menggunakannya dalam aplikasi web sama halnya dengan url pada umumnya.

Sebagai catatan, penggunaan fungsi ini sebaiknya selalu disertai adanya proses penghapusan file dari memori. Hal ini tentunya agar memori browser selalu terjaga alias tidak membengkak. Untuk hal itu kita dapat menggunakan fungsi URL.revokeObjectURL() untuk menghapusnya dari memori.

URL.revokeObjectURL(url);

1	URL.revokeObjectURL(url);

Nah sampai di sini sangat mudah kan? Tanpa disadari, selama ini kita sudah sering menggunakan website yang menerapkan fungsi ini. Yakni web.whatsapp.com ! Coba klik kanan pada gambar yang ada di WhatsApp Web mu, lalu open image tersebut di tab baru, kamu akan melihat URL dari gambar tersebut menggunakan fungsi BLOB URL Store ini.

hmm… menarik? selamat mencoba ya.