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

Дата публикации: 2016-12-30

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

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

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

Это заставило меня задуматься… а нет ли ничего новенького для пререндеринга? Есть:

<link rel="prerender" href="(url)">

1	<link rel="prerender" href="(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);
    
  })
  
});

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 – библиотека, предсказывающая, с какими элементами пользователь будет взаимодействовать.

Если заинтересовались данной тематикой, то скажу вам, что пререндеринг – не единственная новинка. Робин писал об этом весь год.

Автор: Chris Coyier

Источник: //css-tricks.com/

Редакция: Команда webformyself.

Метки: JavaScript