Benchmark: template vs imperative 2

Script Preparation code:


function create_fragment_imperative(ctx) {
    let section;
    let h1;
    let t3;
    let p;

    return {
        c() {
            section = element("section");
            h1 = element("h1");
            h1.textContent = `Hello ${ctx.name}!`;
            t3 = space();
            p = element("p");
            p.textContent = `${ctx.description}`;
        },
        m(target, anchor) {
            insert(target, section, anchor);
            append(section, h1);
            append(section, t3);
            append(section, p);
        },
        p: noop,
        i: noop,
        o: noop,
        d(detaching) {
            if(detaching) detach(section);
        }
    };
}

function make_renderer(html) {
    const template = document.createElement('template');
    template.innerHTML = html;

    const text = template.content.querySelectorAll('sveltetext');
    for(let i = 0; i < text.length; i += 1) {
        text[ i ].replaceWith(document.createTextNode(""));
    }
    const t = template.content.firstChild;

    return () => t.cloneNode(true);
}


const render = make_renderer(
    `<section><h1>Hello <sveltetext/>!</h1> <p><sveltetext/></p></section>`
);

function create_fragment_template(ctx) {
    let section;
    let t0;
    let t1;
    let h1;

    return {
        c() {
            section = render();
            t0 = section.firstChild.childNodes[1].firstChild;
            t1 = section.firstChild.childNodes[3].firstChild;
 
            t0 = set_data(t0, ctx.name);
            t1 = set_data(t1, ctx.description);
        },
        m(target, anchor) {
            insert(target, section, anchor);
        },
        i: noop,
        o: noop,
        d(detaching) {
            if(detaching) detach(section);
        }
    };
}

function create_fragment_template2(ctx) {
    let section;
    let t0;
    let t1;
    let h1;

    return {
        c() {
            section = render();
            h1 = section.firstChild;
            t0 = h1.firstChild.nextSibling;
            t1 = h1.nextSibling.nextSibling.firstChild;
 
            t0 = set_data(t0, ctx.name);
            t1 = set_data(t1, ctx.description);
        },
        m(target, anchor) {
            insert(target, section, anchor);
        },
        i: noop,
        o: noop,
        d(detaching) {
            if(detaching) detach(section);
        }
    };
}

Tests:

imperative
function imperative() { let name = "world"; let description = "gogogo"; const frag = create_fragment_imperative({ name, description }); frag.c(); frag.m(document.body); }
tempelateM
function template() { let name = "world"; let description = "gogogo"; const frag = create_fragment_template({ name, description }); frag.c(); frag.m(document.body); }
tempelateS
function template() { let name = "world"; let description = "gogogo"; const frag = create_fragment_template2({ name, description }); frag.c(); frag.m(document.body); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
imperative
tempelateM
tempelateS

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the benchmark test cases.

**Benchmark Overview**

The provided JSON represents three test cases that compare the performance of two different approaches to rendering HTML fragments in JavaScript: imperative and template-based rendering.

**Imperative Rendering (Template vs Imperative 1)**

In this approach, the `create_fragment_imperative` function is used to create an HTML fragment. The function uses a series of calls to `element`, `space`, and other functions to manually construct the HTML structure. The resulting fragment is then attached to the DOM using the `m` method.

**Template-Based Rendering (Template vs Imperative 2)**

In this approach, a template string is used to define the HTML structure. The `make_renderer` function is used to parse the template and create a render function that returns a clone of the original fragment. This approach uses Svelte's template syntax (`<sveltetext/>`) to represent dynamic text nodes.

The two variations of template-based rendering, `create_fragment_template` and `create_fragment_template2`, differ in how they access and update the text nodes within the rendered fragment.

**Test Cases**

Three test cases are defined:

1. **Imperative**: This test case uses the imperative rendering approach to create an HTML fragment using the `create_fragment_imperative` function.
2. **TemplateM**: This test case uses the template-based rendering approach with the `create_fragment_template` function.
3. **TemplateS**: This test case uses the template-based rendering approach with the `create_fragment_template2` function.

**Library and Features Used**

* Svelte: A JavaScript framework for building web applications. The benchmark uses Svelte's syntax (`<sveltetext/>`) to represent dynamic text nodes within the template.
* `element`, `space`, and other functions are used to manually construct HTML fragments in the imperative rendering approach.

**Comparison of Approaches**

The two approaches being compared are:

1. **Imperative Rendering**: This approach uses a series of function calls to manually construct an HTML fragment. It provides more control over the resulting structure but requires more code.
2. **Template-Based Rendering**: This approach uses a template string to define the HTML structure and relies on Svelte's render function to populate the dynamic text nodes. It is generally faster and more concise than imperative rendering.

**Pros and Cons**

* Imperative Rendering:
	+ Pros: More control over the resulting structure.
	+ Cons: Requires more code and can be slower due to the overhead of manual construction.
* Template-Based Rendering:
	+ Pros: Generally faster and more concise.
	+ Cons: Less control over the resulting structure, as it relies on Svelte's render function.

**Benchmark Results**

The provided JSON includes benchmark results for each test case. The results show that the imperative rendering approach (Template vs Imperative 1) is slower than both template-based rendering approaches (TemplateM and TemplateS).

Related benchmarks:

template vs imperative 2 (version: 0)

compare speed

Comparing performance of: imperative vs tempelateM vs tempelateS

Created: 4 years ago by: Guest

Jump to the latest result

imperative

tempelateM

tempelateS

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):