Benchmark: Vue inner element vs inner component - 2

With component

const name = Vue.component('str-component', {
  props: ['value'],
  render(createElement){
    console.log(`Value: ${this.value} rendered`)
    return createElement("span", ['Value: ', this.value]);    
  }
})


new Vue({
  el: "#app",
  data() {
    return {
      clickCount: 0,
      step: 0,
      width: 0,
      interval: undefined,
      maxSteps: 2,
      maxWidth: 100,
      minWidth: 0,
      dir: "increase",
      firstName: "Hello",
      lastName: "World"
    };
  },
  mounted() {
    this.interval = window.setInterval(this.benchmark, 10)
  },
  methods: {
    onClick() {
      this.clickCount += 1;
    },
    increaseWidth: function() {
      this.width = this.width + 1;
    },
    decreaseWidth: function() {
      this.width = this.width - 1;
    },
    benchmark: function() {
      if (this.step === this.maxSteps) {
        window.clearInterval(this.interval);
        return;
      }
      if (this.width === this.maxWidth) {
        this.dir = "decrease";
        this.step++;
      } else if (this.width === this.minWidth) {
        this.dir = "increase";
      }

      if (this.dir === "increase") {
        this.increaseWidth();
      } else {
        this.decreaseWidth();
      }
    }
  },
  render(createElement) {
    const button = createElement(
      "button",
      {
        on: {
          click: this.onClick
        }
      },
      "Click me"
    );

    const counter = createElement("span", [
      "Number of clicks:",
      this.clickCount
    ]);
    
    const firstName = createElement(name, {props: {value: this.firstName}});
    
    if (this.width % 20 === 0){
        console.log(`rendered ${this.width}`)
      }

    return createElement(
      "div",
      { style: { "background-color": "red", width: `${this.width}px` } },
      [firstName]
    );
  }
});

With element

const name = Vue.component('str-component', {
  props: ['value'],
  render(createElement){
    console.log(`Value: ${this.value} rendered`)
    return createElement("span", ['Value: ', this.value]);    
  }
})


new Vue({
  el: "#app",
  data() {
    return {
      clickCount: 0,
      step: 0,
      width: 0,
      interval: undefined,
      maxSteps: 2,
      maxWidth: 100,
      minWidth: 0,
      dir: "increase",
      firstName: "Hello",
      lastName: "World"
    };
  },
  mounted() {
    this.interval = window.setInterval(this.benchmark, 10)
  },
  methods: {
    onClick() {
      this.clickCount += 1;
    },
    increaseWidth: function() {
      this.width = this.width + 1;
    },
    decreaseWidth: function() {
      this.width = this.width - 1;
    },
    benchmark: function() {
      if (this.step === this.maxSteps) {
        window.clearInterval(this.interval);
        return;
      }
      if (this.width === this.maxWidth) {
        this.dir = "decrease";
        this.step++;
      } else if (this.width === this.minWidth) {
        this.dir = "increase";
      }

      if (this.dir === "increase") {
        this.increaseWidth();
      } else {
        this.decreaseWidth();
      }
    }
  },
  render(createElement) {
    const button = createElement(
      "button",
      {
        on: {
          click: this.onClick
        }
      },
      "Click me"
    );

    const counter = createElement("span", [
      "Number of clicks:",
      this.clickCount
    ]);
    
    const firstName = createElement("span", ['Value: ', this.firstName]);
    
    if (this.width % 20 === 0){
        console.log(`rendered ${this.width}`)
      }

    return createElement(
      "div",
      { style: { "background-color": "red", width: `${this.width}px` } },
      [firstName]
    );
  }
});

With static value [component]

const name = Vue.component('str-component', {
  props: ['value'],
  render(createElement){
    console.log(`Value: ${this.value} rendered`)
    return createElement("span", ['Value: ', this.value]);    
  }
})


new Vue({
  el: "#app",
  data() {
    return {
      clickCount: 0,
      step: 0,
      width: 0,
      interval: undefined,
      maxSteps: 2,
      maxWidth: 100,
      minWidth: 0,
      dir: "increase",
      firstName: "Hello",
      lastName: "World"
    };
  },
  mounted() {
    this.interval = window.setInterval(this.benchmark, 10)
  },
  methods: {
    onClick() {
      this.clickCount += 1;
    },
    increaseWidth: function() {
      this.width = this.width + 1;
    },
    decreaseWidth: function() {
      this.width = this.width - 1;
    },
    benchmark: function() {
      if (this.step === this.maxSteps) {
        window.clearInterval(this.interval);
        return;
      }
      if (this.width === this.maxWidth) {
        this.dir = "decrease";
        this.step++;
      } else if (this.width === this.minWidth) {
        this.dir = "increase";
      }

      if (this.dir === "increase") {
        this.increaseWidth();
      } else {
        this.decreaseWidth();
      }
    }
  },
  render(createElement) {
    const button = createElement(
      "button",
      {
        on: {
          click: this.onClick
        }
      },
      "Click me"
    );

    const counter = createElement("span", [
      "Number of clicks:",
      this.clickCount
    ]);
    
    const firstName = createElement(name, {props: {value: 'Hello!'}});
    
    if (this.width % 20 === 0){
        console.log(`rendered ${this.width}`)
      }

    return createElement(
      "div",
      { style: { "background-color": "red", width: `${this.width}px` } },
      [firstName]
    );
  }
});

With static value [element]

const name = Vue.component('str-component', {
  props: ['value'],
  render(createElement){
    console.log(`Value: ${this.value} rendered`)
    return createElement("span", ['Value: ', this.value]);    
  }
})


new Vue({
  el: "#app",
  data() {
    return {
      clickCount: 0,
      step: 0,
      width: 0,
      interval: undefined,
      maxSteps: 2,
      maxWidth: 100,
      minWidth: 0,
      dir: "increase",
      firstName: "Hello",
      lastName: "World"
    };
  },
  mounted() {
    this.interval = window.setInterval(this.benchmark, 10)
  },
  methods: {
    onClick() {
      this.clickCount += 1;
    },
    increaseWidth: function() {
      this.width = this.width + 1;
    },
    decreaseWidth: function() {
      this.width = this.width - 1;
    },
    benchmark: function() {
      if (this.step === this.maxSteps) {
        window.clearInterval(this.interval);
        return;
      }
      if (this.width === this.maxWidth) {
        this.dir = "decrease";
        this.step++;
      } else if (this.width === this.minWidth) {
        this.dir = "increase";
      }

      if (this.dir === "increase") {
        this.increaseWidth();
      } else {
        this.decreaseWidth();
      }
    }
  },
  render(createElement) {
    const button = createElement(
      "button",
      {
        on: {
          click: this.onClick
        }
      },
      "Click me"
    );

    const counter = createElement("span", [
      "Number of clicks:",
      this.clickCount
    ]);
    
    const firstName = createElement("span", ['Value:', 'Hello']);
    
    if (this.width % 20 === 0){
        console.log(`rendered ${this.width}`)
      }

    return createElement(
      "div",
      { style: { "background-color": "red", width: `${this.width}px` } },
      [firstName]
    );
  }
});

Test name	Executions per second
With component	2571.2 Ops/sec
With element	6790.0 Ops/sec
With static value [component]	2736.4 Ops/sec
With static value [element]	6023.9 Ops/sec

Vue inner element vs inner component - 2 (version: 4)

Measure performance when parent containing component or element is changed

Comparing performance of: With component vs With element vs With static value [component] vs With static value [element]

Created: 4 years ago by: Registered User

Jump to the latest result

With component

With element

With static value [component]

With static value [element]

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A