Internet explorer 使用聚合物组件制作的网站/应用程序在IE11上的加载速度非常慢

我们正在考虑采用聚合物技术（dart语言）开发公共/互联网web应用程序/网站。 在测试/验证该方法时，我们遇到了一个潜在的显示障碍。 （基本）站点在不同的浏览器和平台上运行良好，但在Windows8.1的InternetExplorer11上运行速度非常慢

问题似乎与我们的特定代码无关，因为使用聚合物演示（菜单按钮）似乎很容易再现行为：

在IE11（11.0.9600.17351）上，加载该页面需要16秒以上。 使用IE11的“UI响应”探查器，创建了一个.diagsession文件： 乍一看，问题似乎与网络流量/要下载的文件数量无关。 在“DOM事件（readystatechanged）”中花费15.73秒。 我们没有测试另一个版本的IE-only IE11

是否有针对此问题的解决方案/解决方法？ 或者，这个问题是否会导致使用聚合物组件创建的网站/web应用程序在IE（11）中无法以合理的性能工作？ 这可能是公共互联网网站/web应用程序的一个展示障碍。

这是制作应用程序的关键。像IE11这样的Polyfill浏览器天生比原生HTML导入慢，因此减少Polyfill的请求数量和设置工作非常重要

---

例如，我可以通过运行硫化：

来响应@ebidel的回答，将SPA演示（）从~20秒提高到~3.7秒。 I Dart这意味着从命令行而不是从DartEditor运行

pub build

。
当从命令行运行时，默认情况下使用

mode=release

。DartEditor使用

mode=debug

调用

pub build

。 发布模式会进行树抖动和缩小，这会导致更小的代码。据我所知，

suverize

对

Polymer.js

所做的其他事情是由Dart聚合物变压器完成的

一些提示

admin\u service\u repository/admin\u service\u repository.dart

@observable List servicescriptions=toObservable（[]）；
//而不是
//@可观察列表serviceDescriptions=[]；

因此，即使在加载后返回的数据时，Polymer也会收到有关更改的通知 Polymer已经从

serviceDescriptions

列表中创建了视图

for（服务中的地图服务）{
//字符串名称=服务['name']；
//ServiceDescription sd=新的ServiceDescription（名称、服务['defaultUrl']、服务['description']、服务['exampleContent']）；
//地址服务（sd）；
servicescriptions.addAll(
services.map（（s）=>newservicesdescription（s['name']，s['defaultUrl']，
s['description']、s['exampleContent']）；
}

创建列表并将项目添加到

服务

可以简化一点

管理员\服务\存储库/节点\视图.dart

@observable获取所有子项{
//列表=[]；
//for（Node.children.values中的节点子节点）{
//列表。添加（子项）；
//    }
//退货清单；
返回node.children.values.toList（）；
}

在

lib/invoke\u服务中

创建一个字符串列表，并将它们连接到构造函数中。
您可以创建多行字符串文字，如

String someString=r''
{
xxxx
}
''';

我补充说

-聚合物：
内联_样式表：
lib/bootstrap/css/bootstrap.min.css:false
lib/bootstrap/css/bootstrap.min.css:false
lib/css/op.css:false
lib/font-awesome-4.2.0/css/font-awesome.min.css:false

---

升级到Polymer 0.15.xxx后，请转到

pubspec.yaml

以消除警告。

此示例中的速度缓慢似乎是由于页面上的元素数量过多造成的。在国家/地区选择下拉列表中，约有240个纸质项目元素，其中有4个，因此页面上总共约有1000个纸质项目元素。每一个都有两个自定义元素，paper ripple和core icon，所以现在我们最多有3000个自定义元素，更不用说所有其他元素了。我证实，简单地评论一下大多数国家，就能显著提高绩效

---

在Firefox和IE中，它们运行在polyfills下，这放大了它们的性能问题，这就是为什么在每种浏览器中都会看到如此缓慢的速度。性能无疑是Polymer团队正在积极研究的内容（尤其是与polyfills相关的内容），但任何时候页面上有这么多元素，都会在较慢的浏览器中引发问题。

问题的解决方案是由jakemac53在

啊，所以我花了一点时间才弄明白这是因为 在包含的大型css文件上运行的阴影dom css polyfill 在每个元素中（特别是引导）。幸运的是 很容易禁用此polyfill（不需要） 用于引导）。只需将“无垫片”属性添加到所有 链接的样式表，因此例如引导应该如下所示：

否则，polyfill必须复制文件中的所有内容并 应用其转换，然后将结果标记为内联 样式表。在大型样式表上多次执行此操作时，如 引导它真的减慢了速度

---

谢谢你的回答。我不确定硫化方法是否会显著提高性能。如前所述：“问题似乎与网络流量/要下载的文件数量无关”。此外，据我所知，Dart聚合物变压器涵盖了其功能。我们的Dart代码已经使用“pub build--mode=release”参数（在DartEditor之外）构建（到js）。删除参数会得到相同的结果。恐怕这意味着