I tried your minimal example and when I scrolled the content I didn't see the repaint on the entire content that you mentioned. I was testing the latest paper-drawer-panel on Chrome 44.
On Fri, Jul 24, 2015 at 3:10 PM, Aleem Mawani <[email protected]> wrote: > Thanks for the clue - looking at the dev tools, you're correct that the > bad scrolling perf is coming from excessive paints. Turning on "show paint > rectangles" I was able to narrow it down to the paper-drawer-panel's main > content that was creating the issue. Here is a mimal example that shows > that the main content pain will repaint its entire contents during > scrolling. Seems like an issue with the paper-drawer-panel? > > <!DOCTYPE html> > <html> > <head> > <script > src="/bower_components/webcomponentsjs/webcomponents-lite.min.js"></script> > > <link rel="import" > href="/bower_components/paper-drawer-panel/paper-drawer-panel.html"> > > <style> > .maincontent { > background: #cf9a9a; > overflow: auto; > } > > .sidebar { > background: white; > } > </style> > </head> > <body> > <paper-drawer-panel> > <div class="sidebar" drawer> > </div> > > <div class="maincontent" main > > <div style="height:4000px"></div> > </div> > > </paper-drawer-panel> > > </body> > </html> > > If you load that you'll see that the maincontent div will always repaint > in its entirety. > > On Fri, Jul 24, 2015 at 2:30 PM Eric Bidelman <[email protected]> wrote: > >> Scrolling issues usually means poort interactions with css selectors and >> style recalcs are causing large paints. That would be my guess. That >> doesn't have to do with templating or data binding but it's hard to say >> without seeing your app or knowing more about the code. >> >> Another thing to try is use <template is="dom-if"> to only stamp initial >> DOM that you need. I've seen people create apps with 5000-7000 DOM nodes on >> page load. There's never a good idea for any app. >> >> On Fri, Jul 24, 2015 at 4:22 PM Aleem Mawani <[email protected]> wrote: >> >>> Thanks for those. >>> >>> Are there any polymer specific perf issues we should be aware of with >>> respect to data binding or templating? If there are perf issues in this >>> area, would they be relatively easy to spot in the devtools? >>> >>> On Fri, Jul 24, 2015 at 2:20 PM Eric Bidelman <[email protected]> wrote: >>> >>>> As with any web app, the Devtools Timeline is your best friend when it >>>> comes to anything related to jank (rendering, scrolling, paint issues): >>>> https://developer.chrome.com/devtools/docs/timeline >>>> >>>> The usual suspects are large paints on scrolling or doing extra work >>>> (layout, etc). Be sure to turn on "Show paint" rects to see where your time >>>> is being spent: >>>> https://developer.chrome.com/devtools/docs/rendering-settings >>>> >>>> There's also a ton of great content at http://jankfree.org/ to learn >>>> more. >>>> >>>> >>>> On Fri, Jul 24, 2015 at 3:33 PM <[email protected]> wrote: >>>> >>>>> I'm writing a Polymer based app and at some point the UI has gotten >>>>> really slow to render and really slow to scroll. >>>>> >>>>> Does anyone know of any resources or tips on the best way to get >>>>> started debugging polymer performance issues? >>>>> >>>>> 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/74af7c92-213c-4bf1-b3fd-30e3f895ee1e%40googlegroups.com >>>>> <https://groups.google.com/d/msgid/polymer-dev/74af7c92-213c-4bf1-b3fd-30e3f895ee1e%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/CADBYpym5hR8p3oKuxEj3Zb_RuGTQ7i4GksNjKkvhGCi-kBXaGg%40mail.gmail.com > <https://groups.google.com/d/msgid/polymer-dev/CADBYpym5hR8p3oKuxEj3Zb_RuGTQ7i4GksNjKkvhGCi-kBXaGg%40mail.gmail.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/CAAGTQkB9jd4U0ucik-aEjf3T8yugnqsr27BCOwEzY%2BC7cL-b%2BA%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
