URI data dan MHTML menyelesaikan sepenuhnya semua pelayar_HTML/Xhtml_pengeluaran halaman web

URI Data

URI Data ialah skema yang ditakrifkan oleh RFC 2397 untuk membenamkan fail kecil terus ke dalam dokumen. Melalui sintaks berikut, anda boleh menukar fail kecil kepada pengekodan yang ditentukan dan membenamkannya terus ke dalam halaman:

data:[][;base64],

1. Jenis MIME: Menentukan MIME data terbenam. Bentuknya ialah [type]/[subtype]; contohnya, MIME yang sepadan dengan imej png ialah imej/png. Parameter boleh digunakan untuk menentukan maklumat tambahan Dalam lebih banyak kes, ia adalah parameter charset yang digunakan untuk menentukan kaedah pengekodan teks seperti teks/biasa dan teks/htm. Lalai ialah text/plain;charset=US-ASCII.
2. base64: Pengekodan data berikutan pernyataan ialah base64, jika tidak, data mesti dikodkan peratus (iaitu, urlencode kandungan).

Pada abad yang laluHTML4.01 memperkenalkan skema URI DataSetakat hari inikecuali untuk IE6 dan IE7, semua pelayar utama menyokong, tetapi IE8 Sokongan untuk. URI Data masih terhad Ia hanya menyokong objek (hanya untuk gambar), img, jenis input=imej, pautan dan URL dalam CSS dan saiz data tidak boleh melebihi 32K.

Kelebihan:

1. Kurangkan bilangan permintaan HTTP, tiada penggunaan sambungan TCP dan had bilangan penyemak imbas serentak di bawah nama domain yang sama.
2. Lebar jalur akan dikurangkan untuk fail kecil. Walaupun jumlah data akan meningkat selepas pengekodan, pengepala http akan dikurangkan Apabila jumlah data dalam pengepala http lebih besar daripada kenaikan pengekodan fail, lebar jalur akan dikurangkan.
3. Untuk tapak HTTPS, akan ada gesaan keselamatan apabila menggunakan HTTPS dan HTTP bersama-sama, dan HTTPS lebih mahal daripada HTTP, jadi kelebihan URI Data dalam hal ini lebih jelas.
4. Anda boleh menyimpan keseluruhan halaman multimedia sebagai fail.

Kelemahan:

1. Tidak boleh digunakan semula Jika kandungan yang sama digunakan pada dokumen yang sama beberapa kali, ia perlu diulang beberapa kali, yang meningkatkan jumlah data dan meningkatkan masa muat turun.
2. tidak boleh dicache sendiri, jadi ia akan dimuat semula apabila dokumen yang mengandunginya dimuatkan semula.
3. Pelanggan perlu menyahkod semula dan memaparkan, yang meningkatkan penggunaan mata.
4. Mampatan data tidak disokong, pengekodan base64 akan meningkatkan saiz sebanyak 1/3 dan volum data akan meningkat lebih banyak selepas pengekodan urlen.
5. Ia tidak sesuai untuk penapisan perisian keselamatan, dan terdapat juga risiko keselamatan tertentu.

MHTML

MHTML ialah singkatan MIME HTML (Multipurpose Internet Mail Extension HTML), iaitu penyelesaian yang ditakrifkan oleh RFC 2557 untuk menyimpan semua kandungan halaman multimedia ke dalam dokumen yang sama. Penyelesaian ini dicadangkan oleh Microsoft untuk menyokongnya bermula dari IE5.0, dan Opera9.0 juga mula menyokongnya Safari boleh menyimpan fail dalam format .mht (akhiran fail MHTML), tetapi tidak menyokong memaparkannya.

MHTML agak serupa dengan URI Data Ia mempunyai fungsi yang lebih berkuasa dan sintaks yang lebih kompleks, dan tidak mempunyai kelemahan "tidak boleh digunakan semula" dalam URI Data Walau bagaimanapun, MHTML tidak fleksibel dan mudah digunakan, seperti URL rujukan sumber Ia boleh menjadi alamat relatif dalam fail mht, jika tidak, ia mestilah alamat mutlak. hedger 《Cross Browser Base64 Encoded Images Embedded in HTML》Penyelesaian untuk IE menggunakan laluan relatif kerana Content-type: message/rfc822 diisytiharkan supaya IE akan menghuraikannya mengikut MHTML modified -type memerlukan penggunaan protokol MHTML Dalam kes ini, laluan mutlak mesti digunakan, seperti 《MHTML – apabila anda memerlukan data: URI dalam IE7 dan di bawah》.

Mohon

Gabungan URI Data dan MHTML boleh menyelesaikan sepenuhnya masalah semua penyemak imbas arus perdana Memandangkan ia tidak boleh dicache dan digunakan semula, ia tidak sesuai untuk digunakan secara langsung dalam halaman, tetapi ia sesuai untuk digunakan dalam fail CSS dan JavaScript. Penggunaan gambar yang sesuai mempunyai kelebihan yang besar:

1. Mengurangkan bilangan permintaan dengan hebat Kini CSS tapak web yang besar merujuk kepada sejumlah besar sumber imej.
2. Kedua-dua CSS dan JavaScript boleh dicache, secara tidak langsung merealisasikan caching data.
3. Menggunakan CSS boleh menyelesaikan masalah penggunaan semula URI data
4. PerpisahanCSS Sprites, CSS Sprites nampaknya mengurangkan bilangan permintaan, tetapi selain membawa pengecualian dalam situasi yang tidak menentu, CSS Sprites juga memerlukan penggabungan imej tiruan, walaupun terdapat ialah alat penggabungan, masih memerlukan banyak masa yang dihabiskan untuk cara membuat teka-teki dengan berkesan, dan membawa kesukaran penyelenggaraan. Apabila anda mengikuti prinsip reka bentuk tertentu, anda boleh meninggalkan CSS Sprite sepenuhnya untuk menulis CSS, dan akhirnya menggunakan alatan untuk menukar imej kepada URI Data dan MHTML apabila memuat naik ke pelayan, seperti "Menggunakan data-uri untuk menggabungkan helaian gaya dan Alat yang dilaksanakan dalam python dalam gambar " boleh menjimatkan banyak masa.
5. Pengekodan Base64 meningkatkan fail imej sebanyak 1/3 Menggunakan URI Data dan MHTML pada masa yang sama adalah bersamaan dengan peningkatan sebanyak 2/3, tetapi CSS dan JavaScript boleh menggunakan pemampatan gzip, yang boleh menjimatkan 2/3 daripada pemampatan. volum data, jadi gunakan Volume data akhir selepas pemampatan gzip ialah (1 1/3) * 2 * (1/3) = 8/9, jadi trafik akhir dikurangkan.

Untuk memudahkan pelaksanaan Data URI dan MHTML dalam CSS, saya menulis Data URI & MHTML generator Anda boleh melihat contoh aplikasi URI & MHTML Data.

Apabila menggunakan MHTML dalam fail CSS, URL mesti menggunakan laluan mutlak, yang sangat tidak fleksibel, jadi anda boleh mempertimbangkan untuk menggunakan ungkapan 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/
*/
*background-image:expression(function(ele){
ele.style.backgroundImage = 'url(mhtml:'
dokumen. getElementById('data-uri-css').getAttribute('href',4)