4 ms·
If you're using a template engine to render UI on the client side, it's helpful to have a rough idea of the relative performance: http://jsperf.com/dom-vs-inne
by jashkenas 16y ago
If you're using a template engine to render UI on the client side, it's helpful to have a rough idea of the relative performance:
http://jsperf.com/dom-vs-innerhtml-based-templating/45 http://jsperf.com/dom-vs-innerhtml-based-templating/45
Here's a screenshot of the results: http://cl.ly/42CP http://cl.ly/42CP
It can make a difference, because UI-rendering can often be the performance bottleneck in a JS web app ... especially in older browsers like Internet Explorer.
Although, perhaps it isn't a problem at all -- looking at the source, it doesn't appear as though Jade supports IE:
https://github.com/visionmedia/jade/blob/master/lib/jade.js#L89 https://github.com/visionmedia/jade/blob/master/lib/jade.js#...
- abp 16y agoHm, what about https://github.com/jquery/jquery-tmpl https://github.com/jquery/jquery-tmpl, jquerys official templating plugin? I use this one with a js-app in conjunction with knockout.js and a few others. So performance of this one would be interesting, too. Btw: The actual benchmark is really compelling.
- moe 16y agojquery-tmpl is "Resig Micro-Templates" in his screenshot. Should be plenty fast enough for all but the most demanding use-cases.
- jashkenas 16y agoJSPerf.com is like a wiki -- so by all means, please edit the page and add a "jquery-tmpl" test.
- deleted 16y ago[deleted]
- abp 16y agoYes, i know. I'am just very tired. But anyway, i've added it now. http://jsperf.com/dom-vs-innerhtml-based-templating/46 http://jsperf.com/dom-vs-innerhtml-based-templating/46 It performs really poor..
- jashkenas 16y agoOh my goodness -- that's really fascinating. I had no idea that the new jQuery-tmpl templates were that egregiously slow. (Nearly 100x slower, for those who don't want to run the tests.) Thanks for adding 'em to the list.
- abp 16y agoNo problem after all. :) It's really horrible. But it's not that bad for me. knockout.js does a good job with partial rendering via databinding (ie. only rerender what really changed or is added). Also it's just beta 1, lets see what happens next. But adding Eco Template as engine for knockout.js would be a great idea, i think...
- psadauskas 16y agoI also got errors with Jade and Eco on Opera 10. The whole page fails with Opera 11, too: http://cl.ly/3s2a0i3V1s422b2Z1Z3C http://cl.ly/3s2a0i3V1s422b2Z1Z3C
- psadauskas 16y agoI added a test[1] for Handlebars.js, which is identical to mustache, but pre-compiled. It comes in 2nd in my tests. [2] [1]: http://jsperf.com/dom-vs-innerhtml-based-templating/47 http://jsperf.com/dom-vs-innerhtml-based-templating/47 [2]: http://cl.ly/3002090Y093I383N013r http://cl.ly/3002090Y093I383N013r