Я работаю над проектом React, который должен хорошо работать во всех основных браузерах, включая IE11, планшеты и мобильные телефоны. Кажется, что все наши тесты браузеров работают нормально, однако IE11 рендерится медленно, а некоторые взаимодействия с пользователем происходят медленнее после первого нажатия. В частности, события щелчка всегда медленные при первом щелчке для всего приложения.
Первоначально, мне дали ошибку, чтобы решить, где на сетке есть флажок в каждой строке. Только в IE, если пользователь нажимает на любой из флажков, до завершения проверки и проверки элемента задержка составляет 3-5 секунд. Я провел множество тестов, и я обнаружил, что, используя профилирование в отладчике IE, пользователь нажимает на флажок, и React по какой-то причине перерисовывает всю страницу еще до того, как он вызывает мое событие oncheck.
Что еще более интересно, так это то, что поскольку onCheck - это, по сути, событие onClick, я пытался взаимодействовать с другими элементами приложения. Конечно же, для любого кликабельного они все довольно невосприимчивы к первому щелчку на любом кликабельном элементе. Однако, как только любой кликабельный элемент нажимается, все они быстро реагируют.
Чтобы быть ясным, я знаю хитрость использования shouldComponentUpdate, чтобы проверить, изменились ли значения реквизита или состояния, и не выполнять повторную визуализацию, если ничего не обновлено. Мне также известно о PureComponent, и в качестве теста я сделал каждый отдельный реагирующий компонент во всем проекте PureComponent. Это не помогло.
Я понятия не имею, почему, но, похоже, React, возможно, связал событие click с каждым активируемым объектом, и он фактически не связывает его до тех пор, пока пользователь не щелкнет по первому активируемому элементу.
Вот все интерактивные элементы на этой странице.
- У нас есть раскрывающееся окно для выбора фильтра, скрытое под DDL. Нажатие на DDL занимает около 2 секунд. DDL не отображается, но при втором щелчке после паузы в секунду он отображается довольно быстро.
- У нас есть кнопка «Избранное», которая отфильтровывает все элементы в списке, кроме избранного пользователя. По сути, это флажок. Он ведет себя точно так же, как флажки в сетке, для каждой строки.
- У нас есть окно поиска. Когда я снова щелкаю в окне поиска, приложение реагирует примерно на 2 секунды. После этого поле поиска не выбирается, однако, при втором щелчке курсора появляется в поле и очень отзывчиво.
Опять же, стоит отметить, что если какое-либо одно действие, указанное выше, произойдет, все остальные интерактивные компоненты будут работать довольно быстро. Например, если я нажму на поле «Поиск» и после двухсекундного ожидания я смогу быстро проверить / снять строку или наоборот.
Кроме того, у нас нет специальных событий щелчка или чего-либо, связанного с глобальным приложением. Здесь нет ничего необычного. У нас просто есть несколько компонентов, которым нужны события щелчка для переключения значений или свойств в простых моделях.
Я не могу опубликовать какой-либо код из-за деликатного характера этого приложения, однако я могу сделать пару скриншотов из профилировщика IE11 и показать, что эти странные поведения на самом деле происходят в React и не кажется, вызвано нашим кодом. Я не люблю бродить, но я добавил в наше приложение TON из debug.log(...) вызовов, и ни один из них не был обработан до тех пор, пока не произойдет повторная обработка приложения в течение 1,5-2 секунд. В частности, если я поместил операторы console.log(...) в какое-либо из этих событий щелчка, ни одно из них не будет выполнено до тех пор, пока не будет нажата пара секунд, доказывая, что это происходит с Reacts.
Если кто-нибудь знает, почему это происходит в Internet Explorer и как его предотвратить, я был бы признателен за некоторые рекомендации.
РЕЗУЛЬТАТЫ ПРОФИЛЯ :
При первом нажатии "Избранное".
Обратите внимание, что на круговой диаграмме 67% времени уходит на рендеринг макета.Я не раскрывал его здесь, но дерево макетов представляет собой список из тысяч элементов, составляющих всю страницу.Это длинная сетка, и в IE всегда требуется время для рендеринга.
Повторное нажатие кнопки «Избранное».
Обратите внимание, что на этот раз нет "Макета" или повторного рендеринга сетки.Чтобы было ясно, я снял флажок с опцией избранного (это большой промежуток времени в середине, который я не изолировал и не снимал с экрана), и это повторная проверка его во второй раз.
Нажатие на фильтр DDL в первый раз, но после переключения в избранное
В этом случае я не обновлял страницупосле переключения в избранное, и я нажал на опцию DDL, чтобы показать мне мои фильтры.Как вы можете видеть, было немного дополнительного рендеринга / макета, и вся операция заняла 455 мс.
Обновление страницы и нажатие на фильтр DDL
В качестве последнего примера я обновил страницу и профилировал щелчок по фильтру DDL.Как видно из профилировщика, значительное количество времени было потрачено на макет и рендеринг пользовательского интерфейса.