A site / application made using polymer components loads very slowly on IE11

Question

We are looking at polymer technology (and the dart language) for developing a web application / website for the public / Internet. While testing / confirming the approach, we encountered a potential traffic jam. The (main) site performs quite ok on different browsers and platforms, but it is very slow in Internet Explorer 11 on Windows 8.1.

The problem does not seem to be related to our specific code, as it seems that it is easy to reproduce the behavior using, for example, the demo version of the polymer (menu button): https://www.polymer-project.org/components/paper-elements /demo.html#paper-menu-button

In IE11 (11.0.9600.17351), loading this page takes more than 16 seconds. With the IE11 Profiler UI Responsiveness IE11, the .diagsession file was created: http://novonov.be/tmp/polymer-paper-menu-button-demo.diagsession At first glance, the problem does not seem to be related to network traffic / number of downloads files. 15.73 seconds are spent in the "DOM event (readystatechanged)". We did not test another version of IE - only IE11.

Is there any solution / workaround for this problem? Or is this problem causing the website / web application created using polymer components to not work with reasonable performance in IE (11)? It could be showstopper for public websites / web applications.

Answer 1

The solution to the problem was raised by jakemac53 at https://github.com/Polymer/polymer/issues/891

Ah, so one took me a little to understand, but due to shadow dom css polyfill works on large css files included in each of your elements (bootstrap in particular). Fortunately, it is quite easy to disconnect this polyfill from startup (and it is not needed for bootstrap). Just add the “no-shim” attribute to all of your related styles, so bootstrap, for example, should look like this:

Otherwise, polyfill must copy all the contents from the file and apply its transformations, and then stamp the result into a line of the stylesheet. When this is done many times on a large stylesheet, for example bootstrap really slows down.

Answer 2

The vulcanization tool is the key to building the application. Polyfill 'd browsers such as IE11 will be inherently slower than native imported HTML, so it’s important to reduce the number of queries and the setup work that policies must fulfill.

For example, I was able to take the demo version of SPA ( https://www.polymer-project.org/articles/demos/spa/final.html ) from ~ 20 to ~ 3.7 s by simply running vulcanization: http: // www.webpagetest.org/result/141105_7P_178Q/

Answer 3

It seems that the slowness in this example is caused by the huge number of elements on the page. There are ~ 240 paper elements in the country selection drop-down list, and there are 4 of these drop-down lists, so there are ~ 1000 paper elements on the page. Each of them has two user elements: paper ripples and a kernel icon, so now we have up to ~ 3000 user elements, not to mention all the other elements. I confirmed that simply commenting on most countries dramatically increases efficiency.

In Firefox and IE, they work under poly-regiments, which increases their performance problems, and therefore you see such a slowness in each of these browsers. Performance is definitely something that the Polymer team is actively working on (especially for poly regiments), but anytime you have these many elements on a page, it will cause problems in slower browsers.

Answer 4

In response to @ebidel's answer. I Dart this means running pub build from the command line instead of DartEditor.
When launched from the command line, mode=release used by default. DartEditor calls pub build using mode=debug . Release mode makes jitter and minimization of the tree, which leads to a decrease in code. As far as I know, other vulcanize things for Polymer.js are done by the Dart Polymer Transformer.

Some tips

admin_service_repository / admin_service_repository.dart

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

therefore, Polymer receives notification of changes even when loading data after the polymer has already created a view from the serviceDescriptions list.

 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']))); } 

creating a list and adding items to services can be a little simplified.

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(); } 

In lib/invoke_service you create a list of strings and concatenate them in the constructor.
You can create multi-line string literals like

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

I added

 - 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 

in pubspec.yaml to get rid of warnings after upgrading to Polymer 0.15.xxx.