Frameworks: hydration · SSR · SSG · ISR · virtual DOM · reconciliation · reactive
0 / 5 completed
1 / 5
In frontend development, which term describes the browser's internal tree-like representation of all HTML elements on a page?
The DOM (Document Object Model) is the browser's in-memory tree representation of HTML elements. JavaScript uses the DOM API to read and modify the page. Related terms: CSSOM (CSS Object Model — a separate tree for CSS rules); Shadow DOM (an encapsulated DOM subtree used in Web Components to isolate styles and markup); Virtual DOM (React's in-memory copy used to minimise re-renders via reconciliation). The viewport is simply the visible area of the browser window — not a DOM concept.
2 / 5
Complete the sentence using the correct frontend term: "To ensure the app is accessible, we added proper _____ attributes to all interactive elements so that screen readers can announce them correctly."
ARIA (Accessible Rich Internet Applications) attributes — such as aria-label, aria-expanded, aria-live — extend HTML semantics to help assistive technologies understand the purpose of custom UI components. data-* attributes are custom data attributes (not for accessibility). meta tags go in <head> and describe page metadata. rel describes the relationship in link/anchor elements. Knowing accessibility vocabulary is increasingly expected in frontend interviews across all levels.
3 / 5
In CSS, what is specificity?
Specificity is a numerical weight calculated from the selectors in a CSS rule. Higher specificity wins over lower specificity, regardless of source order. The hierarchy (highest to lowest): inline styles → ID selectors → class/pseudo-class/attribute selectors → element/pseudo-element selectors. !important overrides all specificity (use sparingly). Related terms: cascade (the algorithm combining specificity, source order, and origin to resolve conflicts); inheritance (properties that automatically pass from parent to child if not set).
4 / 5
What does hydration mean in the context of modern frontend frameworks (React, Vue, Svelte)?
Hydration is the process of attaching JavaScript (event listeners, component state) to server-rendered HTML, making the static markup interactive. Without hydration, SSR (Server-Side Rendering) produces a fast visual first paint but a non-interactive page. Hydration bridges the gap. Related: partial hydration (hydrate only the interactive parts); islands architecture (Astro's approach — ship zero JS for static components); resumability (Qwik's approach — skip replay of app startup entirely). Hydration performance is a key topic in modern frontend engineering discussions.
5 / 5
The term critical rendering path refers to:
The critical rendering path is the sequence: HTML parsing → DOM construction → CSS parsing → CSSOM construction → Render tree → Layout → Paint → Composite. Optimising the critical rendering path means reducing the time to First Contentful Paint (FCP). Key optimisations: defer/async non-critical JS (JS blocks HTML parsing by default); inline critical CSS; preload key resources. Related metrics: FCP (First Contentful Paint), LCP (Largest Contentful Paint), TTI (Time to Interactive), CLS (Cumulative Layout Shift) — all part of Core Web Vitals.