search

dart-archive / web-components

Dart package providing the web components platform polyfills
https://pub.dartlang.org/packages/web_components
BSD 3-Clause "New" or "Revised" License
18 stars 10 forks source link

Dart2JS : WebComponents performance issues (very serious) #30

Open sigmundch opened 9 years ago

sigmundch commented 9 years ago

From @LSMetag on June 30, 2015 11:47

Hi,

From a long time, running my web project (based on Polymer Dart) as Javascript caused the Polymer components to load extremely slowly (1 second with Dart, 5 to 10 seconds in JS).

Using firebug, I got this message :

"mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create webcomponents.js:6007:6"

Did you think about this ? I indeed plan to further optimize that, but If Dart2JS itself is a cause, It can be a real problem.

Here is the project repository : https://github.com/LSMetag/CVWebkit/, that can be a good testing.

The polymer components are in WebApp/Web/ZoneRuban.html and WebApp/Lib/zoneRuban.dart. The "zoneruban" macro-component tag is invoked in WebApp/Web/CVWebkit.html.

config.yaml is the source file that is read to create layout and use components.

It would be a great help too if you could advise me about performance improving, if I am too at fault.

Thanks in advance !

Copied from original issue: dart-lang/sdk#23752

sigmundch commented 9 years ago

From @floitschG on June 30, 2015 13:31

/cc @sigmundch According to my tests, setting up an inheritance chain using "proto" is the fastest, and V8 doesn't seem to mind. Since IE doesn't support changing the prototype we already have a fallback in place. We could use that one, when detecting FF. In this case the proto change seems to come from webcomponents.js which isn't a dart2js produced file (afaik). So maybe this is a polymer issue and not dart2js related.

sigmundch commented 9 years ago

From @LSMetag on June 30, 2015 13:53

It's related to polymer, it's certain, because the performance issue is only on polymer components. And indeed, I tested on Firefox. I just tested in Chrome and I don't have this issue.

I thought It used VM but in fact no. The problem is linked to polymer, after being converted to JS, and using a browser other than Chrome.

But why FF doesn't like "proto", while it's the opposite for V8 ?

sigmundch commented 9 years ago

@jakemac53

Jake has been working on a newer port of polymer.js, which should address many performance issues. I am not sure if part of that includes fixes to webcomponents.js to avoid this performance problem, but I know that the new architecture tries to avoid using some web-component features (for example, shadow-dom) if they seem to be too much of a performance bottleneck.

Jake can tell you a bit more, but my understanding is that load times are much better now.

sigmundch commented 9 years ago

From @jakemac53 on June 30, 2015 16:52

You can try out https://github.com/dart-lang/sample-todomvc-polymer/tree/polymer-0.17 to see the new version. In non-chrome browsers especially it is much faster because of the lack of shadow dom and a few other things.

I don't know specifically if firefox is still giving that warning with the lite version of web components.

LSMetag commented 9 years ago

Can you set this version as "dev" for pub ? I don't know how to integrate it in my project to test and give a feedback.

Or you can test it with my project, to be sure, before closing this.