Jaa

Интернет "просто работает" при любом способе ввода: Mouse Events, Touch Events и Pointer Events

  • Artikkeli

Мы недавно объявили о поддержке API-интерфейса Touch Event в Internet Explorer для Windows Phone 8.1 с обновлением в рамках нашей стратегии добиться того, чтобы Интернет "просто работал" для наших пользователей. Это означает, что теперь Internet Explorer поддерживает все три основных API-интерфейса ввода с помощью указателя: Mouse Events, Touch Events и Pointer Events. Работать с Интернетом на мобильных устройствах стало удобнее, однако в то же время разработчики начинают задумываться, какой API лучше использовать.

Чтобы помочь разработчикам понять, в каких случаях следует использовать каждый из этих API, мы решили поделиться своими обновленными советами, а также размышлениями о перспективах развития веб-платформы с учетом того, что API-интерфейс Pointer Events скоро будет поддерживаться в Firefox, тогда как в Google недавно приняли решение отказаться от реализации этой спецификации.

Сравнение и противопоставление моделей

Мы хотим, чтобы разработчики использовали ту технологию ввода, которая им подходит. Мы предоставляем API-интерфейс Touch Events с высоким уровнем взаимодействия, позволяющий охватить наибольшее число современных браузеров, и передовой API-интерфейс Pointer Events, позволяющий использовать более простые модели программирования, предоставлять больше возможностей, обеспечить поддержку большего числа устройств, создавать более удобный интерфейс с высокой скоростью реагирования и максимально эффективно использовать аппаратное ускорение. Ниже представлен детальный разбор характеристик и возможностей каждой модели.

  Mouse Events Touch Events Pointer Events
Поддержка мыши   1  
Поддержка традиционного сенсорного ввода 2    
Поддержка мультисенсорного ввода      
Поддержка пера, Kinect и других устройств 2    
Предоставление событий появления указателя над элементом, ухода с него, входа, выхода и наведения      
Запуск асинхронного панорамирования или масштабирования для аппаратного ускорения      
Спецификация W3C   3 3
Возможность использования в разных браузерах на мобильных устройствах     4
Возможность использования в разных браузерах на настольных компьютерах     4

1 По крайней мере в некоторых браузерах на платформе Android события касания могут активироваться для ввода с помощью мыши. Однако при использовании событий касания невозможно отличить такой ввод с помощью мыши от фактического ввода с помощью касаний.

2 Все браузеры активируют некоторые события мыши для традиционного сенсорного ввода, чтобы обеспечить совместимость с веб-страницами, предназначенными для ввода с помощью мыши. Однако в настоящее время при использовании событий касания невозможно отличить сенсорный ввод от фактического ввода с помощью мыши. Аналогично ввод с использованием жестов Kinect в Internet Explorer для Xbox также будет активировать некоторые события мыши для обеспечения базовой совместимости.

3 Спецификация Pointer Events сейчас имеет статус Candidate Recommendation и скоро перейдет в разряд Recommendation. Спецификация Touch Events имеет статус Recommendation. В 2012 г. участники рабочей группы Web Events решили прекратить работу над Touch Events версии 2 и закрыть группу в пользу стандартизации Pointer Events.

4 Полная поддержка событий указателя доступна в Internet Explorer и скоро будет реализована в Firefox. Частичная поддержка (touch-action API) доступна в Chrome, Firefox и Opera и рассматривается для Safari WebKit. Модель событий указателя может использоваться в разных браузерах через объекты polyfill, такие как Google Polymer Pointer Events и Hand.JS.

Прочтите эту статью на сайте HTML5 Rocks. В ней более подробно рассматриваются некоторые из этих отличий и проблем.

Быстродействие

Быстродействие играет для ввода, особенно сенсорного, очень важную роль. В действительности вы просто проводите пальцами по стеклянной поверхности, но мы хотим, чтобы это воспринималось как перемещение по веб-странице. Вот почему мы потратили 3 года на переработку архитектуры сенсорного ввода в Internet Explorer, чтобы сделать этот процесс четырехпотоковым и использовать ускорение на базе графического процессора (начато в Internet Explorer 10 и улучшено в Internet Explorer 11). Мы спроектировали события указателя, чтобы использовать типы архитектур, которые начали появляться в других современных браузерах.

Панорамирование и масштабирование обычно являются самыми важными сенсорными взаимодействиями, составляя более 60 % всех сенсорных жестов в Internet Explorer и Chrome для Windows. Почти в каждом приложении или веб-приложении и почти на каждом сайте используются панорамирование и масштабирование. Эти жесты наглядно демонстрируют скорость ввода. Если панорамирование медленно начинается (со скачком и задержкой) или отрывисто выполняется (с потерей кадров), вы замечаете это и вспоминаете о том, что это просто стекло.

При использовании Touch Events перед началом панорамирования или масштабирования требуется синхронное выполнение JavaScript, что может вызывать серьезные проблемы быстродействия — порядка сотен миллисекунд или больше. Поэтому переход на использование Pointer Events может существенно улучшить управление с помощью касаний:

