2014-11-05 59 views
6

我们正在考虑使用聚合物技术(& dart语言)开发公共/互联网Web应用程序/网站。 当测试/验证方法时,我们遇到了一个潜在的表演停止。 (基本)网站表现相当好。在不同的浏览器&平台上,但它在Windows 8.1上的Internet Explorer 11上非常慢。使用聚合物组件制作的网站/应用程序在IE11上载入速度极慢

似乎问题并不涉及到我们特定的代码,因为它似乎很容易复制使用行为,例如,聚合物演示(菜单按钮): https://www.polymer-project.org/components/paper-elements/demo.html#paper-menu-button

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

是否有任何解决方案/解决方法可用于此问题? 或者这个问题是否会导致使用聚合物组件创建的网站/网络应用程序在IE(11)中不能正常运行? 这可能是公共互联网网站/网络应用程序的炫目者。

回答

3

的问题的解决方案完全是靠jakemac53上https://github.com/Polymer/polymer/issues/891

啊,这样的一个我花了一点要弄清楚,但其因为在大css文件运行 影子DOM CSS填充工具的包括 在您的每个元素(特别是引导程序)。幸运的是, 很容易从运行中禁用此polyfill(并且不需要 进行引导)。只需将“无垫片”属性添加到您的所有 链接的样式表的,所以引导例如应该是这样的:

否则,填充工具具有的所有内容从文件中复制和 应用其转换,然后将结果标记为内嵌 样式表。如果在大型样式表上如 bootstrap中这样做了很多次,它确实会减慢速度。

1

针对@ebidel的答案。 I Dart这意味着从命令行运行pub build而不是从DartEditor运行。
从命令行运行时mode=release默认使用。 DartEditor通过mode=debug调用pub build。 发布模式不会造成抖动和缩小,从而导致代码变小。据我所知其他东西vulcanize确实为Polymer.js由DART聚合物变压器完成。

一些提示

admin_service_repository/admin_service_repository.dart

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

所以得到的聚合物后 聚合物用量数据的回报,即使通知有关变更已创建从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。镖

@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 

pubspec.yaml升级到聚合物0.15.xxx后摆脱了警告。

+1

感谢您的回答。 我不确定硫化方法会显着改善性能。如上所示:“该问题似乎与网络流量/要下载的文件数量有关”。此外,据我了解,它的功能由Dart聚合物变压器覆盖。 我们的Dart代码已经使用“pub build --mode = release”参数(在DartEditor之外)构建(对于js)。删除参数给出了相同的结果。 恐怕这意味着聚合物技术目前还没有真正准备好用于IE(11)/公共网站...... – Benjamin 2014-11-06 13:23:15

+1

我不确定'checked mode是否适用于构建的JS以及Dart代码但是如果这样的话,在释放模式下构建应该也会提高执行速度,但是如果你已经建立了释放模式,那么我就没有什么可以获得的。也许来自Polymer.dart团队的人有其他想法。 core-/paper-elements演示页面如何在IE上执行? (我没有可用的IE来检查我自己)。你可以让你的项目代码可用吗? – 2014-11-06 13:29:07

+0

我把Zip文件放在代码中:http://novonov.be/tmp/op-code.zip 在web文件夹中:index。 html和admin.html是起点。 顺便说一句。今天,在将我的笔​​记本电脑升级到Yosemite - Safari 8后,该网站的一个特定部分(在admin.html下)似乎无法在Safari 8中正常工作...(在Chrome,Firefox和IE11上仍然可以正常工作) - >我会在稍后看看。 – Benjamin 2014-11-06 14:18:03

2

看起来这个例子的慢度是由页面上的元素数量庞大造成的。在国家选择下拉列表中,有约240个纸件项目元素,并且有4个下拉项目,因此总共有约1000个纸件项目元素在页面上。其中每个都有两个自定义元素,纸纹波和核心图标,所以现在我们可以使用大约3000个自定义元素,更不用说所有其他元素了。我确认,仅仅评论大多数国家就会大大提高绩效。

在Firefox和IE中,它们在polyfills下运行,这会增加它们的性能问题,所以这就是为什么你在每个浏览器中看到如此缓慢的原因。性能肯定是Polymer团队正在积极开展的工作(特别是与polyfills相关的),但任何时候当页面上有这么多元素时,都会导致浏览器速度变慢。

+1

这里的一个选项可能是使用纸张菜单按钮元素内的核心列表元素来浏览这些大的下拉列表,以便只有可见的元素实际上在页面上。我扼杀了这一点,虽然我没有看到它看起来相同,但它看起来很有前途,节点数从80k下降到8k,在IE11上它在大约5秒钟内加载。 – 2014-11-06 17:19:48

+1

它看起来像核心演示页面已经改变,没有这样巨大的下拉菜单已经,但你可以看到我的变化会看起来像这里https://github.com/dart-lang/paper-elements/commit/62c77b 。该演示现在在Chrome中加载速度非常快,并且在Firefox和IE11中的速度比之前(<5秒)快得多。 – 2014-11-06 18:25:19

相关问题