1000 elements budget is stingy for single-page apps. Do hidden elements
count against the budget?
Polymer's coding style encourages using lots of elements ("there is a
component for that").
Number of elements component uses is unknown to the developer, until you
inspect the dom. Usually, it is surprisingly high (10 elements for paper
button).
Aleks
On Thursday, September 3, 2015 at 9:10:48 PM UTC-7, Eric Bidelman wrote:
>
> 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] <javascript:>> 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] <javascript:>.
>> 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/6053d8bb-471e-4e11-8f98-473828eb9652%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
