разработчик
0,0
рейтинг
9 февраля 2014 в 21:09

Дизайн → InstantClick: библиотека для улучшения отзывчивости сайта

При щелчке мышью по ссылке или кнопке на веб-странице от момента, когда курсор оказывается над элементом до срабатывания события click обычно проходит несколько сотен миллисекунд. Во-первых, пользователю нужно убедиться, что курсор в нужном месте — именно этот процесс занимает больше всего времени. Во-вторых, событие click срабатывает только после отпускания кнопки мыши, а это происходит через несколько десятков миллисекунд после нажатия. В мобильных браузерах между моментом касания тачскрина и событием click установлена задержка в 300 мс — это делается для того, чтобы избежать ложных срабатываний.

Библиотека InstantClick (1,6 кБ в сжатом виде, зависимости отсутствуют) позволяет улучшить воспринимаемое время отклика страницы на щелчок за счёт того, что необходимая информация начинает подгружаться с сервера в тот момент, когда курсор оказывается над активным элементом, по событию mouseover. Это экономит несколько сотен миллисекунд и реакция приложения может оказаться почти мгновенной.

Естественно, за ускорение клиентского интерфейса приходится расплачиваться увеличением нагрузки на сервер за счёт ложных срабатываний, когда за наведением курсора на элемент не следует щелчка. Чтобы уменьшить вероятность этого, InstantClick позволяет задать небольшую задержку срабатывания или вообще не рисковать, а использовать событие mousedown. Это может быть полезно, когда на небольшой площади сосредоточено множество активных элементов, например в меню. Кроме того, можно включать и отключать InstantClick отдельно для каждого элемента.

Для подгрузки контента InstantClick использует AJAX-запрсы и pushState для того, чтобы нормально работала история браузера и кнопка «Назад». Можно сказать, что эта библиотека объединяет идеи jQuery-pjax (или Turbolinks) и Fastclick, только, в отличие от Fastclick, предназначена не для мобильных, а для настольных браузеров. Впрочем, автор обещает реализовать и поддержку события touchstart для устройств с тачскрином.

Посмотреть, как работает библиотека, можно на сайте проекта, пощёлкав по ссылкам в шапке. Кроме того, на отдельной странице можно измерить интервалы времени между событиями mouseover, mousedown и click при щелчке по тестовой кнопке.

Илья Сименко @ilya42
карма
526,7
рейтинг 0,0
разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Реклама

Самое читаемое Дизайн

Комментарии (8)

  • +1
    как-то визуально разницы не заметил
    предполагаю, что разница будет более заметна на страничках без скриптов и Flash объектов

    За информацию спасибо.
    • 0
      А это и не демонстрация, как оказалось.
      Просто кнопки, которые меряют задержку между ховером и кликом (и между MouseDown и кликом). Предполагается, что именно на столько либа сможет понизить латентность сайта.
    • 0
      Да, а демонстрация — это собственно навигация по сайту проекта, только что посмотрел по вебинспектору, чтобы точно убедиться.
  • +9
    Срабатывать на mouseup — это знакомое свойство всех существующих интерфейсов. Попробуйте: веб, компьютеры, мобильные. Это, кроме того, что привычно, даёт возможность отменить нажатие. Поэтому очень прошу, не надо ускорять — я уже насмотрелся на дичайшие интерфейсы, которые напоминают минное поле — не дай бог кликнул.

    Подгружать — пожалуйста.
  • –1
    И никто не думает про возростание нагрузки на сервер, когда пользователь водит мышью над меню в раздумиях, куда же ему дальше пойти.
    • +1
      Естественно, за ускорение клиентского интерфейса приходится расплачиваться увеличением нагрузки на сервер за счёт ложных срабатываний...
  • 0
    Сначала нужно научиться четко (например, с 90% точностью) предвидеть переход. Даже не 90%, а тот %, от которого будут расти конверсии.
  • 0
    Кто-нибудь решил проблему с совместимостью: InstantClick.js + jquery.history.js?

Только зарегистрированные пользователи могут оставлять комментарии. Войдите, пожалуйста.