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.

1. The browser receives the response.
2. The HTML parser processes markup and builds the DOM.
3. CSS resources are processed to calculate styles.
4. The browser performs layout and paints visible content.
5. 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;

For untrusted text, prefer textContent instead of interpreting it as HTML. If rich HTML is required, use an appropriate sanitizer and security controls.

8. Separation of Responsibilities

• HTML: structure and meaning.
• CSS: presentation and layout.
• JavaScript: behavior, state and dynamic updates.

This is a useful guideline rather than an absolute rule. HTML can include style and script elements, but separating concerns usually improves maintainability.

Common Mistakes

• Confusing the HTML source with the current DOM.
• Running JavaScript before required elements exist.
• Assuming every DOM change forces a full page redraw.
• Using unsafe HTML insertion for user-generated content.
• Optimizing without measuring real performance.

Practice Exercises

1. Use JavaScript to change an h1 through the DOM.
2. Create a list of course names dynamically.
3. Explain the difference between HTML and the DOM.
4. Describe the simplified path from HTML parsing to page rendering.

Revision Quiz

1. What does DOM stand for?
2. What does the DOM represent?
3. Which browser representation contains parsed CSS rules and style information?
4. Which property updates an element's text safely?
5. Does every DOM update force a full page redraw?
6. Which language primarily defines page structure?

Answer Key and Explanations

1. Document Object Model — It is the programming interface for the document.
2. A tree of document objects — JavaScript can query and modify these objects.
3. CSSOM — It represents CSS rules and related style information.
4. textContent — It sets text rather than interpreting the value as HTML.
5. No. The browser performs only the rendering work required by the change.
6. HTML — It describes document structure and meaning.