Improving initial render performance with <can-defer />

CanJS
1

Hey everyone,

I was having trouble with initial render performance in my Can v2 project. I was seeing perceived initial render times to be ~20 seconds while the Chrome DevTools performance profiler was running (code bundled/minified). Much of the content is below-the-fold, so it could fall into place once the user could see something at all.

I created this <can-defer /> component for Can v2: https://gist.github.com/andrejewski/ce3c2cb71af10b9c99bc1a0f535aa17e

I wrapped some of the heavier components in it and saw initial render performance drop to ~1-2 seconds. It is really easy to sprinkle in:

<can-defer delay-ms="500">
  <my-heavy-component />
</can-defer>

<!-- chunk up list rendering -->
{{#each list}}
  <can-defer delay-ms="500" {delay-scalar}="@index">
    <my-heavy-item {item}="." />
  </can-defer>
{{/each}}

Hopefully this is useful to others.

4 Likes
2

can you explain why the initial render drop to 2 seconds?
is the problem chrome dev tools or what cause the problem?

3

The problem was we were rendering too many DOM nodes on initial render (over 12,000). By breaking up how many components got into the page we were able delay doing all that work before the user saw anything. The work still has to happen because these views are very data heavy, but eventually.