Seri Pengoptimalan Kinerja iOS 04｜Masalah kinerja frekuensi tinggi dalam pemuatan gambar dan cache

Gambar hampir menjadi tempat yang paling mungkin menyebabkan masalah kinerja berulang dalam proyek iOS.

Anda sering menjumpainya dalam berbagai skenario:

• Halaman beranda macet
• Daftar bingkai tetesan bergulir
• Lonjakan memori
• Layar pertama dimuat dengan lambat
• Gambar berkedip saat bergulir
• Untuk halaman konten yang sama, jika gambarnya lebih banyak, kecepatannya jelas akan lebih lambat.

Saat pertama kali menangani soal jenis ini, gambaran soalnya akan disederhanakan menjadi satu kalimat:

Kemudian tambahkan cache.

Caching tentu saja penting, tetapi jika Anda hanya memahami optimasi gambar sebagai “apakah ada cache”, biasanya itu jauh dari masalah sebenarnya. Karena kerumitan sebenarnya dari tautan gambar adalah ia menggabungkan banyak biaya secara bersamaan:

• Unduh
• Dekode
• Perbesar
• Render
• Penyimpanan memori
• Manajemen siklus hidup

Jadi masalah gambar hampir selalu merupakan masalah sistem.

1. Gambar lebih cenderung memperbesar masalah dibandingkan data biasa.

Karena gambar pada dasarnya memiliki beberapa karakteristik yang membuat kinerja menjadi rapuh:

• Ukuran sumber daya biasanya lebih besar
• Seringkali decoding diperlukan sebelum ditampilkan
• Perangkat dan pemandangan dengan ukuran berbeda akan memicu penskalaan
• Akan sering muncul dalam daftar
• Mudah di-cache dan menempati memori untuk waktu yang lama

Dengan kata lain, gambar adalah jenis sumber daya yang memberikan tekanan pada CPU, memori, bandwidth, dan rendering pada saat yang bersamaan.

Hal ini juga menunjukkan bahwa jika suatu gambar tidak diproses dengan baik, seringkali gambar tersebut tidak muncul hanya sebagai satu masalah, tetapi beberapa masalah muncul bersamaan:

• Kartu bergulir
• memori tinggi
• Layar pertama lambat

2. Mengunduh bukan satu-satunya biaya. Apa yang diremehkan oleh banyak tim adalah waktu decoding.

Saat topik ini muncul, fokusnya adalah memuat gambar: mengunduh:

-Apakah gambarnya besar atau tidak?

• Apakah jaringannya lambat?
• cache mencapai no

Namun dalam proyek nyata, pengunduhan seringkali bukan satu-satunya biaya, dan seringkali bahkan bukan biaya inti dari pengguliran. Hal yang cenderung memperlambat pengalaman pada saat-saat kritis sering kali adalah:

• Penguraian gambar
• Pemrosesan ukuran pra-tampilan
• Persiapan gambar yang terjadi pada thread utama saat menggulir

Dengan kata lain, “selesai diunduh” suatu gambar tidak berarti “siap untuk ditampilkan”. Jika banyak pekerjaan pemrosesan gambar didorong ke dalam momen tampilan, halaman akan dengan mudah menjatuhkan bingkai pada waktu yang paling sensitif.

3. Semakin banyak cache, semakin baik. Strategi cache itu sendiri mungkin menimbulkan masalah baru.

Caching memang diperlukan, namun caching tidak pernah membutuhkan biaya.

Jika strategi caching tidak jelas, konsekuensi umumnya meliputi:

• Cache jelas terkena, tetapi memori semakin tinggi.
• Disk caching terlalu agresif dan strategi pembersihannya tidak masuk akal
• Gambar yang sama di-cache berulang kali dalam berbagai ukuran
• Cache hit terlihat bagus saat berpindah daftar dengan cepat, namun halaman masih macet

Hal ini menunjukkan bahwa apa yang sebenarnya ingin diselesaikan oleh caching bukan hanya “kurangi waktu berikutnya”, tetapi juga mencakup:

• Berapa ukuran cachenya
• Berapa lama untuk disimpan
• Kapan harus dihilangkan
• Sumber daya mana yang cocok untuk cache memori dan mana yang hanya cocok untuk cache disk

