Unordered lists in HTML - Performance & Optimization

Performance: Unordered lists

MEDIUM IMPACT

Unordered lists affect the DOM size and rendering time, especially with many list items.

Displaying a list of items on a webpage

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- only 10 items shown, others loaded on demand -->
</ul>

Limiting visible list items reduces DOM size and reflows, improving load speed and responsiveness.

📈 Performance GainSingle reflow on load, faster LCP, and reduced memory usage.

Displaying a list of items on a webpage

HTML

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <!-- repeated 1000 times -->
</ul>

Rendering a very large unordered list with many items increases DOM nodes and triggers multiple reflows.

📉 Performance CostTriggers many reflows during initial rendering, blocking LCP and increasing load time.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Large unordered list (1000 items)	1001 nodes	Many reflows	High paint cost	[X] Bad
Small unordered list (10 items)	11 nodes	1 reflow	Low paint cost	[OK] Good

Rendering Pipeline

The browser parses the unordered list HTML, creates DOM nodes for each <li>, calculates styles, performs layout, paints the list, and composites it on screen.

→DOM Construction

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage is most expensive due to recalculating positions for many list items.

Core Web Vital Affected

LCP

Unordered lists affect the DOM size and rendering time, especially with many list items.

Optimization Tips

1Avoid rendering very large unordered lists all at once.

2Use pagination or lazy loading to limit visible list items.

3Check layout and paint times in DevTools when using lists.

Performance Quiz - 3 Questions

What happens if you render an unordered list with 1000 items all at once?

A It triggers many reflows and slows down page load.

B It reduces the number of DOM nodes and speeds up rendering.

C It has no impact on page performance.

D It improves browser caching automatically.

DevTools: Performance

How to check: Open DevTools, go to Performance tab, record page load, and look for long layout or paint tasks related to list rendering.

What to look for: Look for long Layout or Paint events and high DOM node count indicating heavy list rendering.

Practice

1. What HTML tag is used to create an unordered list?

easy

A. <li>

B. <ol>

C. <ul>

D. <list>

Solution

1. Step 1: Understand list types in HTML

   <ul> creates unordered lists with bullet points, while <ol> creates ordered lists with numbers.

2. Step 2: Identify the correct tag for unordered lists

   The tag <ul> is specifically for unordered lists.

3. Final Answer:

   <ul> -> Option C

4. Quick Check:

   Unordered list tag = <ul> [OK]

Hint: Unordered lists always start with <ul> tag [OK]

Common Mistakes:

• Confusing <ul> with <ol>
• Using <li> as the list container
• Using non-standard tags like <list>

2. Which of the following is the correct syntax to create a list item inside an unordered list?

easy

A. Item

B. Item

C. Item

D. Item

Solution

1. Step 1: Identify the correct tag for list items

   List items must be inside <li> tags.

2. Step 2: Check the correct nesting of tags

   The <li> tags go inside the <ul> tags, not the other way around.

3. Final Answer:

   <ul><li>Item</li></ul> -> Option B

4. Quick Check:

   List item inside <ul> uses
5. [OK]

Hint: List items always go inside <li> tags within <ul> [OK]

Common Mistakes:

• Swapping <ul> and <li> tags
• Using <item> instead of <li>
• Using non-standard <list> tag

3. What will be the visual output of this HTML code?

<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Cherry</li>
</ul>

medium

A. A bulleted list with Apple, Banana, Cherry

B. An error message because of missing tags

C. Plain text: Apple Banana Cherry without bullets or numbers

D. A numbered list with Apple, Banana, Cherry

Solution

1. Step 1: Recognize the list type from the tag

   The <ul> tag creates an unordered list which shows bullet points.

2. Step 2: Understand the list items

   Each <li> creates a bullet point with the text inside it.

3. Final Answer:

   A bulleted list with Apple, Banana, Cherry -> Option A

4. Quick Check:

   <ul> = bulleted list [OK]

Hint: Unordered lists show bullets, ordered lists show numbers [OK]

Common Mistakes:

• Confusing <ul> with <ol>
• Expecting numbers instead of bullets
• Thinking it shows plain text without bullets

4. Identify the error in this unordered list code:

<ul>
  <li>First</li>
  <li>Second
</ul>

medium

A. No error, code is correct

B. Using <ul> instead of <ol>

C. Extra closing tag for <ul>

D. Missing closing tag for the second <li>

Solution

1. Step 1: Check each list item tag

   The first <li> has a closing tag, but the second <li> does not.

2. Step 2: Confirm proper HTML structure

   Every <li> must have a closing </li> tag to be valid.

3. Final Answer:

   Missing closing tag for the second <li> -> Option D

4. Quick Check:

   All
5. tags must be closed [OK]

Hint: Every

needs a closing

tag [OK]

Common Mistakes:

• Forgetting to close <li> tags
• Confusing <ul> with <ol>
• Ignoring missing closing tags

5. You want to create a nested unordered list where 'Fruits' has sub-items 'Apple' and 'Banana'. Which code correctly achieves this?

hard

A. FruitsAppleBanana

B. FruitsAppleBanana

C. FruitsAppleBanana

D. FruitsAppleBanana

Solution

1. Step 1: Understand nested list structure

   Nested lists must be inside a list item <li> of the parent list.

2. Step 2: Check correct nesting in options

   • Fruits
     • Apple
     • Banana
   correctly nests a <ul> inside the <li> for 'Fruits'. Other options either miss closing tags or place nested lists incorrectly.

3. Final Answer:

   <ul><li>Fruits<ul><li>Apple</li><li>Banana</li></ul></li></ul> -> Option A

4. Quick Check:

   Nested
   inside
   • for sublist [OK]

Hint: Put nested <ul> inside a parent <li> tag [OK]

Common Mistakes:

• Placing nested <ul> outside <li>
• Missing closing tags in nested lists
• Using multiple <li> without nesting