При щелчке мышью по ссылке или кнопке на веб-странице от момента, когда курсор оказывается над элементом до срабатывания события click обычно проходит несколько сотен миллисекунд. Во-первых, пользователю нужно убедиться, что курсор в нужном месте — именно этот процесс занимает больше всего времени. Во-вторых, событие click срабатывает только после отпускания кнопки мыши, а это происходит через несколько десятков миллисекунд после нажатия. В мобильных браузерах между моментом касания тачскрина и событием click установлена задержка в 300 мс — это делается для того, чтобы избежать ложных срабатываний.
Библиотека InstantClick (1,6 кБ в сжатом виде, зависимости отсутствуют) позволяет улучшить воспринимаемое время отклика страницы на щелчок за счёт того, что необходимая информация начинает подгружаться с сервера в тот момент, когда курсор оказывается над активным элементом, по событию mouseover. Это экономит несколько сотен миллисекунд и реакция приложения может оказаться почти мгновенной.
Естественно, за ускорение клиентского интерфейса приходится расплачиваться увеличением нагрузки на сервер за счёт ложных срабатываний, когда за наведением курсора на элемент не следует щелчка. Чтобы уменьшить вероятность этого, InstantClick позволяет задать небольшую задержку срабатывания или вообще не рисковать, а использовать событие mousedown. Это может быть полезно, когда на небольшой площади сосредоточено множество активных элементов, например в меню. Кроме того, можно включать и отключать InstantClick отдельно для каждого элемента.
Для подгрузки контента InstantClick использует AJAX-запрсы и pushState для того, чтобы нормально работала история браузера и кнопка «Назад». Можно сказать, что эта библиотека объединяет идеи jQuery-pjax (или Turbolinks) и Fastclick, только, в отличие от Fastclick, предназначена не для мобильных, а для настольных браузеров. Впрочем, автор обещает реализовать и поддержку события touchstart для устройств с тачскрином.
Посмотреть, как работает библиотека, можно на сайте проекта, пощёлкав по ссылкам в шапке. Кроме того, на отдельной странице можно измерить интервалы времени между событиями mouseover, mousedown и click при щелчке по тестовой кнопке.
Автор: ilya42
