Benchmark: template vs imperative

Script Preparation code:

function noop() { }
function append(target, node) {
    target.appendChild(node);
}
function insert(target, node, anchor) {
    target.insertBefore(node, anchor || null);
}
function detach(node) {
    node.parentNode.removeChild(node);
}
function element(name) {
    return document.createElement(name);
}
function text(data) {
    return document.createTextNode(data);
}
function space() {
    return text(' ');
}
function set_data(text, data) {
    data = '' + data;
    if(text.data !== data)
        text.data = data;
}

// END SVELTE INTERNALS

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();
            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); }
tempelate
function template() { let name = "world"; let description = "gogogo"; const frag = create_fragment_template({ 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
tempelate

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.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the benchmark.

**What is being tested?**

The benchmark tests the speed difference between two approaches: **Imperative** and **Template-based rendering**. The test case creates a JavaScript fragment using both methods, which are then rendered to the DOM.

**Options compared**

In this benchmark:

*   **Option 1:** Imperative approach (using `create_fragment_imperative` function)
*   **Option 2:** Template-based approach (using `create_fragment_template` function and `make_renderer` function)

**Pros and Cons of each option:**

### Imperative Approach

Pros:

*   Easier to understand for developers familiar with imperative programming.
*   Less overhead since it doesn't involve creating a template.

Cons:

*   More verbose code, as every step is explicitly defined.
*   Can be slower due to the need to create and manipulate DOM elements manually.

### Template-based Approach

Pros:

*   More concise code, making it easier to read and maintain.
*   Can be faster since it leverages browser caching and optimized rendering.

Cons:

*   Requires understanding of template syntax and HTML manipulation.
*   May incur additional overhead due to the need to create a template element.

**Other considerations:**

*   The `make_renderer` function is used to optimize the rendering process by cloning the template node and removing text nodes. This can improve performance but may add complexity.
*   Both approaches use DOM manipulation, which can be slow if not optimized properly.

**Library/Frame Work**

The benchmark uses a library/framework called Svelte.js, which provides a way to declaratively render HTML templates. The `create_fragment_template` function utilizes this framework's API to create and render the template-based fragment.

**Special JS feature or syntax**

This benchmark doesn't use any special JavaScript features or syntax beyond what's standard in modern browsers. However, it relies on Svelte.js-specific features, like template literals and the `sveltetext` placeholder, which are not part of standard JavaScript.

**Alternatives:**

Other alternatives for templating and rendering include:

*   React: A popular library for building user interfaces.
*   Vue.js: Another popular framework for declarative rendering.
*   HTML templates with inline scripting (e.g., using `<script>` tags): This approach can be faster but may incur additional overhead due to parsing and compilation.

Keep in mind that the choice of templating library or approach depends on the specific requirements and constraints of your project.

Related benchmarks:

template vs imperative (version: 0)

test the speed of 2 mthods

Comparing performance of: imperative vs tempelate

Created: 4 years ago by: Guest

Jump to the latest result

imperative

tempelate

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):