Browser & BOM

setTimeout(fn, ms) schedules fn to run once after roughly ms milliseconds; setInterval(fn, ms) runs it repeatedly every ms until stopped. Each returns a numeric timer id. Pass that id to clearTimeout(id) to cancel a pending timeout or clearInterval(id) to stop a repeating interval. The delay is a minimum, not a guarantee, since the callback waits for a free call stack.

window is the global object and the root of the page; document is its child, the DOM tree of the page's content. The BOM exposes browser-level objects off window: location reads and changes the current URL, history navigates the session stack via back()/forward(), and navigator reports browser and platform info like userAgent. The BOM is not formally standardized.

localStorage persists per origin until explicitly cleared, even across browser restarts. sessionStorage lives only for the current tab and is wiped when that tab closes. Cookies are per origin too but expire by a set date, are limited to ~4KB, and are sent with every HTTP request to the server. Both storages hold ~5MB of strings and stay client-side only.

expires (or max-age) sets the lifetime; without it the cookie is a session cookie. path scopes it to a URL prefix. HttpOnly hides it from JavaScript so document.cookie cannot read it, blunting XSS theft. Secure sends it only over HTTPS. SameSite (Strict/Lax/None) limits sending on cross-site requests. You delete a cookie by re-setting it with a past expires date and the matching path.

DOMContentLoaded fires once the HTML is parsed and the DOM is built, before images and stylesheets finish; load fires later, after every subresource has loaded. A plain <script> blocks parsing while it downloads and runs. defer downloads in parallel but runs after parsing, in document order, just before DOMContentLoaded. async also downloads in parallel but runs the instant it arrives, so order is not guaranteed and it may run before or after parsing.

setTimeout(fn, 0) does not run immediately — it queues fn as a macrotask after the current synchronous code (and the browser clamps to ~4ms when nested). Debounce delays a function until calls stop for a quiet period; throttle runs it at most once per interval. requestAnimationFrame schedules a callback right before the next repaint, syncing to the display refresh, which makes animations smoother than a fixed-delay setInterval.

Microtasks (Promise callbacks) drain after the current task but before rendering; macrotasks like setTimeout run later; requestAnimationFrame runs just before the next repaint, ideal for visual updates. Layout changes trigger reflow (recomputing geometry, expensive and cascading), while style-only changes trigger a cheaper repaint. Batch DOM reads/writes against thrashing, offload heavy CPU work to a Web Worker, and removeEventListener on detached nodes to avoid leaks.

location reflects the current URL: setting location.href (or location.assign) navigates and reloads, while location.replace does so without a history entry. history moves through the session stack with back()/forward()/go(), and pushState/replaceState change the URL without reloading. new URL(str) parses an address into parts, and URLSearchParams reads and edits the query string via get/set.

An origin is the triple of scheme, host, and port; two URLs share an origin only when all three match. The same-origin policy stops a page from reading responses or the DOM of another origin, blocking data theft. CORS lets a server opt in by sending Access-Control-Allow-Origin, relaxing the read restriction for fetches. A cross-origin iframe still renders, but the parent cannot touch its DOM and the two communicate only via postMessage.

A Web Worker runs a script on a separate background thread, so heavy work does not block the main UI thread. It has no shared memory with the page: you exchange data through postMessage, and each side reads it via an onmessage / message event. The worker has no access to the DOM, window, or document, so it cannot update the page directly — it sends results back for the main thread to render.

The security model isolates origins (scheme, host, port): the same-origin policy blocks cross-origin DOM and response reads, so untrusted content cannot steal data. Shadow DOM adds a second boundary inside one origin — its tree and styles are encapsulated, scoped away from the document. SPA routing uses the History API: pushState/replaceState change the URL and push entries without a reload, and a popstate handler re-renders views on back/forward, so navigation stays client-side.