Что можно сделать для улучшения поведения IE11 с помощью Angular материала?

Я работаю над проектом Angular, в котором я использовал компоненты Angular Material (главным образом md-Buttons). Приложение отображает различные фрагменты, каждый из которых является md-Button. В то время у меня, вероятно, будет 20-30 плиток макс. Эти фрагменты повторяются с помощью ng-repeat.

Приложение работает достаточно хорошо на Chrome, однако в IE11 я регулярно сталкиваюсь с проблемой рендеринга. Рендеринг занимает около 5-6 секунд. Переключение отображения плиток плохо работает. Прокрутка экрана приводит к прилипанию компонентов, а затем перемещение через 1 секунду.

Вероятно, я думаю, Angular Материал слишком тяжелый для IE11. Есть ли что-то, что я могу сделать, чтобы ускорить работу в IE11, поскольку это мой основной целевой браузер?

Я пробовал:

  • Обновление библиотек Angular.
  • Использование патча MS052
  • Удаление нескольких переходов из Angular Материал css.

Ничто из вышеизложенного не имеет большого эффекта.

Я думаю, что Angular материал - хорошая библиотека, и должно быть что-то, что можно сделать, чтобы улучшить его работу в IE11. Пожалуйста, кто-нибудь может предложить что-то эффективное?

Ответы

Ответ 1

Мы также работаем над проектом angular, и мы столкнулись с проблемами производительности с Internet Explorer 11.

Я нашел эту ошибку в github, которая мне помогла: https://github.com/angular/material/issues/1771

Решение: В последней версии 0.11.1 они работали над проблемами отображения макета для Internet Explorer, поэтому я только что обновил материал до angular до версии v.11.11 и добавил эту строку в мой файл конфигурации w angular:

$provide.constant('$MD_THEME_CSS', '/**/');

Улучшена производительность Internet Explorer 11.

Ответ 2

Я обнаружил, что перенос всех моих js в IIFE и добавление "use strict"; везде, что значительно улучшило производительность моего приложения Angular Material. Он по-прежнему медленнее, чем Chrome в IE, но производительность неприемлема.

Ответ 3

Проблема с CSS.

Использовать модуль NPC clean-css для создания IE-совместимого CSS запустить под кодом в runkit.com и получить IE оптимизировать CSS Для получения дополнительной информации см. Параметр совместимости clean-css

https://runkit.com/npm/clean-css-pre-2.1.0

var request = require("request")
CleanCSS = require("clean-css-pre-2.1.0")

var url = "https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.1.1/angular-material.min.css"

request({
    url: url,
}, function (error, response, body) {

    if (!error && response.statusCode === 200) {
        var source = body;
        var minimized = new CleanCSS({compatibility : '*'}).minify(source);
        console.log(minimized)
    }
})