HTML · HARD CODEX

HTML Interview Questions — Hard

Q: What is the Critical Rendering Path (CRP), and how does the structure of HTML impact it?

- Definition: The sequence of steps the browser takes to convert HTML, CSS, and JS into pixels on the screen: DOM - CSSOM - Render Tree - Layout - Paint - Composite. - HTML Impact: - The DOM is constr

Q: Detail the lifecycle phases of a custom Web Component.

- constructor(): Instantiated. Used for initializing state, templates, and shadow DOM. No DOM manipulations or attribute reading should happen here. - connectedCallback(): Invoked when the element is

Q: Explain the relationship between HTML accessibility trees, DOM trees, and ARIA Live Regions.

- A11y Tree: A subset of the DOM tree constructed by browsers containing elements, states, roles, and properties parsed specifically for assistive technologies (screen readers). - Aria Live Regions: C

Q: Detail how iframes are secured using `sandbox` and `allow` attributes.

- sandbox: Restricts capabilities of the iframe. By default, <iframe sandbox enforces maximum security (blocks scripts, forms, popups, same-origin storage). Specific clearances are declared explicitly

Q: How do HTML5 Server-Sent Events (SSE) via the `EventSource` API work, and how do they compare to WebSockets?

- SSE: Establishing a persistent, unidirectional HTTP connection from server to client using the standard EventSource API. Server streams text/event-stream content. - Comparison: - Direction: SSE is u

Deep runtime internals, memory models, distributed design, concurrency failure modes, and architectural decisions.

50 Theory Questions5 Free Model Answers

THEORY QUESTIONS & SOLUTIONSShowing 5 of 50 questions

Q1What is the Critical Rendering Path (CRP), and how does the structure of HTML impact it?

Definition: The sequence of steps the browser takes to convert HTML, CSS, and JS into pixels on the screen: DOM -> CSSOM -> Render Tree -> Layout -> Paint -> Composite.
HTML Impact:
- The DOM is constructed incrementally. The browser can parse and build the DOM node-by-node.
- CSS is render-blocking. If <link> tags are placed at the bottom, rendering is delayed or causes Flash of Unstyled Content (FOUC).
- Scripts are parser-blocking. A standard <script> halts HTML tokenization immediately to fetch and execute, delaying DOM completion.

Q2Detail the lifecycle phases of a custom Web Component.

constructor(): Instantiated. Used for initializing state, templates, and shadow DOM. No DOM manipulations or attribute reading should happen here.
connectedCallback(): Invoked when the element is appended to the document DOM. Used for setups, listeners, and rendering.
disconnectedCallback(): Invoked when the element is removed from the DOM. Used for cleanups (removing event listeners, intervals).
attributeChangedCallback(name, oldVal, newVal): Invoked when an observed attribute is added, removed, or updated. Requires declaring observed properties in static get observedAttributes().
adoptedCallback(): Invoked when the element is moved to a new document (e.g., inside an iframe).

Q3Explain the relationship between HTML accessibility trees, DOM trees, and ARIA Live Regions.

A11y Tree: A subset of the DOM tree constructed by browsers containing elements, states, roles, and properties parsed specifically for assistive technologies (screen readers).
Aria Live Regions: Configured via aria-live. Instructs screen readers to announce dynamic content changes immediately without requiring manual user focus.
- aria-live="polite": Screen reader waits until current announcement/action is completed before speaking changes.
- aria-live="assertive": Interrupts any active speech immediately to announce changes.

Q4Detail how iframes are secured using `sandbox` and `allow` attributes.

sandbox: Restricts capabilities of the iframe. By default, <iframe sandbox> enforces maximum security (blocks scripts, forms, popups, same-origin storage). Specific clearances are declared explicitly (e.g., sandbox="allow-scripts allow-forms").
allow (Feature Policy): Restricts hardware/browser features inside the iframe (e.g., allow="camera; microphone; geolocation").

Q5How do HTML5 Server-Sent Events (SSE) via the `EventSource` API work, and how do they compare to WebSockets?

SSE: Establishing a persistent, unidirectional HTTP connection from server to client using the standard EventSource API. Server streams text/event-stream content.
Comparison:
- Direction: SSE is unidirectional (server -> client); WebSockets are bidirectional (client <-> server).
- Protocol: SSE uses standard HTTP; WebSockets require a custom TCP protocol handshake (ws:// / wss://).
- Reconnection: SSE features automatic reconnection built-in; WebSockets require custom JavaScript retry logic.

Unlock the remaining 45 HTML (Hard) questions

You've completed the 5 free sample questions. Get unrestricted lifetime access to every question, model answer, implementation challenge, and all 27+ technologies for a single payment.

Unlock Everything — Already Enrolled? Sign In

One-time settlement () · Lifetime access · Zero subscription

CROSS-DIFFICULTY NAVIGATION

Continue Preparing HTML

EASY LEVEL

Foundations & Core Concepts

MEDIUM LEVEL

Mechanisms & Practical Patterns