Cara Mempercepat Laman Web dengan Tag

"Terdahulu"pelayar adalah masa depan pelayaran Internet paling laju, membawa kita sumber yang kita mahu bahkan sebelum kita tahu kita mahu mereka. Pelayar hari ini sudah buat sesetengah ramalan sekarang dan kemudian untuk mempercepatkan pengambilan dan penyerahan dokumen. Untuk mengambil ini ke langkah seterusnya, kami melihat kepada tidak lain daripada pemaju web.

Pemaju mempunyai a idea yang bagus daripada bagaimana laman web mereka dilayari, dan yang mana sumber paling sering diminta dan dengan itu, mereka boleh meramalkan beberapa pelayar operasi masa depan harus lakukan untuk tapak. Semua yang diperlukan sekarang adalah untuk pemaju untuk mencari jalan menyampaikannya ramalan kepada penyemak imbas dan letakkannya dengan baik. Di sinilah beberapa "pautan HTML" khas masuk.

A Refresher pada Permintaan HTTP

Sebelum melihat pautan ini, sudah tiba masanya untuk menyegarkan ingatan kami tentang cara operasi yang diambil oleh HTTP yang diminta oleh fail. Katakan seseorang yang bernama Joe mahu melawat laman web.

Inilah yang berlaku seterusnya:

1. Joe mengetik alamat laman web yang boleh dibaca semula di dalam bar alamat penyemak imbas dan menekan "Enter".
2. Setelah menerima alamat itu, penyemak imbas meminta pelayan DNS (pujian ISP) untuk alamat IP alamat yang diberikan oleh Joe.
3. Server DNS mewajibkan.
4. Sekarang pelayar mengetahui alamat IP, ia menghantar mesej (dalam dialek TCP) ke pelayan laman web, meminta sambungan.
5. Sekiranya pelayan itu hidup dan dengan baik, ia menghantar balasan yang mengakui permintaan penyemak imbas dan penyemak imbas bertindak balas dan mengakui mesej pelayan. (Catatan: Ya, ini adalah versi yang sangat disiram dari jabat tangan TCP antara pelanggan dan pelayan.)
6. Apabila jabat tangan selesai, sambungan ditubuhkan di antara keduanya.
7. Sekarang, pelayar menukar gaya dialeknya ke HTTP dan meminta pelayan untuk laman web tersebut.
8. Pelayan, mengetahui laman utama laman web itu kembali hanya itu, yang diterima oleh penyemak imbas dan ditunjukkan kepada Joe yang menunggu sangat sabar di depan komputer.

Permintaan HTTP biasa berlaku semua itu (dan banyak lagi) untuk mengambil dokumen melalui Internet. Jadi jika mana-mana proses ini boleh jumpstarted apabila mungkin, kita boleh mengurangkan masa kita perlu menunggu penyampaian sumber yang kita mahukan.

Hubungan Link HTML

W3C menentukan 4 pautan hubungan HTML (rel untuk hubungan) bernama dns-prefetch, preconnect, prefetch, dan prerender. Bersama-sama mereka dipanggil (oleh W3C) yang "Petua Sumber"Sekarang, kita akan lihat apa yang boleh mereka lakukan dan di mana mereka boleh digunakan.

1. Prefetch DNS

Dalam prefetch DNS, resolusi nama domain (aka mendapatkan alamat IP yang sepadan dari pelayan DNS) dilakukan lebih awal daripada masa.

Katakan ada halaman rujukan dalam laman web dengan banyak pautan rujukan ke tapak kakaknya. Apabila pengguna melawat halaman rujukan, terdapat a kebarangkalian tinggi bahawa pengguna akan menavigasi ke tapak kakak. Jadi, a carian DNS awal untuk tapak kakak boleh mengurangkan masa yang diperlukan untuk membuka laman web (dengan itu meningkatkan pengalaman pengguna).

Ini pengurangan latitud melalui prefetching DNS boleh dilakukan dengan menambah kod ini ke halaman rujukan.

Apabila pelayar memproses kod ini dalam halaman rujukan, ia akan menambah DNS mencari tapak kakak untuk beratur tugasnya, dan apabila ia bebas daripada tugas-tugas yang lebih tinggi keutamaan lain dalam barisan, ia akan memulakan resolusi DNS bagi tapak kakak.

Oleh itu, apabila pengguna akhirnya mengklik salah satu pautan yang membawa mereka ke laman web kakak, resolusi DNS laman web itu mungkin telah selesai, dan penyemak imbas segera dapat mewujudkan koneksi TCP-klien dengan tapak kakak pelayan, menjadikan beban halaman itu lebih cepat.

