Situs web YanKaven : http://dancewithnet.com/
URI Data
URI Data adalah skema yang ditentukan oleh RFC 2397 untuk menyematkan file kecil langsung ke dalam dokumen. Melalui sintaks berikut, Anda dapat mengonversi file kecil menjadi pengkodean tertentu dan menyematkannya langsung ke halaman:
data:[][;base64],
- Tipe MIME: Menentukan MIME dari data yang disematkan. Bentuknya adalah parameter [type]/[subtype]; Parameter dapat digunakan untuk menentukan informasi tambahan. Dalam lebih banyak kasus, ini adalah parameter charset yang digunakan untuk menentukan metode pengkodean teks seperti teks/polos dan teks/htm. Standarnya adalah teks/polos;charset=US-ASCII.
- base64: Pengkodean data setelah pernyataan adalah base64 , jika tidak, data harus dikodekan persen (yaitu, urlencode konten).
HTML 4.01 memperkenalkan skema URI Data pada abad terakhir. Saat ini , semua browser utama kecuali IE6 dan IE7 mendukungnya . Namun, IE8 masih memiliki keterbatasan dalam dukungannya untuk URI Data . Ia hanya mendukung objek (hanya gambar). img, input type=image, link dan URL dalam CSS, dan ukuran data tidak boleh lebih dari 32K.
keuntungan:
- Kurangi jumlah permintaan HTTP , dan tidak ada konsumsi koneksi TCP dan batas konkurensi browser dengan nama domain yang sama.
- Bandwidth akan dikurangi untuk file kecil. Meskipun jumlah data akan bertambah setelah pengkodean, header http akan berkurang. Ketika jumlah data di header http lebih besar dari peningkatan pengkodean file, bandwidth akan berkurang.
- Untuk situs HTTPS, akan ada petunjuk keamanan ketika HTTPS dan HTTP digabungkan, dan HTTPS lebih mahal daripada HTTP, sehingga Data URI memiliki keunggulan yang lebih jelas dalam hal ini.
- Seluruh halaman multimedia dapat disimpan sebagai file.
kekurangan :
- Itu tidak dapat digunakan kembali. Jika konten yang sama diterapkan ke dokumen yang sama beberapa kali, konten tersebut perlu diulang beberapa kali, yang sangat meningkatkan jumlah data dan meningkatkan waktu pengunduhan.
- Itu tidak dapat di-cache sendiri, jadi harus dimuat ulang ketika dokumen yang memuatnya dimuat ulang.
- Klien perlu mendekode ulang dan menampilkannya, yang meningkatkan konsumsi poin.
- Kompresi data tidak didukung, pengkodean base64 akan meningkatkan ukurannya sebesar 1/3, dan volume data akan meningkat lebih banyak lagi setelah pengkodean urlen.
- Ini tidak kondusif untuk penyaringan perangkat lunak keamanan, dan terdapat juga risiko keamanan tertentu.
MHTML
MHTML adalah singkatan dari MIME HTML (Multi Purpose Internet Mail Extension HTML) . Ini adalah solusi yang ditentukan oleh RFC 2557 untuk menyimpan semua konten halaman multimedia ke dalam dokumen yang sama. Solusi ini diusulkan oleh Microsoft untuk mendukungnya mulai dari IE5.0, dan Opera9.0 juga mulai mendukungnya. Safari dapat menyimpan file dalam format .mht (akhiran file MHTML), tetapi tidak mendukung tampilannya.
MHTML relatif mirip dengan URI Data, dengan fungsi yang lebih kuat dan sintaksis yang lebih kompleks, serta tidak memiliki kelemahan "tidak dapat digunakan kembali" pada URI Data. Namun, MHTML tidak fleksibel dan nyaman untuk digunakan referensi sumber daya ada di file mht. dapat berupa alamat relatif, jika tidak maka harus berupa alamat absolut. solusi hedger untuk IE di "Cross Browser Base64 Encoded Images Embedded in HTML" menggunakan jalur relatif karena Content-type: message/rfc822 dideklarasikan sehingga IE mem-parsingnya sesuai dengan MHTML untuk menggunakan protokol MHTML, jalur absolut harus digunakan saat ini, seperti "MHTML – ketika Anda membutuhkan data: URI di IE7 dan di bawahnya" .
aplikasi
Kombinasi Data URI dan MHTML dapat sepenuhnya menyelesaikan masalah semua browser utama karena tidak dapat di-cache dan digunakan kembali, sehingga tidak cocok untuk digunakan langsung di halaman, tetapi dapat digunakan dengan tepat untuk gambar dalam file CSS dan JavaScript. Ada keuntungan besar dalam menggunakan:
- Jumlah permintaan sangat berkurang. Sekarang CSS situs web besar mengacu pada sejumlah besar sumber daya gambar.
- CSS dan JavaScript dapat di-cache, secara tidak langsung mengimplementasikan data caching.
- Menggunakan CSS dapat memecahkan masalah penggunaan kembali URI data
- Ucapkan selamat tinggal pada Sprite CSS . Kemunculan Sprite CSS adalah untuk mengurangi jumlah permintaan. Namun, selain membawa pengecualian dalam keadaan yang tidak pasti , Sprite CSS juga memerlukan penggabungan gambar buatan efektif secara artifisial. Teka-teki membutuhkan banyak waktu dan menyulitkan pemeliharaan. Saat Anda mengikuti prinsip desain tertentu, Anda dapat sepenuhnya meninggalkan Sprite CSS untuk menulis CSS, dan terakhir menggunakan alat untuk mengubah gambar menjadi URI Data dan MHTML saat diunggah ke server, seperti "Menggunakan data-uri untuk menggabungkan style sheet dan gambar" Menggunakan alat yang diimplementasikan dengan python, ini dapat menghemat banyak waktu.
- Pengkodean Base64 meningkatkan file gambar sebesar 1/3. Menggunakan URI Data dan MHTML secara bersamaan setara dengan peningkatan 2/3. Namun, CSS dan JavaScript dapat menggunakan kompresi gzip, yang dapat menghemat 2/3 volume data , jadi menggunakan kompresi gzip Jumlah data akhir adalah (1 + 1/3) * 2 * (1/3) = 8/9, sehingga trafik akhir berkurang.
Untuk memfasilitasi implementasi Data URI dan MHTML di CSS, saya menulis generator Data URI & MHTML . Anda dapat melihat contoh aplikasi penggunaannya untuk menghasilkan Data URI & MHTML .
Saat menggunakan MHTML dalam file CSS, URL harus menggunakan jalur absolut, yang sangat tidak fleksibel, sehingga Anda dapat mempertimbangkan untuk menggunakan ekspresi CSS untuk menyelesaikannya ( DEMO ), seperti:
/*
http://old9.blogsome.com/2008/10/26/css-expression-reloaded/
http://dancewithnet.com/2009/07/27/get-right-url-from-html/
*/
*gambar latar belakang:ekspresi(fungsi(elemen){
ele.style.backgroundImage = 'url(mhtml:' +
dokumen.getElementById('data-uri-css').getAttribute('href',4) +
'!03114501408821761.gif)';
}(ini));
Teks asli: http://dancewithnet.com/2009/08/15/data-uri-mhtml/
