Advanced40 minperformancebrowsersrenderinghtml

How Browsers Load and Render Websites

Understand the major steps between requesting a webpage and seeing pixels on the screen, including DOM, CSSOM, layout, paint, and resource dependencies.

Start Here

Think of a browser as a builder.

HTML is not the completed house. CSS is not the completed house. JavaScript is not the completed house.

They are instructions, materials, and behaviours. The browser must assemble them.

Quick Reflection:

Where have you already seen how browsers load and render websites in a real interface?
Which part of this topic currently feels most important to test in a real page?

Understand the major steps between requesting a webpage and seeing pixels on the screen, including DOM, CSSOM, layout, paint, and resource dependencies.

Learning Objectives

By the end of this lesson, you'll be able to:

describe the browser loading process
explain the DOM
explain the CSSOM
describe layout and paint
explain why resource dependencies matter

Why This Matters:

Understand the major steps between requesting a webpage and seeing pixels on the screen, including DOM, CSSOM, layout, paint, and resource dependencies.

Before You Start:

You should be familiar with:

Understanding Website Performance Review here

The browser loading journey

Performance recommendations make much more sense once you understand what the browser is doing.

A simplified loading pathway looks like this:

URL
DNS lookup
Server connection
HTML request
HTML received
DOM built
CSS discovered
CSSOM built
Render tree created
Layout calculated
Paint
Composite
Interactive webpage

The browser discovers several resource types from the HTML, processes them, then combines the results for layout, paint, and the final page.

The DOM

HTML is parsed into the Document Object Model, or DOM.

<body>
  <main>
    <h1>Black Swan Bistro</h1>
    <p>Seasonal dining in Fremantle.</p>
  </main>
</body>

The browser can represent that structure as a tree:

body
+-- main
    +-- h1
    +-- p

The DOM is not just the text of the HTML file. It is the browser's structured model of the document.

The CSSOM

The browser also processes CSS into a CSS Object Model, or CSSOM.

It must determine:

which styles apply
which elements are visible
their dimensions
their position

DOM and CSS information contribute to the render tree. That is why large, tangled, or blocking CSS can affect how soon useful content appears.

Layout, paint, and composite

During layout, the browser calculates geometry. It answers questions such as:

how wide is the heading?
where does the photograph start?
how tall is this section?
where does the button sit?

During paint, the browser draws visual information such as text, colours, backgrounds, borders, shadows, and images.

During composite, the browser combines layers to display the final page.

Resource dependencies

A webpage is not a single file appearing on the screen. It is the result of multiple resources being discovered, downloaded, parsed, processed, and rendered.

Images, fonts, CSS, and JavaScript all enter the browser-loading process at different points. Some are needed immediately. Others can wait.

When performance problems appear later, return to this question:

Which part of the browser's work are we making harder?

Check Your Understanding

Before moving forward, can you answer these?

1. What is the DOM?
2. What is the CSSOM?
3. Why do layout and paint matter for performance?

Check Your Answers

The DOM is the browser's structured model of the HTML document.
The CSSOM is the browser's structured model of the CSS rules and how they apply.
They are part of the browser's visible work. If resources arrive late or dimensions are unknown, the browser may need to recalculate or redraw.

How confident are you with this concept?

Still confused | Getting there | Got it | Could explain it to a friend

Guided Practice

Recreate the browser rendering pathway on paper or in a drawing tool.

Step 1 - Draw the main sequence

Start with URL and finish with interactive webpage.

Step 2 - Add resource branches

Show where CSS, JavaScript, images, and fonts are discovered.

Step 3 - Explain each stage

Add one sentence beside each major stage explaining what happens.

Independent Practice

Take a simple page you previously created.

Your Task:

Identify the HTML file, stylesheet, scripts, images, and fonts. Draw where each enters the browser-loading process.

Requirements:

include at least one HTML, CSS, image, and script resource if your page has them
label DOM, CSSOM, layout, paint, and interactive page
identify one resource that is needed early and one that could wait

Success Criteria:

Criteria	You've succeeded if...
your diagram follows the loading sequence accurately	Completed clearly and correctly in your solution.
resource dependencies are labelled clearly	Completed clearly and correctly in your solution.
you can explain why one resource affects rendering	Completed clearly and correctly in your solution.

Before you continue

I can explain the DOM.
I know what the CSSOM represents.
I understand layout.
I understand paint.
I can describe the browser loading pathway.

Extension activity

Research the term critical rendering path. Explain it in your own words and connect it to one page you have built.

Closure

Key Takeaways:

A webpage is assembled from multiple resources, not simply displayed as one file.
DOM, CSSOM, layout, paint, and composite describe different kinds of browser work.
Performance improves when you understand which work is necessary, which work is delayed, and which work is avoidable.

Learning Objectives Review:

Look back at what you set out to learn. Can you now:

describe the browser loading process Check!
explain the DOM Got it!
explain the CSSOM Can explain it!
describe layout and paint Could teach this!
explain why resource dependencies matter Check!

If you can confidently answer "yes" to most of these, you're ready to move on!

Think & Reflect:

Pause and reflect

Which idea from this lesson now feels practical rather than abstract?
What would you build or test next to make this stick?

Looking Ahead:

A webpage is assembled from multiple resources, not simply displayed as one file.
DOM, CSSOM, layout, paint, and composite describe different kinds of browser work.
Performance improves when you understand which work is necessary, which work is delayed, and which work is avoidable.

Recommended Next Steps

Continue Learning

Ready to move forward? Continue with the next tutorial in this series:

Measuring Website Performance

Additional Resources

Deepen your understanding with these helpful resources:

MDN: Web performance - Reference material for browser loading and rendering performance.
MDN: Critical rendering path - A closer look at how browsers turn resources into rendered pixels.
Chrome DevTools documentation - Official documentation for inspecting browser behaviour.

Progress tracking is disabled. Enable it in to track your completed tutorials.