I've been interested in this topic as well. *Your page *(http://jsbin.com/qunepiqeho/edit?html,js,output)
I'm seeing *5591* custom elements being created on that jsbin (see bookmarklet below). That's a lot! This is because some elements create other sub custom elements in their shadow dom. It's important to keep in mind that custom elements do more than plain-o-<div>. They don't come without costs. You're creating shadow dom, composing others elements, running lifecycle callbacks, doing layout, style recalc.... My first recommendation is to create fewer element instances. We're actually told by the Blink engineers that 1000 elements is the budget. That's not a lot, but 5k+ is way more than you ever should create on page load. On the Polymer side, we're looking at perf optimizations like the one that recently landed in <iron-icon> <https://github.com/PolymerElements/iron-icon/commit/2e06ec25a12b4bd39ef5aca8f9f79c5b492e6d60>. Basically, every instance of <iron-icon> was creating an <iron-meta> child. The new version (not the one you're using) creates a single instance of <iron-meta> that's shared across all instances of <iron-meta>. That makes a real difference if your page is using a ton of icons. * chromestatus.com <http://chromestatus.com> case study* Debugging chromestatus.com loading perf, I found there were 4000+ elements being created on page load. Each of the 356 feature elements in the list produced many sub elements. The solution was to *create fewer instances up front*. The way I did that was to use <iron-list> and selectively use <template is="dom-if"> to generate DOM only when I needed it (e.g. when the user scrolls the page or opens a feature panel). It was silly to generate that much DOM on upfront. 90% wasn't visible to the user. *Tools * Justin has been developing a Chrome Extension that will be useful here. It will show per element metrics and answers questions like "What is the cost of putting this element on my page?" If you want something now, I created a bookmarklet that may be helpful <https://gist.github.com/ebidel/57c9e9379ec6b0bda16d>. It records interesting numbers to the console. Lastly, we've also been talking to the DevTools team to see what information we could expose to developers. If you have any ideas, please let us know! Eric On Thu, Sep 3, 2015 at 2:27 PM <[email protected]> wrote: > I'm trying to determine if the rendering performance I'm seeing with a > page with 1000's of custom elements is expected or not. > > Here's an example I put together: http://codepen.io/anon/pen/GpgmQV which > has a few thousand custom elements. You'll notice that the render (i.e. > after all the assets have downloaded) takes anywhere from 2-6 seconds (see > chrome profiler output: http://i.imgur.com/F8nhHPA.png). It looks like > most of this time is spent with polymer creating and adding the custom > elements to the page. Is this expected? > > p.s. The obvious question is why would you have 1000's of elements on a > page but lets ignore that for now. > > 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/8af8f0be-434d-4a8f-b8b7-5c60cf2559b8%40googlegroups.com > <https://groups.google.com/d/msgid/polymer-dev/8af8f0be-434d-4a8f-b8b7-5c60cf2559b8%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/CACGqRCD-Uyb0T0OG1%3DmTtOBqi0B8kWKgs1RPBUG5NhhDZ4NhBA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
