Simple html vs Javascript generated html?

Question

In my web application I would like to complately avoid html and use only javascript to create web-page\'s dom tree.

What is faster writing web content in the traditi

Answer 1

If you're going to be doing a lot of changes to html through javascript I'd recommend using a templating library like trimpath.

Answer 2

HTML is parsed and generated by the browser and then entered into the DOM. Using javascript to manipulate the dom piece by piece is more overhead.

Imagine if you had to retype an article from a magazine. Now imagine doing so if every sentence was on a new page. ALthough the end result is a copied article, you had to spend all that time flipping pages.

Answer 3

By far the traditional way is faster, the user downloads the file, it is there, parsed and done.

If you do the JS way the page has to be built client-side, EVERY time they load the page.

That is just a horrible way to build a page IMHO and a nightmare to manage/update/create

Answer 4

As you I was wondering the same and made a similar test as @evilReiko did:

In order to render a page containing a table with 1000000000 of records I found the following results:

• static html file : file size 32MB, page loading time 2.8 Min
• static html file with minified content: file size 12MB, page loading time 1.3 Min
• dynamic html file generated by JS: file size 612 byte (+ 713 byte of JS), page loading time 10.09 seconds...

Answer 5

The traditional approach is going to be faster because the browser only has to download, interpret and display. The approach you're suggesting would cause the browser to have to download, interpret, change * n times and then display.

That's as far as rendering goes.

As far as maintainability goes, you're creating a nightmare. That's the key to development. The number of nightmares in maintainability is proportional to the "quality" of the code, IMHO. Performance and optimization should come second to maintainability. (There are exceptions, of course. Nothing is black-and-white).

HTML was created to be an expressive language. Javascript wasn't. End of story, in my opinion.

Answer 6

Stick with the traditional HTML. It's not only faster than doing everything with javascript, it's much more maintainable.

Unless there is a compelling reason otherwise, stick with the straight up HTML and use javascript for the more interactive pieces of your app.