Rumah hujung hadapan web Tutorial H5 Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender

Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender

May 09, 2017 am 10:59 AM

文章标题写,为Affiliate而生 其实是夸张写法,

prerender / prefetch

其实是为了提升网页加载速度而但是一直通过预加载来实现,提升用户感受的方式,例如用户在首页停留2s, 而这2s里面我们就已经加载了一个用户可能要打开的页面,那么用户打开的速度会非常快. 给用户的感受也是极好的

HTML5 Prerender / Prefetch名词解释

prefetch usage:

It should be used for fetching and caching resources for later user navigation as per the official HTML5 spec (i.e. prefetching a css file to be used in a page which highly likely to be used by the user in his upcoming navigation). Supported in Chrome, Firefox & IE.
Salin selepas log masuk

简单说就是缓存下一个网页的资源,是HTML5的新特性, 支持的浏览器有Chrome(13以后), Firefox, IE 11

prerender usage:

It should be used for prerendering a complete page that the user will highly likely navigate to it in his upcoming navigation (i.e. like prerendering the next article where it is highly likely that the user will click on “next article” button). Supported only in Chrome & IE.
Salin selepas log masuk

Prerender是Google的一个发明,正在提升用户减少用户在加载时的等待, 通过最相近匹配原则来加载例如“下一页”的文章., 例如最佳推荐,当用户访问A页面的时候, 用户最可能访问的下一个页面上B 那么就预加载B页面, 以达到提升加载速度的效果, 支持的浏览器有Chrome , IE11

使用方法

is actually part of the HTML 5 spec.
appears to be Google doing their own thing.
Salin selepas log masuk

第一中方法是 将以上链接添加到xxx

第二种方法是 使用JS代码注入方式;

var myHead = document.getElementsByTagName(‘head’)[0];
var myLink = document.createElement(‘link’);
myLink.setAttribute(‘rel’, ‘prerender’);
myLink.setAttribute(‘href’, ‘http://apple.com/ipad’);
myHead.appendChild(myLink);
Salin selepas log masuk

或者使用Jquery方法:

$(“head”).append(‘www.guoli.biz/’);
Salin selepas log masuk

有什么问题,欢迎留言提问

【相关推荐】

1. 免费h5在线视频教程

2. HTML5 完整版手册

3. php.cn原创html5视频教程

Atas ialah kandungan terperinci Html5 什么是prefetch/prerender?介绍Html5 中prefetch/prerender. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Sempadan Jadual dalam HTML Sempadan Jadual dalam HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Jadual Bersarang dalam HTML Jadual Bersarang dalam HTML Sep 04, 2024 pm 04:49 PM

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

HTML jidar-kiri HTML jidar-kiri Sep 04, 2024 pm 04:48 PM

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Susun Atur Jadual HTML Susun Atur Jadual HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Pemegang Tempat Input HTML Pemegang Tempat Input HTML Sep 04, 2024 pm 04:54 PM

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Memindahkan Teks dalam HTML Memindahkan Teks dalam HTML Sep 04, 2024 pm 04:45 PM

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Senarai Tertib HTML Senarai Tertib HTML Sep 04, 2024 pm 04:43 PM

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Butang onclick HTML Butang onclick HTML Sep 04, 2024 pm 04:49 PM

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.

See all articles