Browser & DOM

The DOM (Document Object Model) is a programming interface for HTML documents. It represents the page as a tree of nodes/objects that JavaScript can manipulate.

The DOM is not the HTML source code—it's the live, parsed representation that can be modified.

• window: The global object representing the browser window. Contains document, location, history, localStorage, timers, etc.
• document: Represents the DOM. It's a property of window and provides methods to access/manipulate HTML elements.

• NodeList: Can contain any node type. querySelectorAll returns a static NodeList (doesn't update).
• HTMLCollection: Contains only elements. getElementsByClassName returns a live collection (auto-updates).

A lightweight container for DOM nodes that exists only in memory. When you append it to the DOM, only its children are inserted (the fragment itself disappears).

Benefit: Minimizes reflows when adding many elements.

Events propagate through the DOM in three phases:

1. Capturing (Capture Phase): From window down to the target.
2. Target Phase: Event reaches the target element.
3. Bubbling Phase: From target back up to window.

Attaching a single event listener to a parent instead of multiple listeners on children. Uses bubbling to catch events from descendants.

Benefits: Better performance, works with dynamically added elements.

• e.target: The element that triggered the event (where the click actually happened).
• e.currentTarget: The element the listener is attached to.

• e.stopPropagation(): Stops the event from bubbling up (or capturing down).
• e.preventDefault(): Prevents the browser's default action (e.g., form submit, link navigation).

Stops propagation AND prevents other listeners on the same element from firing.

Telling the browser that the listener will NOT call preventDefault(), allowing optimizations (especially for scroll/touch events).

Benefit: Smoother scrolling because browser doesn't wait to see if you'll prevent default.

A security mechanism that restricts how scripts from one origin can interact with resources from another origin.

Same origin = Same protocol + domain + port

Cross-Origin Resource Sharing allows servers to specify which origins can access their resources.

The server sends headers like:

Preflight request: For "non-simple" requests (e.g., with custom headers), the browser first sends an OPTIONS request to check permissions.

Modern way to make HTTP requests (replaces XMLHttpRequest).

Note:fetch only rejects on network errors, not HTTP errors (4xx/5xx). Check response.ok.

Allows manipulation of the browser's session history (back/forward navigation).

Used by SPAs for client-side routing without page reloads.

Asynchronously observes when elements enter or exit the viewport (or another element).

Use cases: Lazy loading images, infinite scroll, analytics tracking.

Watches for changes to the DOM tree.

Use cases: Detecting dynamic content changes, polyfilling features.

Observes changes to an element's size.

Use case: Responsive components that need to know their own dimensions.

The sequence of steps to render a page:

1. Parse HTML → Build DOM tree
2. Parse CSS → Build CSSOM tree
3. Combine → Render tree (visible elements only)
4. Layout → Calculate positions/sizes
5. Paint → Draw pixels
6. Composite → Layer composition (GPU)

Blocking resources (CSS, sync JS) delay this process.

• Reflow (Layout): Recalculates element positions/sizes. Expensive. Triggered by changing dimensions, adding elements, resizing window.
• Repaint: Redraws pixels without layout change. Cheaper. Triggered by color, visibility, background changes.

Repeatedly reading and writing to the DOM in a way that forces synchronous layout recalculations.

Schedules a function to run before the next repaint (~60fps). The correct way to do smooth animations.

Benefits: Syncs with display refresh rate, pauses when tab is hidden.

An encapsulated DOM tree attached to an element. Styles and scripts don't leak in or out.

Use cases: Web Components, style isolation, third-party widgets.

• DOMContentLoaded: Fires when HTML is parsed and DOM is ready (before images/stylesheets finish loading).
• load: Fires when the entire page (including all resources) has loaded.

Use DOMContentLoaded for DOM manipulation; load for image dimensions.

Schedules low-priority work to run during browser idle periods.

Use cases: Analytics, prefetching, non-critical updates.

Note: Not supported in Safari; use setTimeout as fallback.