Template size and efficiency

Performance
1

Coming up to speed on Ember (very, very cool), and something about templates is bothering me. In an .hbs file, I have this HTML at the end of a minimal template that has some directives like {{#link-to}} and such above it.

<div>
    <div>
        This is cool stuff here
    </div>
</div>

When I use ember b -prod to do a production build, the HTML above ends up being output as a function like this (I’ve pretty-printed it) inside an object initializer:

buildFragment: function() {
    var t = e.createDocumentFragment(),
        n = e.createComment("");
    e.appendChild(t, n);
    var n = e.createTextNode("\n");
    e.appendChild(t, n);
    var n = e.createComment("");
    e.appendChild(t, n);
    var n = e.createTextNode("\n\n");
    e.appendChild(t, n);
    var n = e.createElement("div"),
        r = e.createTextNode("\n    ");
    e.appendChild(n, r);
    var r = e.createElement("div"),
        a = e.createTextNode("\n        This is cool stuff here\n    ");
    e.appendChild(r, a), e.appendChild(n, r);
    var r = e.createTextNode("\n");
    e.appendChild(n, r), e.appendChild(t, n);
    var n = e.createTextNode("\n");
    return e.appendChild(t, n), t
}

A couple of things concern me there.

  1. A long list of DOM API calls is necessarily slower than having the browser’s built-in parser handle parsing the HTML. Usually it won’t matter, of course, but if I extrapolate the above to the kinds of significant structures that we frequently have to build, I start getting concerned.

  2. The code is much larger than the original HTML, concerning me (again, perhaps prematurely) in terms of load times and size-on-the-wire.

  3. What’s with the createComment calls? There are no comments in the HTML. And all the repeated var declarations for vars already declared?

If there’s a lot of intermix between directives and static content, there might be more benefit, but it seems odd that large sections of static HTML are handled so…verbosely.

My goal here is to understand how it works (did I do something wrong?), and to ask: Have the things above been issues for people in the real world? Are there reasonable alternatives (perhaps client-side compilation of templates into more efficient runtime structures) that are well-integrated into the excellent Ember structure?

Thanks,

– T.J.

2

Good news!

In the 2.9.0-alpha.2 of Ember, the template:

<div>
    <div>
        This is cool stuff here
    </div>
</div>

Is compiled down to:

""{\"statements\":[[\"openElement\",\"div\",[]],[\"text\",\"\\n    \"],[\"openElement\",\"div\",[]],[\"text\",\"\\n        This is cool stuff here\\n    \"],[\"closeElement\"],[\"text\",\"\\n\"],[\"closeElement\"]],\"locals\":[],\"named\":[],\"yields\":[],\"blocks\":[],\"meta\":{}}""

Which is much much smaller size wise.

Comment nodes are used to mark the start and end of dynamic regions (aka the template start / stop).

3

Thanks. for the reply!

That’s smaller, I guess, but still awfully big for one contiguous block of HTML.

There appears to be a comment at the beginning, then after the first newline, then never again, which isn’t at the beginning and end of dynamic content…?