Artikel Pengenalan Wulin.com (www.vevb.com): Banyak orang bertanya apa itu HTML5? Kami mengatakan bahwa metode yang dapat kami gunakan HTML5 terlebih dahulu adalah untuk mengubah Doctype terlebih dahulu, karena banyak halaman masih dalam cara tradisional saat ini. Metode HTML5 kompatibel dengan browser IE, dan dapat digunakan dari IE6 ke IE10, dan dapat didukung oleh browser canggih.
[Catatan Editor] Artikel berikut ini ditulis oleh seorang teknisi TI bernama Zhang Liming, yang diterbitkan di halaman web InfoQ. Kali ini, ia menganalisis kinerja HTML5 dari 9 aspek yang berbeda dalam teks lengkap, yang masih layak dibaca oleh pengembang yang sesuai.
Dari perspektif kinerja, HTML5 pertama kali mengurangi dokumen HTML, membuatnya lebih sederhana. Pertama, dari perspektif keterbacaan pengguna, ada banyak hal yang awalnya tidak dipahami oleh pemula untuk pertama kalinya untuk melihat hal -hal ini, dan metode deklarasi HTML5 jelas lebih ramah kepada pengguna. Kedua, deklarasi pengkodean dokumen sangat sederhana jika ada di HTML5. Banyak orang bertanya apa itu HTML5? Kami mengatakan bahwa metode yang dapat kami gunakan HTML5 terlebih dahulu adalah untuk mengubah Doctype terlebih dahulu, karena banyak halaman masih dalam cara tradisional saat ini. Metode HTML5 kompatibel dengan browser IE, dan dapat digunakan dari IE6 ke IE10, dan dapat didukung oleh browser canggih. Jadi cara termudah untuk merangkul HTML5 adalah dengan mengubah Doctype.
1. Label yang lebih sederhana
Hal berikutnya mungkin bukan hal yang sangat umum, tetapi itu adalah sesuatu yang saya sukai, menggunakan metode label yang lebih sederhana. Seperti yang Anda tahu dari nama ini, HTML5 diwarisi dari HTML4. HTML4 memiliki mode dan mode transisi yang ketat. HTML5 mendukung mode transisi ini, yang berarti Anda tidak dapat menutup beberapa tag. Namun, saya tidak merekomendasikan semua tag, misalnya, tag tubuh tidak ditutup, yang tidak kami rekomendasikan. Tetapi p-label yang paling umum digunakan juga adalah daftar tag li. Kenapa kamu bilang begitu? Pertama -tama, dari perspektif visual, metode ini sedikit lebih sederhana. Maka kuncinya adalah bahwa selama proses transfer dokumen, akan ada lebih sedikit konten.
Deklarasi atribut tag HTML5 mendukung tiga cara: kurung tunggal, kurung ganda, dan kurung yang tidak bercabang. Untuk mengurangi ukuran dokumen, saya memilih metode tanpa kutipan ganda atau kutipan tunggal. Namun, perlu dicatat bahwa dengan asumsi itu adalah deklarasi atribut kelas, karena atribut dapat mencakup beberapa kelas, dan ketika beberapa kelas, mereka harus dilampirkan dalam kurung. Dalam hal ini, izinkan saya menunjukkan kepada Anda praktik Google. Google sendiri memiliki halaman yang sepenuhnya mempraktikkan di atas, mengurangi ukuran dokumen sebesar 20%, mengurangi transfer dokumen HTML sebesar 20%. Jika semuanya dipraktikkan, ia dapat mencapai penurunan antara 5% dan 20%. Ini adalah langkah pertama, mengurangi ukuran dokumen HTML.
2. Optimalisasi gambar
Berikutnya adalah tentang optimalisasi gambar, yang selalu merupakan elemen yang mencintai dan membenci. Karena ketika ada terlalu banyak gambar, itu akan secara serius menyeret kecepatan pemuatan seluruh halaman. Mengenai metode optimasi gambar, ada banyak perkenalan dalam buku "Situs Web Kinerja Tinggi". Untuk meringkas, ada tiga poin utama: menggunakan elf, mengoptimalkan ukuran gambar, dan menggunakan data URI. Saya tidak akan membahas detailnya di sini.
Gagasan lain tentang pengoptimalan gambar adalah: no-image. Abaikan gambar dan rangkul CSS3. Awalnya, saya perlu mengatur gambar dengan efek sudut bulat, tetapi sekarang saya menggunakan perbatasan-radius di CSS3; Saya biasa mengatur efek bayangan, tetapi sekarang saya menggunakan kotak-bayar di CSS3; Saya biasa mengatur gambar latar belakang gradien, tetapi sekarang saya menggunakan gradien di CSS3.
3. Pra-Fetch
Selanjutnya, mari kita bicara tentang prefetching, yang merupakan cara optimisasi lain. Gagasan optimasi kami saat ini tidak lebih dari sedikit. Banyak dari mereka berasal dari perspektif hal -hal yang lebih sedikit, misalnya, ukuran dokumen dikurangi sebelumnya dan ukuran gambar dikurangi. Banyak gambar menjadi elf, untuk mengurangi jumlah permintaan pengiriman. Untuk prefetching, itu adalah cara berpikir lain. Memuat sumber daya lebih awal. Ketika pengguna pergi ke titik, itu benar -benar dimuat, jadi pasti akan lebih cepat.
Ada dua bagian untuk prefetching: satu adalah prefetching sumber daya, dan yang lainnya adalah pra-penyelesaian DNS.
Ada beberapa poin yang perlu diperhatikan saat sumber daya preloading:
Preloading hanya akan menarik ketika browser menganggur, tetapi tidak dijamin untuk menariknya. Ini adalah poin yang sangat penting. Karena browser itu sendiri memiliki pendengar global, yang merupakan antarmuka internal. Ketika udara penelusuran menganggur, ia akan menjalankan browser saat menganggur, tetapi panggilan balik idle ini mungkin tidak dipicu, sehingga tidak menjamin bahwa preloading akan dilakukan.
Chrome tidak mendukung preloading sumber daya HTTPS. Misalnya, Alipay adalah halaman HTTPS, Chrome tidak akan pra-tarik.
Meskipun halaman yang telah ditarik tidak terlihat setelah itu ada, itu sebenarnya parsing secara normal. Jika saya melakukan pra-tarik halaman login, halaman login memiliki banyak sumber daya, seperti gambar, file CSS, dan file JS. Ini akan diuraikan dari atas ke bawah secara normal. Selama proses parsing, halaman ini tidak muncul, tetapi sebenarnya ada. Di HTML5, Anda bisa mendapatkan status halaman saat ini melalui Document.visibilityState. Biasanya halaman memiliki dua negara bagian, terlihat dan tidak terlihat, tetapi sekarang ada negara baru yang disebut status pra-render. Anda dapat secara langsung menentukan apakah halaman tersebut berada dalam keadaan prerender dengan apakah dokumen. VisibilitasState sama dengan prerender.