I’m working on a web page conatining a <ul> with around 5,000 <li>s. Each <li> is a link with a similar structure (www.site.com/collction/####), with anchor text around 20-200 characters.

Presently, I’m storing the items in a json similar to the below format, and dynamically adding list items in JS (with a Docment Fragment to avoid 5,000 redraws):

[{
   "url_end": "abcxyz",
   "achor_text": "The first item: ABCXYZ"
},
{
   "url_end": "def123"
   "anchor_text": "The second item: DEF123"
},
...]

Here’s what I’m curious about:

• To my mind, I’m wondering if the loading-time savings from using a minimized js file (e.g. single-letter keys, and not needing the full URL path) is negated by the amount of time required to dynamically populate the <ul>?
• That is, would hard-coding the <ul> in HTML be a faster page load? It would also cache — rather than JS rebuilding the list every re-load, yes>
• The JS method is it keeps the HTML filesize small, so the page appears very quickly, then the JS builds the list with a placeholder “loading” text in the mean time.
• This 5,000-item list won’t ever be updated once I’m finished with the page.

Thoughts?