JavaScript and UI Rendering Performance

Fastest Performance

No reparsing HTML, HTML and JS are separated. When rendering a list of UI elements, JS can be used with string concat and appendChild but this is not the modern way of separating logic and UI. Initially everything was in a single HTML file including CSS, but the modern way is splitting them out. Even if one is using React.js, the XML trunk should be split out into another .js file.

Good Performance

✅Recommended

Utilising 'eval' function to parse HTML, this can be counted as modern with logic and UI split.

• Values can be placed as
  ${...}
• Complex values and UI tags can be done with
  ${function(Data){...}(Data)}

Acceptable Performance

✅Recommended

This is one of the modern ways known to most people with the Angular.js library. Reparse the DOM of HTML file, this will lead to double jobs of rendering but it may look nicer with things similar to the 'if', 'for' attributes of Angular.js.