What strategies can be implemented to improve the total blocking time in Vue for optimal performance

Question

What strategies can be implemented to improve the total blocking time in Vue for optimal performance

I'm facing a challenge that I can't seem to resolve. My page has a high total blocking time (2+ sec). Despite trying to load every vue component asynchronously, the issue persists with 2+ sec TBT. I'm puzzled by what could be causing such a high TBT on a simple page with minimal underlying logic (https://i.sstatic.net/o7LSk.png) (Just 21 simple cards).

I've stripped down everything unnecessary, optimized my code, and retained only essential elements, but it hasn't made a difference. Is there a way to reduce it to 100-200ms? Based on your experience, what factors typically lead to this kind of problem?

Although I have a substantial number of components (cards, buttons, lazy-load pictures, ratings), totaling around 100-300 on the page, removing them doesn't seem feasible as it would disrupt the clean structure.

javascript vue.js asynchronous optimization

Answer 1

Answer №1

To resolve the issue of high total blocking time in this scenario, I have discovered that employing an intersection observer and loading content only when it becomes visible on the screen is effective. Alternatively, utilizing a virtual scroller plugin might also achieve the same outcome.

<template>
  <div class="grid">
    <div class="grid__item" v-for="item in items" :data-id="item.id">
      <Item v-if="itemsInScreen[item.id]" :item="item" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Grid',
    props: {
      items: {required: true}
    },
    data() {
      return {
        itemsInScreen: {}
      }
    },
    methods: {
      initObserver() {
        const callback = entries => {
          entries.forEach(entry => {
            if(entry.isIntersecting) this.$set(this.itemsInScreen, entry.target.dataset.id, true);
          });
        };

        const options = {
          rootMargin: "20px 20px 20px 20px"
        };
      
        const observer = new IntersectionObserver(callback, options);

        const itemEls = this.$el.querySelectorAll('.grid__item');
        itemEls.forEach(itemEl => observer.observe(itemEl));
      }
    },
    mounted() {
      this.initObserver();
    }
  }
</script>

Answer 2

To resolve the issue of high total blocking time in this scenario, I have discovered that employing an intersection observer and loading content only when it becomes visible on the screen is effective. Alternatively, utilizing a virtual scroller plugin might also achieve the same outcome.

<template>
  <div class="grid">
    <div class="grid__item" v-for="item in items" :data-id="item.id">
      <Item v-if="itemsInScreen[item.id]" :item="item" />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Grid',
    props: {
      items: {required: true}
    },
    data() {
      return {
        itemsInScreen: {}
      }
    },
    methods: {
      initObserver() {
        const callback = entries => {
          entries.forEach(entry => {
            if(entry.isIntersecting) this.$set(this.itemsInScreen, entry.target.dataset.id, true);
          });
        };

        const options = {
          rootMargin: "20px 20px 20px 20px"
        };
      
        const observer = new IntersectionObserver(callback, options);

        const itemEls = this.$el.querySelectorAll('.grid__item');
        itemEls.forEach(itemEl => observer.observe(itemEl));
      }
    },
    mounted() {
      this.initObserver();
    }
  }
</script>

What strategies can be implemented to improve the total blocking time in Vue for optimal performance

Answer №1

Similar questions

Utilizing Firebase 9.0.1 Functions in Vue.js 3

How to transfer data from a component to an external JavaScript file?

Guide on Applying a Dynamic Color in VueJs 3 Composition API/Vuetify Using CSS

Send the form via ajax

What is the behavior of the JavaScript event loop when a Promise's resolution is tied to setTimeout?

Only switch a radio button when the Ajax call results in success

Exploring the intricacies of Knockout JS mapping nested models using fromJS function

Add various inputs to a table using JavaScript

Truncating long text labels in Material UI Autocomplete using ReactJS

Form with missing input fields submits nothing to the server

Erase the dynamically loaded page using ajax and conceal the div

"Adjusting the width of columns in a Datatable

What is the best way to ensure that consecutive if blocks are executed in sequence?

Handling Errors with Async-Await in JavaScript: Struggling to Retrieve Error Specifics from Error Objects

"Using Sequelize's Op.and and Op.like operators led to an unexpected outcome of producing an empty

Gather information from a customizable Bootstrap table and store it in an array

Algorithm for searching and calculating with multiple words (Angular/Javascript)

Finding the variance in the given situation is as simple as following these steps

Combining Angular 2.0 within Angular 1.x: Elevating your module

Having trouble initiating an AJAX request