So all sites that use polymer drawers will have slow scroll perf because the main content section always repaints?
On Saturday, July 25, 2015 at 7:21:57 AM UTC-7, Aleem Mawani wrote: > > Non-retina macbook air 13" > > On Sat, Jul 25, 2015 at 7:21 AM Eric Bidelman <[email protected]> wrote: > >> Are you on a retina machine? If not what kind? If you're on a Mac that's >> likely the difference. Chrome has a different rendering path on retina vs. >> non-retina screens. >> >> On Fri, Jul 24, 2015, 8:21 PM <[email protected]> wrote: >> >>> Hmmm. Attached video showing repaints. and screenshot of me being on >>> chrome 44 >>> >>> On Friday, July 24, 2015 at 5:09:32 PM UTC-7, Frankie Fu wrote: >>> >>>> 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/aa1a4393-c936-41a8-857a-1e750a0c442c%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