Ciri ini tersedia di hampir semua pelayar moden kecuali Safari pada Mac 2016.

2. Preconnect

Preconnect adalah langkah selanjutnya dari prefetch DNS, ia mewujudkan sambungan ke pelayan yang mungkin ada permintaan yang dihantar kemudian pada masa depan.

W3C menyenaraikan kes penggunaan yang sesuai untuk sambungan: pelencongan. Pemaju menggunakan pelencongan untuk beberapa sebab.

Dalam kes ini, permintaan seterusnya penyemak imbas (tapak redirected) adalah 100% boleh diramal, dan boleh disambung semula ke, kepada mengurangkan latensi pelayaran.

Bayangkan terdapat laman laman perantara yang mengarah ke "xyzsite", pautan HTML berikut akan menjadikan penyemak imbas menyambung semula dengan pelayan xyzsite, apabila sampai pada halaman perantara itu.

Mulai Mac 2016, ini tersedia dalam Chrome, Opera dan Firefox.

3. Prefetch

Dengan prefetch, untuk sumber, penyemak imbas mula melaksanakan resolusi DNS nama domain sumber, kemudian melakukan sambungan TCP dengan pelayan sumber, membuat permintaan HTTP, dan akhirnya mengambil dan menyimpan sumber yang telah siap dipasang dalam cache penyemak imbas.

Sekiranya anda pasti sumber-sumber yang diperlukan kemudian, itulah sumber untuk prefetch terlebih dahulu; di dalamnya terletak tangkapan. Prefetching memerlukan meneka, dan jika anda rasa salah, anda sebenarnya boleh melambatkan bukan mempercepatkan laman web anda.

Untuk buku, galeri, atau portfolio dalam talian, jika pengguna paling mungkin melayari halaman seterusnya, prefetching sumber seperti imej, boleh mempercepatkan perkara dengan ketara. Berikut adalah kod untuk melakukannya.

Prefetch disokong dalam Chrome, Firefox dan Opera.

4. Prerender

Hanya untuk laman HTML yang boleh prestendir dilakukan. Halaman HTML yang diprapapar adalah diberikan di luar talian, dan dicat ke skrin apabila ia benar-benar diperlukan oleh pengguna. Rendering kos kerja pengiraan dan sumber memori yang lebih tinggi; ditambah, untuk membuat halaman, penyemak imbas mungkin memerlukan sumber tambahan (seperti gambar yang ditambahkan ke halaman) yang akan membawa lebih banyak permintaan berbangkit oleh penyemak imbas.

Jadi, prerender mesti ada digunakan dengan berhati-hati, dan tidak digunakan terlalu banyak. Menambah kod berikut akan mempamerkan terlebih dahulu halaman "Perihal".

Prerender sudah tersedia di Chrome, IE dan Opera pada Mac 2016.

Beberapa perkara yang perlu diperhatikan

(1) Tiada petunjuk sumber yang dinyatakan di atas menjamin pelaksanaan dan penyelesaian tahap permintaan yang berlainan dibuat kerana kerana apabila penyemak imbas sudah sibuk memproses permintaan yang diperlukan untuk operasi halaman semasa pengguna berada, melakukan pengoptimuman ini boleh menghalang tugasan semasa pengguna.

Jadi, semuanya adalah beratur dan dilaksanakan apabila penyemak imbas merasa cukup percuma untuk berbuat demikian.

Petua sumber ini tidak perlu hadir di halaman sebelum memuatkan halaman. Mereka boleh jadi ditambah kemudian oleh JavaScript, dan petunjuk sumber akan melakukan tugas mereka seperti biasa.

(2) W3C menentukan a Atribut pautan HTML dipanggil kebarangkalian petunjuk, pr (dengan nilai 0 hingga 1) untuk petunjuk sumber ini, yang boleh digunakan untuk memberikan kebarangkalian permintaan yang akan dibuat pada masa akan datang. Saya tidak melihat atribut ini sedang dilaksanakan oleh mana-mana pelayar walaupun. Sebagai contoh, kod berikut menyatakan bahawa terdapat peluang xyzsite 80% akan diminta pada masa akan datang dan 30% untuk halaman sekitar.

Kami juga boleh menambah atribut crossorigin pilihan kepada petunjuk sumber untuk memaklumkan penyemak imbas kelayakan CORS permintaan yang dipautkan.