-3

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.

Improve this question
6
  • I think you're going to have to narrow the scope on this question a bit. To assume an "almost inifinite" number of <li> elements makes it hard to know what you're asking and how to advise, since such a set of elements would take an "almost infinite" amount of time to build in JS or transmit from a server. Be a bit more realistic: are you talking about 100 <li> elements, 1000, 100000, or 1M? Commented Sep 21, 2015 at 18:38
  • 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. Commented Sep 21, 2015 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. Commented Sep 21, 2015 at 18:48
  • Thank you guys. @JonathanM it could be 1000, 100000, or 1M. Would loading performance matter in different sizes of <li> elements ? @Jesse Kernaghan I do understand images are expensive, but I appreciate your answer. Commented Sep 21, 2015 at 19:01
  • OK, you're also going to have to define "faster". Do you want to measure actual time? If so, from what event to what event? If not, are you wanting to measure client cycles, server cycles...? Commented Sep 21, 2015 at 19:26

1 Answer 1

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

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.
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?
I think I had misunderstanding how DOM was loaded vs. regular program stack was loaded. Thanks for the answer. That derived the answer.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.