Section 34: DOM, Parsing, Rendering and JavaScript Responsibilities

Learning Objectives

Understand how browsers parse HTML.
Learn what the DOM represents.
Understand the relationship between HTML, CSS and JavaScript.
Learn about the critical rendering path and common performance issues.

1. What Happens When a Browser Loads a Page?

When a browser receives an HTML document, it parses the markup and builds a Document Object Model (DOM). It also processes CSS to build style information and combines the necessary information to calculate layout and render the page.

The browser receives the response.
The HTML parser processes markup and builds the DOM.
CSS resources are processed to calculate styles.
The browser performs layout and paints visible content.
JavaScript can modify the DOM, styles and application behavior.

This is a simplified model. Browsers can perform some work in parallel, and JavaScript, stylesheets, images and other resources can affect the timing.

2. What Is the DOM?

The DOM is a programming interface representing a document as a tree of objects. JavaScript can inspect and modify the document through this interface.

<h1 id="heading">Hello HTML</h1>
<p class="message">Welcome to the course.</p>

<script>
  const heading = document.querySelector("#heading");
  const message = document.querySelector(".message");

  heading.textContent = "Hello JavaScript";
  message.textContent = "The DOM has been updated.";
</script>

3. HTML vs DOM

HTML is the markup source. The DOM is the browser's parsed document representation. JavaScript can change the DOM without rewriting the original HTML file stored on the server.

4. The CSSOM and Rendering

The CSS Object Model (CSSOM) represents CSS rules and related style information. Browsers combine DOM and style information to determine what is displayed and where it appears.

<style>
  .highlight {
    color: blue;
    font-weight: bold;
  }
</style>

<p class="highlight">This text is styled with CSS.</p>

5. JavaScript Timing

<script src="/js/app.js" defer></script>

For classic external scripts, defer allows downloading while parsing continues and executes the script after parsing finishes. It is often appropriate when a script needs access to the parsed document.

6. DOM Updates and Performance

Changing the DOM can cause style recalculation, layout, painting or compositing. Not every DOM update triggers every stage. Performance depends on the type and number of changes and the page's rendering complexity.

<ul id="course-list"></ul>

<script>
  const list = document.querySelector("#course-list");
  const fragment = document.createDocumentFragment();

  ["HTML", "CSS", "JavaScript"].forEach((course) => {
    const item = document.createElement("li");
    item.textContent = course;
    fragment.append(item);
  });

  list.append(fragment);
</script>

DocumentFragment is useful for assembling DOM nodes before insertion. Modern browsers optimize many DOM operations, so measure actual performance rather than assuming a fragment always provides a major speed improvement.

7. Avoid Unsafe DOM Updates

const output = document.querySelector("#output");
const userInput = "Example user text";

// Safer for plain text:
output.textContent = userInput;

DOM & Browser Rendering