Performance implications of composing templates

[MrHBS]

I would like to understand if there is any performance issues with dividing my render function into smaller partial renders, eg: https://lit.dev/playground/#sample=v2-docs/templates/compose

[AndrewJakubowicz]

Hey! Great question! I wouldn't be too concerned. I can talk through some performance thoughts about your two cases.

Case 1: Abstracted template:

html`${this.headerTemplate()}`;

Case 2: Inlined template:

html`<header>${this.article.title}</header>`;

The performance difference is very similar to a raw JavaScript case. In case 1, there is an additional method call, dynamic value binding, and an additional html template. These are all very cheap but will create a tiny overhead.

In Case 2, we've removed these tiny overheads, but lost flexibility.

The answer is – it depends on your application. Abstraction and flexibility in JavaScript always come with a tiny performance penalty.

[MrHBS]

Thank you very much! So I assume one big static render function will always be more performant than abstracted templates composed together, correct?

[augustjk]

Technically yes, but I would say not enough to be worried about.