Component-based framework philosophy in Bootsrap - Performance & Optimization

Performance: Component-based framework philosophy

MEDIUM IMPACT

This affects how quickly the page loads and updates by controlling how UI parts are built and reused.

Building a UI with reusable parts

Bootsrap

<template id="header-template"><div>Header</div></template><script>const template = document.getElementById('header-template'); document.body.appendChild(template.content.cloneNode(true)); document.body.appendChild(template.content.cloneNode(true));</script>

Reuses a single template to create multiple headers, reducing DOM size and duplication.

📈 Performance GainSingle reflow for template cloning, smaller DOM, faster updates

Building a UI with reusable parts

Bootsrap

<div>Header</div><div>Header</div><div>Header</div>

Repeating the same HTML multiple times increases DOM size and slows rendering.

📉 Performance CostTriggers multiple reflows and increases initial load time

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Repeated HTML blocks	High (many nodes)	Multiple reflows	High paint cost	[X] Bad
Component reuse with templates	Low (fewer nodes)	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Components break UI into smaller parts that the browser can update independently, reducing full page re-layouts.

→Style Calculation

→Layout

→Paint

→Composite

⚠️ BottleneckLayout stage when many DOM nodes change

Core Web Vital Affected

INP

This affects how quickly the page loads and updates by controlling how UI parts are built and reused.

Optimization Tips

1Use components to limit how much of the DOM changes at once.

2Avoid repeating large blocks of HTML; reuse templates or components.

3Smaller, isolated DOM updates improve interaction responsiveness.

Performance Quiz - 3 Questions

How does using components affect page interaction performance?

A It blocks the main thread for longer

B It increases the number of DOM nodes and slows rendering

C It reduces DOM updates and speeds up rendering

D It has no effect on performance

DevTools: Performance

How to check: Record a performance profile while interacting with the page. Look for long layout or paint times caused by repeated DOM updates.

What to look for: High layout or paint times indicate inefficient DOM updates; component reuse reduces these.

Practice

1. What is the main idea behind a component-based framework like Bootstrap?

easy

A. Avoiding any reusable code

B. Breaking a webpage into small, reusable parts

C. Using only JavaScript for styling

D. Writing all styles in one big CSS file

Solution

1. Step 1: Understand the concept of components

   Components are small parts that can be reused to build a webpage easily.

2. Step 2: Compare options with this idea

   Only Breaking a webpage into small, reusable parts describes breaking a webpage into reusable parts, which matches the component philosophy.

3. Final Answer:

   Breaking a webpage into small, reusable parts -> Option B

4. Quick Check:

   Component-based = reusable parts [OK]

Hint: Components mean reusable parts of a webpage [OK]

Common Mistakes:

• Thinking components mean writing all styles in one file
• Confusing components with JavaScript-only code
• Believing components avoid reuse

2. Which of the following is a correct way to use a Bootstrap button component in HTML?

easy

A. Click me

B. Click me

C. Click me

D. Click me

Solution

1. Step 1: Recall Bootstrap button syntax

   Bootstrap buttons use the btn class plus a style class like btn-primary.

2. Step 2: Check each option for correct classes and tags

   <button class="btn btn-primary">Click me</button> uses <button> with btn btn-primary, which is correct. Others use wrong classes or tags.

3. Final Answer:

   <button class="btn btn-primary">Click me</button> -> Option D

4. Quick Check:

   Bootstrap buttons need btn + style class [OK]

Hint: Bootstrap buttons always use class 'btn' plus style [OK]

Common Mistakes:

• Using incorrect class names like 'button-primary'
• Using invalid HTML tags like <btn>
• Swapping class order or missing 'btn'

3. What will be the visual result of this Bootstrap code?

<div class="alert alert-success" role="alert">Success!</div>

medium

A. A green box with the text 'Success!'

B. A red box with the text 'Success!'

C. Plain text 'Success!' with no box

D. A blue box with the text 'Success!'

Solution

1. Step 1: Identify the Bootstrap classes used

   The classes alert and alert-success create a styled alert box with green color.

2. Step 2: Understand the visual meaning

   alert-success means a green alert box showing success message.

3. Final Answer:

   A green box with the text 'Success!' -> Option A

4. Quick Check:

   alert-success = green alert box [OK]

Hint: alert-success always shows a green alert box [OK]

Common Mistakes:

• Confusing alert-success with alert-danger (red)
• Expecting no box or plain text
• Mixing up alert colors

4. Identify the error in this Bootstrap navbar code:

<nav class="navbar navbar-expand-lg bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

medium

A. Incorrect class name for navbar-brand

B. Missing data-bs-toggle attribute on button

C. Missing aria-controls attribute on button

D. Missing id on collapse div

Solution

1. Step 1: Check button attributes for toggling navbar

   The button has data-bs-toggle and data-bs-target, but lacks aria-controls which is needed for accessibility.

2. Step 2: Verify other attributes and classes

   Classes and id are correct; only aria-controls is missing on the button.

3. Final Answer:

   Missing aria-controls attribute on button -> Option C

4. Quick Check:

   Navbar toggle needs aria-controls for accessibility [OK]

Hint: Navbar toggler button needs aria-controls attribute [OK]

Common Mistakes:

• Ignoring accessibility attributes
• Thinking data-bs-toggle is missing
• Confusing id and class names

5. You want to create a reusable Bootstrap card component that shows a title and text. Which approach best follows the component-based philosophy?

hard

A. Use Bootstrap card classes and create a reusable template or component in your code

B. Create a custom CSS class and write card HTML manually each time

C. Write the card HTML once and copy-paste it everywhere

D. Avoid using Bootstrap and write all styles inline

Solution

1. Step 1: Understand component-based philosophy

   It encourages reusable parts that can be used multiple times without rewriting code.

2. Step 2: Evaluate options for reusability and Bootstrap usage

   Use Bootstrap card classes and create a reusable template or component in your code uses Bootstrap classes and creates a reusable template/component, which is best practice.

3. Final Answer:

   Use Bootstrap card classes and create a reusable template or component in your code -> Option A

4. Quick Check:

   Reusable templates + Bootstrap classes = best practice [OK]

Hint: Reuse Bootstrap classes with templates/components [OK]

Common Mistakes:

• Copy-pasting code instead of reusing components
• Writing custom CSS unnecessarily
• Avoiding Bootstrap and inline styles