feat(perf): hydrateComponent perf tests

[jodarove]

Details

This PR adds the following perf tests for hydrateComponent:

• table-hydrate-1k
• tablecmp-hydrate-1k

SSR+hydrate vs createElement+appendChild:

For reference, I made a comparison of SSR+hydrate vs createElement+appendChild:

table 1k:

by modifying the perf test of hydrate, so it also includes the appendChild in the measures, this is the result:

modified test:

benchmark(`benchmark-table/hydrate/1k`, () => {
    let tableElement;
    let props;

    before(() => {
        const store = new Store();
        store.run();

        props = {
            title: 'table hydrate 1k',
            rows: store.data,
        };

        const ssrHtml = renderComponent('benchmark-table', Table, props);

        const fragment = new DOMParser().parseFromString(ssrHtml, 'text/html', {
            includeShadowRoots: true,
        });

        tableElement = fragment.querySelector('benchmark-table');
    });

    run(async () => {
        await insertComponent(tableElement); // <-- This is for reference only, the perf test should only measure hydrate.

        hydrateComponent(tableElement, TableClient, props);
    });
});

tablecmp 1k:

by modifying the perf test of hydrate, so it also includes the appendChild in the measures, this is the result:

modified test:

benchmark(`benchmark-table-component/hydrate/1k`, () => {
    let props;
    let tableElement;

    before(() => {
        const store = new Store();
        store.run();

        props = {
            rows: store.data,
        };

        const ssrHtml = renderComponent('benchmark-table', Table, props);

        const fragment = new DOMParser().parseFromString(ssrHtml, 'text/html', {
            includeShadowRoots: true,
        });

        tableElement = fragment.querySelector('benchmark-table');
    });

    run(async () => {
        await insertComponent(tableElement);
        hydrateComponent(tableElement, TableClient, props);
    });
});

First contentful paint

95.77ms - 103.65ms vs 146.62ms - 147.93ms. Note: for this measure, the perf test was slightly modified by removing all dataset generation and adding the ssr generated content in the html along with the rows, which is closer to a real example.

Does this pull request introduce a breaking change?

• ✅ No, it does not introduce a breaking change.

Does this pull request introduce an observable change?

• ✅ No, it does not introduce an observable change.

[nolanlawson]

LGTM!