3

I'm building a Javascript-based client side templating engine for an internal app. It loads HTML/CSS-based templates from the server and combines them with HTML-based contant (P, EM, etc.)

The templates basically have fixed size areas (defined via CSS) where the content is supposed to fit - and if the content does not fit in those areas/boxes, then the rest goes to another such content box and so on and on.

This image will hopefully make it easier to understand what I mean: Template mockup .

Imagine that the whole thing is 1 template, where content is supposed to fit into the blue boxes - it obviously doesn't fit the first blue box so the 3 green block would be appended to the second box, etc.

Bare in mind that the size, position (and number of) the blue boxes can vary from template to template. And the same is true for content (it can be a small text or a large one - it can be pure text or H1, P, EM, etc. formatted. So everything is a variable. Text size is also defined by a template via CSS (so not a fixed value).

So anyway after some experimentation I got it working, but am now trying to optimize the whole thing to be faster. I'm preprocessing dozens of templates at application start so it takes a while to initialize.

And now we come to my question - to render the HTML/CSS based templates (and know the size of the content boxes, fonts, etc.) for combining them with content, the templates have to have layout and be inserted into DOM. This is of course very costly - so I was wondering if there is any way to do this offscreen? Without rendering them to the browser?

Was looking at documentFragments and while they do assemble DOM offscreen - they do not have layout. What I mean by that is that if you create a documentFragment, insert a DIV into it and say that div should be 150px wide via CSS - it will remember its supposed to be 150px wide, but it will not be 150px wide until you insert the fragment into DOM.

Michael
  • 1,742
  • 3
  • 18
  • 24
  • Have you tried to use some good template engines: http://mustache.github.com/ ?? it should be fast enough – Omar Al-Ithawi Jun 16 '12 at 15:04
  • And it would be useful to use `var someOffScreenDiv = $('
    ');` this should be helpful to do off screen DOM using jQuery     – Omar Al-Ithawi Jun 16 '12 at 15:05
  • Thanks for your answer - but stuff you're suggesting is not relevant at all. All Mustache it does is place text into templates. Please read my question - I'm doing something much more complex than that. I'm flowing text between containers in a template. Mustache or any other off the shelf JS templating engine cannot do that. jQuery is nice for a lot of things - but writing your own JS will be faster performance-wise every time. $('
    ') is probably a shorthand for createElement in jQuery - it will create a DIV offscreen but it will not have layout until you push it to DOM.
     – Michael Jun 16 '12 at 17:03

0 Answers0