


Bagaimana Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas
Menyimpan Hari - Mengendalikan Imej Besar dalam Pelayar" />
Seorang pelanggan memuat naik 28 imej, setiap satu sekitar 5800 x 9500 piksel dan saiz 28 MB. Apabila cuba memaparkan imej ini dalam penyemak imbas, keseluruhan tab membeku - malah enggan ditutup - selama 10 minit yang kukuh. Dan ini adalah pada mesin mewah dengan CPU Ryzen 9 dan GPU RTX 4080, bukan komputer riba kecil.
Inilah Situasinya
Dalam CMS (Grace Web) kami, apabila pentadbir memuat naik fail - sama ada gambar atau video - kami memaparkannya serta-merta selepas muat naik selesai. Ia bagus untuk UX - ia mengesahkan muat naik berjaya, mereka memuat naik perkara yang mereka mahu dan ia menunjukkan responsif UI untuk rasa yang lebih baik.
Tetapi dengan imej besar ini, penyemak imbas hampir tidak dapat memaparkannya dan terhenti.
Adalah penting untuk ambil perhatian bahawa masalahnya bukan pada muat naik itu sendiri tetapi dengan memaparkan imej besar ini. Memaparkan 28 imej besar secara serentak dan satu demi satu adalah terlalu banyak. Walaupun pada halaman kosong, ia hanya... tidak.
Mengapa Ini Berlaku (Selam Dalam)?
Bila-bila masa anda memaparkan gambar dalam tag, penyemak imbas melalui keseluruhan proses yang menggunakan CPU, RAM, GPU, dan kadangkala pemacu - kadangkala melalui proses ini beberapa kali sebelum gambar dipaparkan semasa pemuatan imej dan pengiraan semula reka letak. Ia melalui pengiraan piksel, pemindahan data antara perkakasan, algoritma interpolasi, dsb. Untuk penyemak imbas, ia merupakan proses yang penting.
Penyelesaian Brainstormed
Kami mempertimbangkan beberapa pilihan:
-
Ubah Saiz Serta-merta Selepas Muat Naik dan Paparkan Imej Kecil
- Isu: Saiz semula mungkin mengambil masa terlalu lama dan tidak dijamin untuk serta-merta, terutamanya jika baris gilir saiz semula tidak kosong - mengakibatkan sistem tidak responsif.
-
Semak Saiz Fail dan Paparkan Hanya Nama Mereka untuk Fail Besar
- Isu: Ini akan menjejaskan pengalaman pengguna, terutamanya bagi mereka yang memerlukan kawalan dan pemeriksaan yang lebih besar terhadap mana-mana bahan media (secara kebetulan, mereka selalunya sama dengan fail besar).
Kedua-dua penyelesaian ini dirasakan tidak boleh digunakan. Kami tidak mahu mengehadkan keupayaan pentadbir kami untuk memuat naik apa sahaja yang mereka perlukan, dan kami juga tidak mahu berkompromi dengan pengalaman pengguna.
Mentol lampu! Menggunakan
Saya teringat bahawa .
Menguji Teori
Kami memutuskan untuk menggantikan elemen dengan
const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const img = new Image(); // img.src = URL.createObjectURL(file); // Use this if you're working with uploaded files img.src = filesroot + data.file_path; // Our existing file path img.onload = function() { // Resize canvas to desired size (for preview) canvas.width = 80 * (img.width / img.height); // Adjust scaling as needed canvas.height = 80; // Draw the image onto the canvas, resizing it in the process ctx.drawImage(img, 0, 0, canvas.width, canvas.height); file_div.innerHTML = ''; // Prepared <div> in UI to display the thumbnail file_div.appendChild(canvas); };
Hasilnya
Peningkatan adalah serta-merta dan dramatik! Penyemak imbas bukan sahaja mengendalikan 28 imej besar tanpa sebarang gangguan, tetapi kami juga meneruskannya dengan memuatkan imej 120 MB berukuran 28,000 x 17,000 piksel, dan ia masih berfungsi seolah-olah ia ialah ikon kecil.
Di Mana Perbezaannya?
Menggunakan
-
masih cuba untuk memaparkan 28,000 * 17,000 = 476,000,000 piksel.
hanya melukis 80 * 80 = 6,400 piksel.
Dengan mengubah saiz imej dalam
Langkah Seterusnya
Memandangkan kejayaan ini, kami kini mempertimbangkan untuk menggantikan dengan
Kami akan menjalankan ujian dan penanda aras untuk mengukur sebarang peningkatan prestasi. Saya pasti akan berkongsi penemuan kami dalam artikel akan datang.
Kaveat Penting
Semasa menggunakan
-
Kebolehaksesan:
elemen boleh dibaca oleh pembaca skrin, membantu pengguna cacat penglihatan.
-
SEO: Enjin carian mengindeks imej daripada
teg, yang boleh meningkatkan keterlihatan tapak anda. (Dengan cara yang sama, pengikis latihan AI juga "mengindeks" imej. Nah, apa yang boleh anda lakukan...)
-
dengan
boleh digunakan untuk mengesan ketumpatan piksel secara automatik dan menunjukkan gambar yang lebih besar atau lebih kecil untuk kesesuaian yang sempurna— tidak boleh. Saya menulis artikel tentang cara membina . anda
Untuk tapak web awam, sebaiknya ubah saiz imej pada bahagian pelayan dengan betul sebelum menyampaikannya kepada pengguna. Jika anda berminat dengan cara mengautomasikan saiz semula dan pengoptimuman imej, saya menulis artikel mengenai topik itu yang mungkin anda rasa berguna.
Kesimpulan
Saya suka pengoptimuman! Walaupun kami bergerak ke arah perkakasan berprestasi tinggi tempatan setiap hari, dengan mengoptimumkan - walaupun "ia bagus, tetapi boleh menjadi lebih baik" - kami boleh menghalang isu seperti ini daripada bermula.
Pendekatan ini bukan standard. Dan saya tidak begitu mengambil berat tentang piawaian. Mereka sering dianggap sebagai peraturan yang sukar, tetapi ia hanya garis panduan. Penyelesaian ini sesuai. Kami tidak mempunyai pelanggan dengan peranti purba tanpa
Adakah anda mempunyai pengalaman yang serupa? Bagaimana anda mengendalikannya? Jangan ragu untuk berkongsi pengalaman anda atau bertanya soalan dalam ulasan di bawah!
Atas ialah kandungan terperinci Bagaimana Menyimpan Hari - Mengendalikan Imej Besar dalam Penyemak Imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool
Gambar buka pakaian secara percuma

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas











JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Trend terkini dalam JavaScript termasuk kebangkitan TypeScript, populariti kerangka dan perpustakaan moden, dan penerapan webassembly. Prospek masa depan meliputi sistem jenis yang lebih berkuasa, pembangunan JavaScript, pengembangan kecerdasan buatan dan pembelajaran mesin, dan potensi pengkomputeran IoT dan kelebihan.

Enjin JavaScript yang berbeza mempunyai kesan yang berbeza apabila menguraikan dan melaksanakan kod JavaScript, kerana prinsip pelaksanaan dan strategi pengoptimuman setiap enjin berbeza. 1. Analisis leksikal: Menukar kod sumber ke dalam unit leksikal. 2. Analisis Tatabahasa: Menjana pokok sintaks abstrak. 3. Pengoptimuman dan Penyusunan: Menjana kod mesin melalui pengkompil JIT. 4. Jalankan: Jalankan kod mesin. Enjin V8 mengoptimumkan melalui kompilasi segera dan kelas tersembunyi, Spidermonkey menggunakan sistem kesimpulan jenis, menghasilkan prestasi prestasi yang berbeza pada kod yang sama.

JavaScript adalah bahasa utama pembangunan web moden dan digunakan secara meluas untuk kepelbagaian dan fleksibiliti. 1) Pembangunan front-end: Membina laman web dinamik dan aplikasi satu halaman melalui operasi DOM dan kerangka moden (seperti React, Vue.js, sudut). 2) Pembangunan sisi pelayan: Node.js menggunakan model I/O yang tidak menyekat untuk mengendalikan aplikasi konkurensi tinggi dan masa nyata. 3) Pembangunan aplikasi mudah alih dan desktop: Pembangunan silang platform direalisasikan melalui reaktnatif dan elektron untuk meningkatkan kecekapan pembangunan.

Python lebih sesuai untuk pemula, dengan lengkung pembelajaran yang lancar dan sintaks ringkas; JavaScript sesuai untuk pembangunan front-end, dengan lengkung pembelajaran yang curam dan sintaks yang fleksibel. 1. Sintaks Python adalah intuitif dan sesuai untuk sains data dan pembangunan back-end. 2. JavaScript adalah fleksibel dan digunakan secara meluas dalam pengaturcaraan depan dan pelayan.

Artikel ini menunjukkan integrasi frontend dengan backend yang dijamin oleh permit, membina aplikasi edtech SaaS yang berfungsi menggunakan Next.Js. Frontend mengambil kebenaran pengguna untuk mengawal penglihatan UI dan memastikan permintaan API mematuhi dasar peranan

Peralihan dari C/C ke JavaScript memerlukan menyesuaikan diri dengan menaip dinamik, pengumpulan sampah dan pengaturcaraan asynchronous. 1) C/C adalah bahasa yang ditaip secara statik yang memerlukan pengurusan memori manual, manakala JavaScript ditaip secara dinamik dan pengumpulan sampah diproses secara automatik. 2) C/C perlu dikumpulkan ke dalam kod mesin, manakala JavaScript adalah bahasa yang ditafsirkan. 3) JavaScript memperkenalkan konsep seperti penutupan, rantaian prototaip dan janji, yang meningkatkan keupayaan pengaturcaraan fleksibiliti dan asynchronous.

Saya membina aplikasi SaaS multi-penyewa berfungsi (aplikasi edTech) dengan alat teknologi harian anda dan anda boleh melakukan perkara yang sama. Pertama, apakah aplikasi SaaS multi-penyewa? Aplikasi SaaS Multi-penyewa membolehkan anda melayani beberapa pelanggan dari Sing
