Обработка события ввода «колесом» была отложена на ххй мс из-за основной поток занятого

Question

я использовал версию Chrome: Version 55.0.2883.75 beta (64-bit) с material-ui (https://github.com/callemall/material-ui) версией 0.16.5 с react + react-dom версией 15.4.1 и заметила следующее предупреждающее сообщение, когда я прокрутка вниз по странице с помощью колеса мыши:

Обработка входного события «wheel» была задержана на xxx ms из-за занятости основного потока. Рассмотрите обработчик событий маркировки как «пассивный», чтобы сделать страницу более отзывчивой.

Вот скриншот из хрома консоли разработчика:

Первоначально я думал, что другая зависимость react-waypoint приводивший вопрос, но после некоторого исследования, и благодаря последующим взлетам Ленсионьте в https://github.com/brigade/react-waypoint/issues/143, я понял, это может быть вызвано комбинацией react с последней версией material-ui.

С material-ui версии 0.16.5, то wheel Слушатели событий становится видимым на вкладке Dev Tool Элемент Хрома следующим образом: , что имеет passive: false свойство, которое могло бы объяснить, почему на консоли появится предупреждение при прокрутке в то время как основной поток занятый.

Однако, прочитав подобный пост о Consider marking event handler as 'passive' to make the page more responsive, я немного более запутанным, потому что он предположил, что мы, возможно, придется ждать своей библиотеки .js реализовать поддержку. Прежде чем поднимать вопрос о github, чтобы предложить такое улучшение, моя путаница была, , какой JS-библиотекой/зависимостью мы должны ждать?

В данном конкретном случае это react (см. discussion)? или material-ui? Или что-то еще, что было полностью упущено из этого вопроса? Вышеприведенный скриншот показал, что прослушиватель событий wheel был добавлен ReactEventListener из react-dom, однако, понизив версию material-ui до 0.16.4, предупреждение уходит, потому что нет прослушивателя событий wheel.

Так что я в основном на том перекрёстке браузере, react и зависимостей 3 участника и пытается понять переменные, которые вносят вклад в эту проблему и есть ли что-то мы, как потребитель этих библиотек, могли бы сделать, чтобы обойти Эта проблема?

Любые предложения или комментарии будут высоко оценены! Благодарю.

Answer 1

Просто подтверждая, что это материально-ui вызывает это, поскольку я не использую «реакционную точку», и также испытываю это на MaterialUI v0.16.5 и React 15.4.x.

Обновление: после обновления до MaterialUI v0.16.6 все выглядит нормально.