Question

我们正在考虑使用聚合物技术（和飞镖语言）来开发公共/互联网Web应用程序/网站。在测试/验证方法时，我们遇到了潜在的阻塞。（基本）网站正在执行o.k.在不同的浏览器和＆amp;平台，但在Windows 8.1上的Internet Explorer 11上速度极慢。

问题似乎与我们的特定代码无关，因为使用例如聚合物演示（菜单按钮）重现行为似乎很容易： https://www.polymer-project.org/components/paper-elements/demo.html#paper-menu-button

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

是否有针对此问题的解决方案/解决方法？或者这个问题是否会使用聚合物组件创建的网站/网络应用程序无法在IE（11）中以合理的性能运行？这可能是公共互联网网站/网络应用程序的一个显示器。

Answer 1

vulcanize tool是制作应用的关键。像IE11这样的Polyfill'd浏览器本质上比本机HTML导入慢，因此减少polyfill必须执行的请求和设置工作的数量非常重要。

例如，我可以将SPA演示（https://www.polymer-project.org/articles/demos/spa/final.html）从〜20s带到~3.7s，只需运行硫化：http://www.webpagetest.org/result/141105_7P_178Q/

Answer 2

问题的解决方案是由https://github.com/Polymer/polymer/issues/891

上的jakemac53提出的

  啊，这让我有点想弄清楚，但是因为它   shadow dom css polyfill在包含的大型css文件上运行   在每个元素中（特别是bootstrap）。幸运的是   非常容易禁用此polyfill运行（并且不需要它   for bootstrap）。只需将“no-shim”属性添加到您的所有内容中即可   链接的样式表，所以bootstrap应该看起来像：



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

Answer 3

看起来这个例子的缓慢是由页面上元素的绝对数量引起的。在国家选择下拉列表中，有大约240个纸质项目元素，其中有4个下拉列表，因此页面上总共有大约1000个纸张项目元素。每个都有两个自定义元素，纸纹和核心图标，所以现在我们有~3000个自定义元素，更不用说所有其他元素了。我确认只是简单地评论大多数国家会大大提高绩效。

在Firefox和IE中，它们在polyfill下运行，这会放大他们的性能问题，所以这就是为什么你在每个浏览器中都看到这么慢的原因。性能绝对是Polymer团队正在积极开展的工作（特别是与polyfills有关），但是只要页面上有这么多元素，它就会在较慢的浏览器中引起问题。

Answer 4

回应@ebidel的回答。我这意味着从命令行而不是从DartEditor运行pub build 从命令行运行时默认使用mode=release。 DartEditor使用pub build调用mode=debug。释放模式会进行树木抖动和缩小，从而导致代码更小。据我所知，vulcanize对Polymer.js所做的其他事情是由Dart聚合物变换器完成的。

一些提示

admin_service_repository / admin_service_repository.dart

@observable List serviceDescriptions = toObservable([]);
// instead of
// @observable List serviceDescriptions = [];

因此，即使加载数据后，Polymer也会收到有关更改的通知 Polymer已经从serviceDescriptions列表创建了视图。

for (Map service in services) {
  //String name = service['name'];
  //ServiceDescription sd = new ServiceDescription(name, service['defaultUrl'], service['description'], service['exampleContent']);
  //addService(sd);
  serviceDescriptions.addAll(
      services.map((s) => new ServiceDescription(s['name'], s['defaultUrl'], 
          s['description'], s['exampleContent']))); 
}

创建列表并将项目添加到services可以简化一下。

admin_service_repository / node_view.dart

  @observable get allChildren {
//    List list = [];
//    for (Node child in node.children.values) {
//      list.add(child);
//    }
//    return list;
    return node.children.values.toList(); 
  }

在lib/invoke_service中，您可以创建一个字符串列表并在构造函数中连接它们您可以创建多行字符串文字，如

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

我添加了

- polymer:
    inline_stylesheets:
      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去除警告。

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

4 个答案: