Pemprosesan Imej Sisi-Klien Berprestasi Tinggi
Memproses imej dalam pelayar kini merupakan keperluan standard. Anda mungkin membina penyunting foto, kit alatan aset, atau penapis kebolehcapaian. Untuk memastikan UI anda responsif, anda memerlukan kependaman (latency) yang rendah.
Satu tugas mudah ialah penyongsangan warna. Ini bermakna menukar nilai RGB kepada nilai negatifnya. Jika anda menggunakan pendekatan standard pada imej 4K, anda akan menghadapi kekangan perkakasan (hardware bottlenecks).
Masalahnya: Iterasi Naif
Kebanyakan pembangun menggunakan kaedah getImageData(). Ini mengembalikan Uint8ClampedArray. Tatal (array) ini menyimpan piksel sebagai saluran Merah, Hijau, Biru, dan Alpha (RGBA).
Gelung (loop) standard kelihatan seperti ini:
- Melalui setiap bait secara berulang.
- Menolak setiap nilai warna daripada 255.
- Melangkau saluran Alpha.
Ini berfungsi untuk imej kecil. Ia gagal untuk aset 4K. Imej 4K mempunyai lebih 8 juta piksel. Gelung standard melakukan lebih 33 juta penulisan berasingan. Ini menyekat bebenang utama (main thread). Ia menyebabkan pelayar tersangkut-sangkut (stuttering) dan penurunan kadar bingkai (frame drops).
Penyelesaiannya: Manipulasi Buffer 32-Bit
Anda boleh berhenti melayan piksel sebagai empat saluran berasingan. Sebaliknya, letakkan Uint32Array di atas buffer data tersebut.
Dengan menggunakan paparan 32-bit, anda mengumpulkan R, G, B, dan A ke dalam satu integer tunggal. Gelung anda kini hanya melakukan 8.2 juta iterasi berbanding 33 juta. Anda memproses satu operasi bagi setiap piksel berbanding empat.
Penyongsangan Warna Pantas melalui Bitwise XOR
Untuk menyongsangkan warna tanpa menyentuh Alpha, gunakan operator bitwise XOR (^). Gunakan topeng (mask) 0x00FFFFFF.
Cara ia berfungsi:
- Topeng tersebut menyasarkan bit warna sahaja.
- Bit Alpha kekal sama.
- CPU memproses ini dalam satu kitaran tunggal.
Keputusannya:
- Aset 1080p: 3.8x lebih pantas.
- Templat 2K: 4.1x lebih pantas.
- Wallpaper 4K: 4.4x lebih pantas.
Tip Pro: Gunakan Web Workers Jika anda memproses banyak fail beresolusi tinggi, operasi 32-bit sekalipun boleh memperlahankan UI. Pindahkan logik tersebut ke Web Worker. Gunakan Transferable Objects untuk menghantar buffer. Ini mengelakkan penyalinan data dan memastikan bebenang utama anda kekal bebas.
Berhenti menggunakan gelung yang berat. Gunakan perkataan (words) 32-bit dan bendera bitwise untuk membina saluran paip (pipeline) imej yang ramping dan pantas.