Пререндер по наведенню курсора?

32

Від автора: InstantClick – досить популярна JS бібліотека (4,344 зірки поки я пишу цю статтю). Суть: «Перед звернення за посиланням користувачі наводять на неї курсор миші. Між цими подіями проходить в середньому від 200 до 300 мс (перевірте самі). InstantClick використовує цей час для попереднього завантаження сторінки, щоб при натисканні на посилання вона вже була готова.»

Ви наводите курсор миші на посилання, вона за допомогою Ajax посилає запит на цю сторінку та пререндерит її. По кліку на посилання змінюються теги body і title, а також URL.

Я тільки чув про цю бібліотеку, начебто досить розумно. Техніка прогресивного поліпшення, поліпшується сприйняття продуктивності. Мені в голову приходить тільки один мінус, пропускна здатність. Завантажувати всі сторінки, на які я навів курсор, досить марнотратно з точки зору інтернет з’єднання.

Це змусило мене задуматися… а немає нічого новенького для пререндеринга? Є:

Насправді, спосіб не новий. Стів Соудерс писав про нього ще 2013: «Це те ж саме, що відкривати URL в невидимій вкладці – завантажуються всі ресурси, створюється DOM, отрісовиваємих сторінка, застосовується CSS, виконується JS і т. д. І якщо користувач переходить по конкретному href прихована сторінка відображається на екрані, створюючи ефект миттєвої завантаження.»

На сайті Can I Use досить пристойна підтримка:

Дані нижче взято з сайту Caniuse, на якому також сказано, що дана функція знаходиться в статусі W3C Working Draft.

Пререндер по наведению курсора?

Тобто ми можемо робити ось так?

var links = document.querySelectorAll(‘a’);
[].forEach.call(links, function(link) {
link.addEventListener. («mouseenter», function() {
var newPreLoadLink = document.createElement(«link»);
newPreLoadLink.rel = «prerender»;
newPreLoadLink.href = link.href;
document.head.appendChild(newPreLoadLink);
})
});

Питання в тому, чи будуть динамічно вставлені посилання, як показано вище, активувати пререндеринг? Я провів досить примітивний тест в Chrome, і це не працює. Ну гаразд.

Якщо хочете бути ще на крок попереду користувача, спробуйте Premonish – бібліотека, пророча, з якими елементами користувач буде взаємодіяти.

Якщо зацікавилися даною тематикою, то скажу вам, що пререндеринг – не єдина новинка. Робін писав про це весь рік.