Alat pembangun · Pengekod & penyahkod Base64
Imej Inline Base64 dalam CSS: apabila data: URI membantu dan apabila ia menyakitkan
· Mengapa ia penting
asas64 prestasi
Memasukkan imej sebagai data Base64: URI mengalih keluar permintaan tetapi mengembangkan fail dan mengalahkan caching. Siaran ini memaparkan apabila dagangan itu berbaloi dan apabila fail berasingan lebih pantas.
Lembaran gaya yang meningkat kepada ratusan kilobait — tabiat sebaris satu pasukan dan cara ia muncul dalam masa pemuatan
Pasukan pembangunan memutuskan bahawa menyelaraskan ikon kecil sebagai data Base64: URI dalam CSS mereka akan mengurangkan HTTP permintaan dan meningkatkan kelajuan pemuatan halaman. Lama kelamaan, apabila lebih banyak ikon ditambahkan, helaian gaya meningkat kepada 400 kilobait.
Himpunan CSS, yang sepatutnya mengandungi peraturan gaya, kini dikuasai oleh data imej. Pasukan mengukur masa pemuatan dan mendapati halaman itu lebih perlahan daripada sebelum sebaris, bukan lebih pantas. Masalahnya menjadi jelas: helaian gaya 400-kilobait dimuat turun pada setiap pemuatan halaman dan dicache bagi setiap halaman, manakala jika ikon adalah fail berasingan, satu fail ikon akan dicache dan dikongsi di setiap halaman.
Apakah data: URI sebaris dan sebab ia adalah Base64 — sintaks, jenis media dan penalti saiz
Menambah lebih banyak halaman pada tapak menjadikan masalah lebih teruk, kerana setiap halaman memuat turun lembaran gaya yang sama dengan semua imej sebaris itu sekali lagi. Siaran ini menerangkan maksud data: URI, sebab ia adalah Base64, cara inlining mempengaruhi caching dan prestasi, dan peraturan praktikal untuk menentukan bila pertukaran itu berbaloi. Data: URL ialah satu cara untuk membenamkan sumber secara langsung dalam fail HTML atau CSS dan bukannya memaut ke fail luaran. Sintaksnya ialah data:mediaType;base64,encoded_bytes.
MediaType mengisytiharkan jenis sumber yang diikuti, seperti imej/svg+xml untuk SVG, imej/png untuk PNG atau teks/plain untuk teks. Bendera ;base64 menunjukkan bahawa muatan adalah dikodkan Base64 dan bukannya teks yang dikodkan peratus. Encoded_bytes ialah data sebenar. Apabila pelayar menemui data: URL dalam sifat href, src atau imej latar belakang, ia menyahkod Base64 dan menjadikan sumber sebaris. Tiada permintaan HTTP berlaku kerana sumber sudah ada, dibenamkan dalam dokumen induk. Ini menjimatkan satu atau beberapa permintaan HTTP, yang penting dalam dunia HTTP/1.1 di mana setiap permintaan mempunyai overhed.
Caching dan laluan kritikal — mengapa bait sebaris dimuat turun sekali lagi dengan setiap halaman yang termasuk helaian gaya
Dalam dunia HTTP/2 atau HTTP/3 di mana banyak permintaan boleh dimultiplekskan melalui satu sambungan, penjimatan adalah lebih kecil. Penalti saiz pengekodan Base64 adalah serta-merta dan ketara. Ikon SVG yang 3 kilobait apabila disimpan sebagai fail XML menjadi 4 kilobait apabila Base64 dikodkan dan dibenamkan sebagai data: URI. Peningkatan saiz 33% daripada pengekodan mesti ditambahkan pada setiap halaman yang mengandungi helaian gaya. Jika ikon digunakan pada sepuluh halaman, helaian gaya dimuat turun sepuluh kali, setiap kali termasuk imej berkod 4-kilobait yang sama.
Jika ikon adalah fail yang berasingan, 3-kilobait asal akan dimuat turun sekali dan dicache, kemudian digunakan daripada cache pada kesemua sepuluh halaman. Pilihan ekonomi adalah jelas untuk kebanyakan ikon: fail berasingan adalah lebih kecil secara keseluruhan. Faedah sebaris terpakai sahaja apabila ikon digunakan pada tepat satu halaman atau sangat sedikit halaman, dan ikon itu benar-benar kritikal untuk halaman tersebut. Favicon yang muncul pada setiap halaman adalah calon yang lemah untuk inlining; ia adalah lebih baik sebagai fail cache yang berasingan.
Kos penghuraian pada klien — berapa besar rentetan sebaris dikendalikan oleh penghurai CSS dan HTML, diterangkan secara kualitatif
Ilustrasi sekali sahaja yang digunakan sahaja pada halaman pendaratan mungkin mendapat manfaat daripada sebaris untuk menyimpan permintaan. Caching mengalahkan kebanyakan faedah menyebaris data: URI dalam helaian gaya. Lembaran gaya biasanya dicache untuk beberapa hari atau minggu. Apabila helaian gaya dimuat turun, setiap sumber yang sebaris di dalamnya dimuat turun semula, walaupun pelayar sudah mempunyai imej itu dicache. Jika helaian gaya dikemas kini, semua data sebaris mesti disahkan semula atau dimuat turun semula, walaupun sahaja satu CSS peraturan diubah.
Ini menyebabkan kembung: perubahan kepada warna atau jarak mencetuskan muat turun semula penuh helaian gaya, termasuk kilobait data imej yang tidak berubah. Fail imej yang berasingan boleh dicache secara bebas dengan pengepala tamat tempohnya sendiri, dikemas kini secara berasingan dan digunakan semula merentas lembaran gaya dan halaman. Cache pelayar jauh lebih cekap apabila sumber adalah fail berasingan daripada apabila ia dibenamkan dalam dokumen yang lebih besar. Kos penghuraian dan pemaparan kompaun apabila rentetan Base64 yang besar dibenamkan dalam helaian gaya. Penghurai CSS mesti membaca keseluruhan helaian gaya sebelum menggunakan peraturan.
Contoh yang berjaya: menyelitkan ikon kecil SVG sebagai teks — menampal penanda ke dalam pengekod dan memasang data: URI dengan tangan
Lembaran gaya 400-kilobait dengan Base64 sebaris ialah 400 kilobait teks yang mesti dihuraikan sebelum sebarang peraturan boleh digunakan. Penghurai HTML memaparkan halaman dengan data yang besar: URI dalam atribut gaya atau sifat imej latar belakang mesti menyahkod Base64 dan membina imej sebelum elemen boleh dipaparkan. Untuk ikon SVG mudah ini adalah remeh. Untuk imej yang lebih kompleks atau ikon yang lebih besar, penyahkodan dan pemaparan berlaku pada urutan utama, yang berpotensi menyekat interaktiviti. Kos kualitatif adalah nyata tetapi sukar untuk diukur tanpa pemprofilan.
Sebagai peraturan, jika imej sebaris adalah sesuatu yang lebih besar daripada beberapa kilobait, fail berasingan adalah lebih pantas. Contoh yang berfungsi menunjukkan pertukaran yang tepat. Ambil yang mudah SVG ikon anak panah, 1.2 kilobait daripada XML. Base64 dikodkan ia menjadi 1600 watak, atau kira-kira 1.6 kilobait dengan data: URL awalan. A berasingan CSS peraturan dengan imej latar belakang: url(/icons/arrow.svg) menambah mungkin 40 bytes kepada lembaran gaya. Fail ikon dimuat turun sekali, dicache dan digunakan semula. Inlining menjimatkan satu HTTP meminta ikon yang satu itu tetapi menambah 1.6 kilobait kepada setiap beban lembaran gaya.
Peraturan praktikal yang tahan — aset kecil, kritikal, sebaris guna sekali; segala-galanya sebagai fail
Jika helaian gaya ialah 50 kilobait dan dikongsi merentasi 20 halaman, menyelaraskan ikon itu meningkatkan jumlah muat turun sebanyak 32 kilobait setiap lawatan tapak. Permintaan HTTP yang dijimatkan ialah beberapa ratus bait overhed paling banyak. Permintaan juga dimultiplekskan secara automatik dalam HTTP/2, menghapuskan perbezaan overhed. Perdagangan inlining rugi teruk melainkan helaian gaya kecil, ikonnya besar atau ikon muncul tepat pada satu halaman dan tiada di tempat lain. Peraturan praktikal yang bertahan dalam penelitian adalah terhad dan khusus.
Aset yang kecil, kritikal dan sekali guna boleh diselaraskan. Anak panah 200-bait SVG yang muncul sahaja pada satu halaman luar biasa mungkin diselaraskan untuk menyimpan permintaan di atas kepala. Segala-galanya harus berasingan. Logik laluan pemaparan kritikal adalah penting: jika ikon mesti kelihatan serta-merta dan setiap milisaat masa muat kos penukaran, sebaris mungkin menang. Untuk halaman biasa dengan ikon biasa, fail berasingan hampir selalu lebih baik. Uji kedua-dua pendekatan dengan aset sebenar anda dan ukur pemuatan halaman, kadar capan cache dan permintaan air terjun.
Perkara ini tidak meliputi — HTTP/2 dan HTTP/3 butiran pemultipleksan dan pemampatan format imej
Jangan anggap inlining ialah pengoptimuman tanpa pengukuran. Cara paling mudah untuk berakhir dengan helaian gaya yang kembung adalah dengan sebaris secara berperingkat tanpa mengukur sama ada setiap penambahan sebenarnya lebih pantas. Pengekod & penyahkod Base64 membantu anda membuat keputusan ini sebelum membuat sebaris. Tampalkan penanda SVG anda atau sumber ikon lain ke dalam alat sebagai teks. Klik Encode dan tetapkan pilihan untuk menjana data: URI. Alat ini menunjukkan kepada anda panjang tepat data: URL. Bandingkan itu dengan saiz peraturan CSS yang berasingan dan fail aset itu sendiri.
Kira berapa banyak halaman yang perlu berkongsi lembaran gaya untuk mencapai titik pulang modal pada sebaris berbanding fail berasingan. Kumpul data: URI dan ujinya dalam halaman HTML sebenar sebelum anda menyerahkannya pada lembaran gaya. Jika URI lebih panjang daripada beberapa ratus aksara, kos pembenaman mungkin lebih besar daripada faedah menyimpan permintaan. Gunakan alat untuk menguji ikon dan aset sebenar anda, kemudian ukur kesan pada metrik pemuatan halaman sebenar anda sebelum dan selepas sebaris.
Bawa pulang: sebaris dengan berhati-hati dan ukur — cara pengekod & penyahkod Base64 membolehkan anda mengekod SVG markup dan melihat saiz yang tepat sebelum anda melakukan
Pendekatan berprestasi adalah selektif tentang inlining. Ikon yang digunakan pada setiap halaman atau merentasi banyak halaman adalah fail cache yang berasingan. Ikon yang digunakan pada tepat satu halaman atau benar-benar kritikal untuk cat pertama boleh diselaraskan. Ukur pertukaran untuk aset dan halaman sebenar anda dan bukannya mengikut nasihat generik. Gunakan pengekod & penyahkod Base64 untuk melihat saiz tepat mana-mana aset sebaris sebelum anda menambahkannya pada helaian gaya. Penalti saiz adalah nyata dan berganda pada setiap paparan halaman.
Caching dan permintaan pemultipleksan telah menjadikan manfaat asal penyebarisan menjadi kurang penting. Untuk kebanyakan aplikasi moden, helaian gaya yang lebih kecil dan kecekapan cache yang lebih baik daripada fail berasingan melebihi overhed permintaan. Sebaris dengan berhati-hati, ukur hasil dan ukuran kepercayaan berbanding gerak hati.