Производительность IE "Style Calculation" невероятно медленная в приложении AngularJS

У меня есть приложение AngularJS, использующее Angular Материал и данные, загруженные из внешнего API.

Ничего особенного в этом приложении не имеет, и все мои тесты выполняются абсолютно в Chrome, Firefox и Safari.

Однако, когда я использую Internet Explorer, все ад разрывается. Приложение невероятно медленно, анимации CSS болезненно лагги, приложение полностью непригодно.

Я потратил целый день, пытаясь найти множество возможных исправлений и отладки, но я поднимаю козыри.

Вещи, которые я вижу:

  • Когда я использую IE11 Developer Tools и запускаю журнал производительности, "Расчет стиля" занимает, на сегодняшний день, наибольшее количество времени.
  • Когда у меня есть подстановочные CSS-селектора, производительность медленнее (например, *{box-sizing: border-box})

Здесь вывод от инспектора производительности, когда буквально все, что я делаю, прокручивается вниз md-virtual-repeat:

Производительность IE: расчет стиля

Как вы можете видеть, style calculation занимает здесь много времени.

Для этого Googling придумал козыри с обходными решениями. Что здесь происходит? Это красная селедка, и проблема в другом месте в моем приложении (мой JS так же эффективен, как я могу думать об этом, и я также тестировал загрузку без реальных данных, всего 30 статических объектов в виртуальный ретранслятор - и результаты одинаковы).

Ответы

Ответ 1

У меня была та же проблема с "Расчет стиля", занимающая около 700 мс при прокрутке и загрузке CPU на 100% (IE11, Win10)

В моем конкретном случае это было вызвано правилом CSS, содержащим селектор "+", например

.menu li + li a {border: 0}

После удаления - отлично работает.

Надеюсь, что это сэкономит пару часов.

Ответ 2

Решение, как указывает @ngDeveloper в комментарии, заключается в обновлении ngMaterial. У меня была эта проблема, и это была позицияElements, которая вызывала проблему для меня.