Pengenalan kepada tiga ciri baharu praktikal HTML5 yang luar biasa_Pertukaran pengalaman

1. Cache pra-peleraian DNS

Seperti yang kita semua tahu, resolusi DNS adalah bahagian penting dalam pengoptimuman prestasi tapak web Walaupun masa memuatkan tidak terlalu lama, ia adalah sukar untuk memampatkannya. Terutama untuk tapak web besar yang menggunakan berbilang nama domain CDN untuk memuatkan sumber untuk memuat turun sumber secara serentak, ia tidak boleh diabaikan penukaran resolusi DNS nama domain CDN mesti dilakukan sebelum setiap sumber dimuatkan.
Jika pramuat DNS digunakan, penyemak imbas yang menyokong ciri ini akan melaksanakan resolusi DNS pada nama domain terlebih dahulu dan menyimpannya di cache, bukannya menyelesaikannya apabila sumber perlu diminta. Dan aplikasi fungsi ini sangat mudah:

Salin kod Kodnya adalah seperti berikut:

Taobao telah menggunakan teknologi ini. Anda boleh membuka Taobao dan melihat kod sumber. Di bahagian atas, beberapa pelayan CDN mereka melakukan resolusi DNS dan caching.

2. Pramuat sumber

Terdapat banyak cara untuk pramuat sumber, seperti pramuat imej biasa, imej latar belakang CSS digunakan untuk pramuat, dan kebanyakannya masih menggunakan JS. Pada masa ini, HTML5 menyediakan kaedah pramuat sumber khusus dengan dua atribut: prefetch (praambil) dan prapaparan (prapemarahan), yang masing-masing disokong oleh pelayar Firefox dan Chrome.

1).PREFETCH prabacaan
Prabacaan ialah pramuat sumber yang sangat biasa Selepas halaman semasa dimuatkan, sumber yang anda tentukan akan dimuat turun secara rahsia kemudian, biasanya JS, CSS dan imej muat turun halaman:

Salin kod Kod adalah seperti berikut:

Perhatikan bahawa ciri ini pada masa ini disokong oleh penyemak imbas Firefox.

2).PRERENDER Pra-pemarahan
Ini bukan sahaja memuat turunnya secara rahsia terlebih dahulu, tetapi juga memaparkannya untuk anda Apabila pengguna mengklik pautan, ia akan dipaparkan kepada anda dengan serta-merta.

Salin kod Kod adalah seperti berikut:

Perhatikan bahawa Chrome menyokong ciri ini pada masa ini.

Enjin carian sebenarnya paling memerlukan fungsi prabaca ini, kerana mereka sangat pasti halaman yang akan dibuka oleh pengguna seterusnya (halaman hasil carian), jadi apabila pengguna memasuki kandungan carian, mereka boleh pra-baca carian Sumber pada halaman hasil dimuatkan lebih awal, dan selepas permohonan, kesannya sangat jelas.

Pada masa ini, keserasian adalah kekurangan Nampaknya hanya Chrome dan Firefox yang menyokongnya, dan atribut rel yang digunakan adalah berbeza Jika anda ingin serasi dengan dua penyemak imbas pada masa yang sama, anda boleh menulisnya seperti berikut:

Salin kod Kod adalah seperti berikut:

Selain itu, sudah tentu, atas sebab keselamatan, sumber tidak boleh dipramuat merentas domain dan tidak boleh digunakan dalam CDN.

3. Muat turun atribut

Atribut Muat Turun HTML5 digunakan untuk memaksa penyemak imbas memuat turun fail yang sepadan dan bukannya membukanya. Pelayar seperti Chrome dan Firefox terlalu berkuasa, mungkin untuk meningkatkan pengalaman pengguna Apabila fail sumber yang diklik oleh pengguna boleh dikenali oleh mereka (contohnya, pdf akan dibuka terus dalam penyemak imbas, dan media seperti mp3 dan mp4. akan dimainkan terus dalam pelayar) main balik pemain). Tetapi kadangkala, pengguna sebenarnya mahu memuat turunnya secara langsung dan bukannya melihatnya pada penyemak imbas Dalam kes ini, atribut ini boleh ditambah dan nilai atribut akan menamakan semula fail yang dimuat turun:

Salin kod Kod adalah seperti berikut:

Klik untuk memuat turun dan menyimpan terus ke dalam fail muat turun.pdf

Jika anda pasti pengguna pasti akan memuat turun sumber ini, anda boleh menambah atribut ini dan anda juga boleh menggunakan JS atau menukar nama fail yang anda ingin simpan secara manual.

HTML5 mempunyai banyak ciri lain, tetapi setelah membaca buku dan pelbagai bahan untuk masa yang lama, saya jarang melihat tiga lagi sifat praktikal di atas, jadi saya ingin berkongsinya.