Блог веб-разработчика v 1.0.0
Symfony2, AngularJS, React, Gulp, PhpStorm и много других страшных слов

InstantClick - мгновенная загрузка страниц твоего сайта

10 лет назад
4561 просмотр
JavaScript Полезности

InstantClick - это JS библиотека, позволяющая сделать мгновенной загрузку страниц сайта. Такой эффект достигается путем предварительного кеширования страниц при наведении на ссылку.

Время между наведением на ссылку и непосредственно кликом по ней достигает сотни миллисекунд. При сегодняшних скоростях интернет-соединения этого вполне может хватить на загрузку кода страницы. Таким образом библиотека "предугадывает" действия пользователей.

Следует отметить достоинства библиотеки:

  • Всего один файл очень малого размера - 1.6 КБ в минифицированном, сжатом виде.
  • Инициализация заключается в вызове всего одного метода.
  • Возможность отключения библиотеки для некоторых ссылок (или наоборот включения только для определенных ссылок).
  • Гибкая настройка. Например, можно включить кеширование для событий отличных от клика.
  • Нет никаких зависимостей от других библиотек. Полностью самостоятельная работа.
  • Позволяет цеплять обработчики на событие смены страницы.

Конечно, есть и недостатки:

  • Не работает в браузерах без поддержки History API pushState.
  • Подходит не для всех сайтов. Например, не подойдет для сложных веб-приложений.
  • Если на старнице подключены скрипты вроде Google Analytics или Яндекс.Метрики, то придется написать еще немного кода, чтобы они продолжили работать.

Простейшая инициализация

<script src="instantclick.min.js" data-no-instant></script>
<script data-no-instant>InstantClick.init();</script>

Пример работы с Google Analytics

InstantClick.on('change', function() {
    ga('send', 'pageview', location.pathname + location.search);
});

Сайт проекта: http://instantclick.io/

Документация: http://instantclick.io/start.html

Что еще почитать