Are these sites that you mention using polymer? Are those polymer element counts or DOM element counts?
On Fri, Sep 4, 2015 at 10:10 AM Eric Bidelman <[email protected]> wrote: > 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/CADBYpymi7d4XisE7JnuwSK7w%3DWuLcLCX%2BTrmtkEmSigoXZ%3D3cg%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
