使用 Angular Material 可以做些什么来改善 IE11 的行为？答案

【问题标题】：What can be done to improve IE11 behaviour with Angular Material?使用 Angular Material 可以做些什么来改善 IE11 的行为？
【发布时间】：2015-12-22 02:33:33
【问题描述】：

我正在做一个 Angular 项目，其中我使用了 Angular Material 组件（主要是 md 按钮）。该应用程序显示了各种磁贴，每个磁贴都是 md 按钮。一次我最多可能有 20-30 个瓷砖。使用ng-repeat 重复这些图块。

该应用程序在 Chrome 上运行良好，但在 IE11 上，我经常遇到渲染问题。渲染大约需要 5-6 秒。切换瓷砖显示效果不佳。滚动屏幕会导致组件粘连，然后在 1 秒后移动。

可能我猜 Angular Material 对于 IE11 来说太重了。由于这是我的主要目标浏览器，我可以做些什么来加快 IE11 上的速度吗？

我试过了：

更新 Angular 库。
使用 MS052 补丁
从 Angular Material css 中移除了一些过渡。

以上似乎都没有太大的效果。

我认为 Angular 材料是一个很好的库，必须做一些事情来改进它在 IE11 中的工作。请问有人能推荐一些有效的吗？

【问题讨论】：

标签： angularjs internet-explorer-11 angular-material

【解决方案1】：

我们也在处理 Angular 项目，但我们正面临 Internet Explorer 11 的性能问题。

我在 github 上发现了这个对我有帮助的错误： https://github.com/angular/material/issues/1771

解决方案：在上一个版本 0.11.1 中，他们处理了 Internet Explorer 的布局显示问题，所以我刚刚将角度材料更新到 v0.11.1，并将这一行添加到我的角度配置 JavaScript 文件中：

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

Internet Explorer 11 的性能得到改进。

【讨论】：

【解决方案2】：

我发现将我所有的 js 包装在 IIFE 中并添加“use strict;”任何合适的地方都大大提高了我的 Angular Material 应用程序的性能。在 IE 上它仍然比 Chrome 慢，但性能无法接受。

【讨论】：

【解决方案3】：

问题在于 CSS。

使用 clean-css NPM 模块让 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)
    }
})

【讨论】：