Search code examples
javascriptperformancetemplatesdomcordova

DOM Manipulation vs Templating

So I'm in the midst of a performance overhaul of a little HTML5 phonegap application I'm developing and I'm trying to figure out the best way to handle a semi-frequently updating <ul> element.

I'm currently using DocumentFragments for the initial mass injection of the db data and then jQuery's prepend() and remove() functions for management.

I've been looking at templates, EJS in particular, and I was wondering if I would get any performance boosts if I implemented it.

If so why? And if not also why?

Also any other tips for performant DOM manipulation are welcome. Thanks.

Solution

  • I don't think templates will give you performance boost (if you don't cache your template).

    You have to process the data to generate html anyway.

    Templates just makes generation of html easier, readable and reusable.

    I could add little more-

    1. Cache your template will boost performance JSPerf
    2. Reduce reflow (minimize regenartion of render tree)
    3. Don't add styles directly use css class
    4. Endless so called best practice