Демонстрация возможного влияния Touch Events на скорость панорамирования и масштабирования (на примере Android LG Nexus 5 и Windows Phone HTC 8x).
Спецификация Pointer Events позволяет использовать асинхронные сенсорные операции с аппаратным ускорением, что часто приводит к повышению быстродействия.

На примере этой простой тестовой страницы (настроенной с задержкой 1000 мс), разработанной Риком Байерсом (Rick Byers) из группы Chrome, при использовании событий касания в Internet Explorer мы видим, что первый кадр панорамирования не отрисовывается, пока сенсорный контакт не переместится в течение 1020 мс на 4,8 см, что четко заметно пользователю. Простая замена обработчиков Touch Event обработчиками Pointer Event снижает эту задержку до 31 мс и 0,3 см — улучшение больше, чем в 32 раза.

Хотя задержка в этой тестовой странице внесена искусственно, она была создана для того, чтобы продемонстрировать фундаментальную проблему быстродействия, часто встречающуюся в Интернете. На практике нам попадались страницы с задержкой лучше и хуже 1000 мс. Эта переменная неограниченная зависимость от основного потока браузера приводит к непредсказуемому поведению и мешает достижению оптимального времени отклика в 1 мс. Исследователи из подразделения перспективных научных исследований Microsoft Research продемонстрировали поразительное влияние такого сокращения времени ожидания на пользователей. Мы все еще на пути к времени отклика в 1 мс при панорамировании и масштабировании и считаем спецификацию Pointer Events критически важным шагом к достижению этой цели.

Pointer Events также имеют дополнительные функции, отсутствующие в Touch Events, например события появления указателя над элементом, ухода с него, входа и выхода, о которых просили разработчики, а также дополнительные функции, требующие некоторых дополнительных затрат времени. Но мы инвестировали средства в сокращение этих затрат. На дополнительную проверку нажатий, необходимую для этих компонентов, обычно уходит всего ~0,15 мс, и у нас есть идеи относительно того, как можно улучшить этот показатель, если подтвердится, что это позволит разработчикам достичь быстродействия 60 кадров в секунду.

Совместимость

В записи блога, в которой объявлялось о поддержке Touch Events, мы упомянули о проблемах, связанных с использованием Интернета на настольных компьютерах и мешающих нам обеспечить совместимость и перенести этот API на такие устройства. Например, если API-интерфейсы Touch Events включены на настольном компьютере, в следующих распространенных моделях программирования нарушается поддержка мыши:

В этой неправильной модели не подключена критически важная обработка событий мыши в любом браузере, поддерживающем Touch Events (независимо от того, имеется ли у устройства сенсорный экран). Это вызывает множество проблем, таких как неправильная работа меню, раскрывающихся списков, значков общего доступа и других элементов, при использовании мыши на таких сайтах, как Web MD, Macys, Onet, Pages Juanes, Globo, Samsung, Taobao, Huffington Post и других.

Чтобы сделать сенсорный ввод более удобным для пользователей и упростить жизнь разработчикам, мы планируем:

  • Добавить поддержку Touch Event в Internet Explorer в Windows Phone (сделано) .
  • Сотрудничать с разработчиками сайтов для исправления неполадок, упомянутых выше, надеясь, что в один прекрасный день мы сможем надежно использовать эти API-интерфейсы (работа продолжается: следите за сообщениями электронной почты или твитами от нашей группы по популяризации и за информацией на сайте webcompat.com).
  • Реализовать поддержку Touch Events во всех наших платформах, чтобы сделать матрицу поддержки более понятной для разработчиков (работа продолжается).
  • Принимать участие в реализации Pointer Events в других платформах (работа продолжается в Firefox и Chrome).
  • Активно общаться с разработчиками сайтов и сред, чтобы узнавать их мнение и ожидания относительно веб-платформы.
  • Делиться нашими внутренними проектными документами, схемами архитектур, методиками тестирования и нашим кодом с другими поставщиками браузеров (работа продолжается).

Многим разработчикам будет проще использовать Pointer Events для других браузеров с помощью объектов polyfill, таких как Google Polymer Pointer Events или Hand.JS. Но если вы решите использовать Touch Events, следите за тем, чтобы обеспечить надлежащую поддержку мыши. И никогда не предполагайте, что наличие API-интерфейсов Touch Event означает, что у устройства есть сенсорный экран.

Движение вперед

События ввода остаются одной из важнейших проблем взаимодействия в браузерах и устройствах. Как и большинство проблем взаимодействия, она неминуемо затрагивает как разработчиков, так и пользователей, проявляясь в необходимости использовать сложные модели программирования и возникновении проблем совместимости. Мы стремимся исправить эту ситуацию, работая над обеспечением взаимодействия в нашем браузере и стандартизацией в W3C.

Мы стремимся создать платформу, подходящую как для веб-разработчиков, так и для пользователей. Сообщите нам ваши отзывы. Что подходит вам? А что — нет? Чего вы ждете в дальнейшем? Поделитесь вашим мнением через @iedevchat и системы отслеживания ошибок Chrome и Firefox.

— Джейкоб Росси (Jacob Rossi)
Руководитель программы