Performance: Is it faster to let the browser render a lot of items instead of Alpine?

[hirasso]

Hi there! I have a list with about 600 items that are being rendered in a filterable and searchable list. The data source is a JSON object. I went for a x-for loop:

<div class="postlist" x-data="Postlist()" x-bind="bindings">
  <!-- some other stuff like the filter and search UI... -->
  <ul class="postlist_items">
    <template x-for="(post, index) in getVisiblePosts()" :key="post.id">
      <li
        class="postlist_item" 
        x-data="PostlistItemAnimated()"
        x-bind="bindings"
        >
        <a class="postlist_item_link no-underline" :href="post.url">
  
          <div class="postlist_item_images">
  
            <div 
              class="postlist_item_image postlist_item_image--primary is-visible"
              :class="{'is-visible': imageIndex === 0}"
              x-html="post.first_image"
              ></div>
  
            <template x-for="image in post.additional_images">
  
              <div 
                class="postlist_item_image postlist_item_image--secondary" 
                :class="{'is-visible': imageIndex === image.index}"
                x-html="image.html"
                >
  
                </div>
  
            </template>
  
          </div>
          <div class="postlist_item_text">
            <h3>
              <div class="postlist_item_title--long" x-text="post.title"></div>
              <div class="postlist_item_title--short" x-text="post.title_short"></div>
            </h3>
            <p class="postlist_item_subtitle" x-text="post.subtitle"></p>
          </div>
        </a>
  
      </li>
    </template>
  
  </ul>
</div>

It works fine, but initially needs quite a bit of time to render all items. Now I am thinking about moving the whole templating logic inside the x-for loop to the server, since the values for the individual items (e.g. post.title or post.subtitle) don't change anyways.

Another probable performance optimization I could think of would be not to use an x-for loop at all, but instead render all items on the server and use x-show for the filtering and searching logic.

Is there any information available somewhere about if this could speed-up the initial rendering of the items? I want to avoid doing too much premature optimization, so having a better understanding of performance best practices when using Alpine.js would be great.

I know that this is a fairly unspecific question, but I hope someone has some insight about this.

[skurfuerst]

Hey @hirasso ,

Generally, rendering long lists on the server side (like 600 elements) and simply displaying them in the browser is not a problem at all for browsers, and will be way quicker than using alpine.js here - simply because the browser starts rendering already while receiving the HTML; but alpine (and JS in general) usually only kicks in after the whole page is transferred and fully rendered.

By rendering on the server side and then using alpine show/hide logic should lead to a way higher perceived performance, because even if the alpine initialization takes 200 Ms for all the elements, there is no visible difference (so the delay until interactivity starts does not matter).

Hope this helps a bit :)
All the best,
Sebastian

[hirasso]

Hi @skurfuerst

Thank you for your answer.

Generally, rendering long lists on the server side (like 600 elements) and simply displaying them in the browser is not a problem at all for browsers, and will be way quicker than using alpine.js here - simply because the browser starts rendering already while receiving the HTML; but alpine (and JS in general) usually only kicks in after the whole page is transferred and fully rendered.

Of course, that makes total sense. Actually, thinking about it, I have a scenario where I might have to render the list with Alpine (hard to explain, SEO related). So let's put aside the argument about the first render and perceived performance for the moment. Now the question left would be:

Would it be faster if the list would render ready-made html-fragments instead of compiling the template with alpine? Basically, something like this:

<div class="postlist" x-data="Postlist()" x-bind="bindings">
  <!-- some other stuff like the filter and search UI... -->
  <ul class="postlist_items">
  
    <template x-for="(post, index) in getVisiblePosts()" :key="post.id">
      <li
        class="postlist_item" 
        x-data="PostlistItemAnimated()"
        x-bind="bindings"
        x-html="post.serverRenderedHtml"
        >
      </li>
    </template>
  
  </ul>
</div>

I called the variable post.serverRenderedHtml to make it more clear what I mean. Of course, the above would lead to a larger JSON object, since it would have to contain the full compiled html for each post item, but still. In my case I could probably live with this trade-off.

[hirasso]

OK, I have done some testing. Added this to the init() method of my alpine component Postlist():

init() {
  // ...
  console.time('Timer');
  this.$nextTick(() => {
    console.timeEnd('Timer')
  })
}

Using this I could measure the time the template needs for rendering the items.

If using Alpine x-text directives as seen in my first post, it took around 630ms.

After moving all x-text directives to the server and just rendering a pre-generated chunk of plain old html for each post item, it now takes about 369ms. A huge improvement I would say!! 🤩

[skurfuerst]

Awesome! I've also measured it because I would not have known in advance what is faster.

All the best,
Sebastian

[hirasso]

Yeah, I am also quite happy to have some benchmark here, also for future reference. Cleaned up the code snippets a bit, to make it clearer for other devs stumbling on this discussion.