On Fri, Sep 4, 2015 at 11:11 AM Aleks Totic <[email protected]> wrote:
> 1000 elements budget is stingy for single-page apps. Do hidden elements
> count against the budget?
>
Elements out of the render tree are less of an issue (no layout/style
recalc) but they'll still run callbacks. I think the point is, we need to
better expose the cost of using an element to developers (paint + layout +
js + recalc style). Right now, the tools are not helpful.
FWIW, I did a quick survey of a few modern SPA on page load. Here are their
element counts:
maps - 624
contacts - 713
inbox - 988
calendar - 968
photos - 1106
github - 1267
gplus - 2838
gmail - 2890
Ran: document.querySelectorAll("body /deep/ *").length
What's interesting is that the newer apps (esp. Inbox) create far less DOM
on page load. They're being good citizens in that they load on-demand. If
you start clicking around (opening threads, expanding cards, etc.) that
count goes up.
>
> 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).
>
We've got several open bugs like these:
https://github.com/PolymerElements/paper-button/issues/48
https://github.com/PolymerElements/paper-card/issues/20
Even our own elements need perf work :)
> 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]> 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/6053d8bb-471e-4e11-8f98-473828eb9652%40googlegroups.com
> <https://groups.google.com/d/msgid/polymer-dev/6053d8bb-471e-4e11-8f98-473828eb9652%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/CACGqRCADZ%3DsCYAkxk2KQwAXgG_v3J08yByV1a30WrF9oMdinDw%40mail.gmail.com.
For more options, visit https://groups.google.com/d/optout.
