Asymptotic Analysis: Populating a long repeated list. HTML vs. JavaScript?

Question

I'm making my portfolio website here,

and I'm wondering if I should replace my LONG HTML5 code that populates my skills/projects/project modals into javascript that runs in a for loop.

I know it won't matter much because it is not like thousands of list elements, but if I take asymptotic approach, would it make difference at all?

I read this thread: Simple html vs Javascript generated html? , but it was still vague to me.

Thank you in advance.

EDIT

Someone voted that this post is unclear about what it's asking. So let me rephrase.

Assume that I'm populating almost infinite number of <li> elements, will HTML5 tags (traditional way) load the page faster, or forloop in a JavaScript load the page faster? Another assumption is that page will be loaded at some point.

Thanks again.

I think you're going to have to narrow the scope on this question a bit. To assume an "almost inifinite" number of `
Most applications that involve a high number of elements of the same type are going to be pulling data for the elements from a database via AJAX and using some JS to plug the data into newly-created elements. Rarely do you see this all done on the server and then served to the client as a complete page. — Jonathan M, Sep 21 '15 at 18:42
Markup is cheap, images are expensive. I would consider focusing on deferred and responsive loading of those before worrying about markup generation. — Jesse Kernaghan, Sep 21 '15 at 18:48
Thank you guys. @JonathanM it could be 1000, 100000, or 1M. Would loading performance matter in different sizes of `

score 2 · Accepted Answer · answered Sep 21 '15 at 18:53

2

You say an almost infinite number of items. I say you're grossly exaggerating.

Did you ever wonder why Google only shows you the first 10 results? How many times do you look at page 2 of your Google searches? The 3rd page? Ever even seen the 4th?

What's your usual conclusion when you have to go to the 2nd page? Mine is that my query sucks and I try to narrow it down.

There's no way a user is expected to peruse "an almost infinite amount of items" and get any useful information from it. Use a search engine, let people narrow their search (way) down, use paging. And after that's done, use HTML. There's no reason to add another two layers of work (outputting the Javascript code to render + sending the JS data) to just generate the same output in the end.

answered Sep 21 '15 at 18:53

Blindy

65,249
10
91
131

Hi Blindy, thanks for your answer. I do understand it's very well exaggerated and of course I would NEVER load almost infinite number of items in one page. That's just stupid idea. However, I just wanted to know the loading speed difference of HTML5 and JavaScript by assuming a certain condition. I mean assumption helps when benchmarking algorithm speed :) I'm not really talking about UI/UX here. I purely want to know the best approach of the loading speed. – Saehun Sean Oh Sep 21 '15 at 18:59
Why would you think it's faster to generate the HTML at runtime, updating the entire DOM over and over instead of just doing it once when you read? – Blindy Sep 21 '15 at 19:15
I think I had misunderstanding how DOM was loaded vs. regular program stack was loaded. Thanks for the answer. That derived the answer. – Saehun Sean Oh Sep 21 '15 at 19:38

Asymptotic Analysis: Populating a long repeated list. HTML vs. JavaScript?

EDIT

1 Answers1