Oleh karena itu, cache gambar tidak pernah dapat dijelaskan dengan jelas hanya dengan “menambahkan cache”. Ini pada dasarnya adalah serangkaian strategi siklus hidup sumber daya.

4. Gambar dalam daftar kemungkinan besar menjadi sumber kelambatan.

Karena skenario daftar secara alami memenuhi beberapa kondisi berisiko tinggi:

• Sejumlah besar gambar di layar yang sama
• Frekuensi gulir tinggi
• Penggunaan kembali dan daur ulang sering terjadi
• Pengguna sangat sensitif terhadap frame yang terjatuh

Jika Anda juga melakukan hal ini secara bersamaan dalam skenario ini:

• Penguraian gambar
• Perhitungan ukuran
• Pemangkasan sudut membulat
• Hamparan teks kaya

Kemudian thread utama dapat dengan mudah kewalahan selama pengguliran.

Oleh karena itu, aspek terpenting dari pengoptimalan gambar daftar adalah:

Apakah pekerjaan ini terjadi pada jalur kritis yang bergulir?

Jika terjadi pada jalur kritis, sekecil apapun biaya tambahannya, hal tersebut akan diperbesar dengan penggulungan frekuensi tinggi.

5. Kesalahpahaman yang sangat umum: semua masalah gambar disebabkan oleh masalah jaringan

Dalam proyek nyata, orang sering berkata:

• Gambarnya banyak, jadi lambat
• Gambarnya lambat, jadi masalah jaringan

Alur pemikiran ini seringkali tidak lengkap.

Karena banyak masalah gambar yang masih ada bahkan dalam kondisi jaringan yang kuat dan cache hits. Alasannya adalah:

• Gambar sudah didapat, namun belum didecode terlebih dahulu
• Ukuran gambar tidak sesuai dan telah dilakukan pemrosesan tambahan sebelum ditampilkan.
• Status berubah terlalu banyak saat daftar di-scroll, menyebabkan banyak gambar ulang

Jadi dalam pertanyaan bergambar, “akuisisi sumber daya” hanyalah sebagian dari tautan. Kesulitan sebenarnya adalah apakah setiap langkah tautan terjadi pada waktu yang tepat.

6. Saat mengoptimalkan link gambar, beberapa pertanyaan yang paling sering saya ajukan

Jika saya memecahkan masalah kinerja terkait gambar hari ini, saya biasanya akan mulai dengan bertanya:

1. Masalahnya adalah layar pertama lambat, daftar macet, atau memori tinggi.
2. Apakah gambar mulai memerlukan biaya pemrosesan yang tinggi pada saat ditampilkan?
3. Apakah gambar yang dimuat saat ini memiliki ukuran yang sesuai dan bukan merupakan pengurangan besar dari gambar aslinya?
4. Apa yang masuk ke cache? Apakah gambar asli, gambar yang diproses, atau ukuran kunci tidak kena sama sekali?
5. Apakah tautan gambar memberikan terlalu banyak pekerjaan pada thread utama?

Pertanyaan-pertanyaan ini lebih berharga daripada “coba perpustakaan lain” karena secara langsung memperkirakan biaya sebenarnya.

7. Kesimpulan: Masalah gambar sering terjadi. Di permukaan, tampak seperti gambaran yang istimewa, namun kenyataannya lebih dekat dan secara alami mencakup berbagai dimensi sumber daya.

Singkatnya, saya akan mengatakan:

Alasan mengapa pemuatan gambar dan cache selalu menjadi area dengan insiden masalah kinerja yang tinggi adalah karena di permukaan sepertinya “gambar itu sulit”, namun sebenarnya ini lebih dekat dengan fakta bahwa ini juga melibatkan bandwidth, CPU, memori, waktu rendering, dan manajemen siklus hidup. Begitu tautan apa pun dirancang secara tidak masuk akal, masalahnya akan menjadi lebih besar dengan cepat.

Jadi yang sebenarnya perlu dilakukan optimasi gambar bukan sekedar cache saja, tapi juga:

• Unduh
• Dekode
• Perbesar
• tembolok
• Tampilkan waktu

Satukan seluruh tautan ini.