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.
For more options, visit https://groups.google.com/d/optout.
