Two things you could try:
1. For chromestatus.com, the feature list is stamped using <template
repeat>. Each panel has a slew of custom elements inside it. To speed up
perf, most of the feature panel is hidden until the user clicks the feature
open (e.g. using <template
if="{{open}}"><https://github.com/GoogleChrome/chromium-dashboard/blob/master/static/elements/chromedash-feature.html#L44>).
That sped up the initial load quite a bit for me under the SD polyfill.
2. Use one time
bindings<http://www.polymer-project.org/docs/polymer/binding-types.html#one-time-bindings>
where
it's appropriate.
On Thu, May 22, 2014 at 4:26 AM, Ümit Seren <[email protected]> wrote:
> I have been working a port of markerclusterer-plus to polymer (see other
> thread <https://groups.google.com/forum/#!topic/polymer-dev/88dbGnSBE5M>in
> the mailing list) and so far it works fine.
> I tried to compare performance between the original library and the my
> port and somehow realized that the polymer port with the ShadowDOM polyfill
> is almost *10 times *slower (147ms vs 21ms).
> If I activate native ShadowDOM it is nearly as fast as the original
> library (around 30ms).
>
> I tried to profile it by using the timeline and it seems that most of the
> time is spent in the boot.js script (Polymer library).
>
> So I decided to do some CPU profiling (see attached profiles and
> screenshots):
>
>
> <https://lh4.googleusercontent.com/-y9yoEAfiy1I/U33cCxEX10I/AAAAAAAAESs/Tl2fhPt6eFE/s1600/non_polymer.png>
>
> *Original library*
>
>
>
> <https://lh4.googleusercontent.com/-CjeBd26qg1U/U33cLiHoSuI/AAAAAAAAES0/_MyrVTvu9OU/s1600/polymer.png>
>
> *Polymer with ShadowDOM polyfill *
>
>
>
> <https://lh3.googleusercontent.com/-9Vo6qvehdIE/U33cfzmeI9I/AAAAAAAAES8/BgHzIAoUw7Q/s1600/polymer_native.png>
>
> *Polymer with native ShadowDOM *
>
>
> The interesting part is the addToClosestCluster_ function. This function
> is called for each marker (100 markers in total) and the function loops
> through
> all existing clusters to find the nearest. if a cluster is found the
> marker is added, if it isn’t it will create a new cluster and add the
> marker to it.
>
> The main difference between the two libraries is that the non-polymer
> version creates a simple DIV element for the clustericon but in my polymer
> port I clone a polymer-element which the user can specify during runtime
>
> clusterIcon = document.importNode(this.clusterIconTemplate_,true);
>
> As you can see in the flame chart each document.import call will take
> around *13ms* with most of the time being spent in the ShadowDOM polyfill.
> With native ShadowDOM it only takes around 2 ms per import call.
>
> I must say that I am impressed with the native ShadowDOM performance
> considering that the original library only uses a simple DIV for a
> ClusterIcon whereas the Polymer port uses an entire polymer-element.
>
> Are there any best-practices regarding stamping/cloning or instantiating
> (potentially) many polymer-elements ?
> Of course I could just use a simple DIV as in the original library but the
> one of the goals was to allow for custom cluster icons that themselves are
> polymer-elements.
>
>
>
>
> Follow Polymer on Google+: plus.google.com/107187849809354688692
> ---
> You received this message because you are subscribed to the Google Groups
> "Polymer" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to [email protected].
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/polymer-dev/473806b4-48d4-4b63-9a8d-1e1f9c190c21%40googlegroups.com<https://groups.google.com/d/msgid/polymer-dev/473806b4-48d4-4b63-9a8d-1e1f9c190c21%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
> For more options, visit https://groups.google.com/d/optout.
>
Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups
"Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/polymer-dev/CACGqRCCmpQJUap0jX0Ank-Oz9V4V%3DC4PSsmEFCQ5Xa2YwYHmtA%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
