(Coachmark): Test performance of anonymous render functions within when directive

[najikahalsema]

Code of conduct

• I agree to follow this project's code of conduct.

Description of issue

(To be done once the initial component is merged to main)

The when directive takes anonymous functions as arguments. The question is whether there's a performance difference between using anonymous methods as arguments or initialising these render methods as anonymous. We should experiment with the two and test the performance of each to see if there's any noticeable difference.

For example,

Wrapping these render methods in an anonymous function within the parameters of when

  method1() {
    return html`
      ${this.name} is my name too   
    `;
  }

// ....

  render() {
    return html`
      ${when(this.name, () => this.method1(), () => this.method2())}
    `;
    }  

vs using an anonymous function from the get-go:

  method1 = () => {
    return html`
      ${this.name} is my name too   
    `;
  }

// ... 

  render() {
    return html`
      ${when(this.name, this.method1, this.method2)}
    `;
    }  

[Rajdeepc]

@najikahalsema While there is not a significant amount of time difference between the two usage of function expressions, anonymous function takes a little bit more time than regular function declaration.

Tested using the console.time() and console.timeEnd() methods

  method1() {
    return html`
      ${this.name} is my name too   
    `;
  }

// ....

  render() {
    return html`
      ${when(this.name, () => this.method1(), () => this.method2())}
    `;
    }  

Performance with console.time

using an anonymous function from the get-go:

  method1 = () => {
    return html`
      ${this.name} is my name too   
    `;
  }

// ... 

  render() {
    return html`
      ${when(this.name, this.method1, this.method2)}
    `;
    }  

[najikahalsema]

Interesting. thank you so much for taking a look! I think the second one is better based on it's nearly half the amount of time needed to render.

[Rajdeepc]

Cool Thanks! Feel free to close this issue once Coachmark is merged.
Tagging the PR here: #3639