Front-end Web Development Performance Optimization Syllabus

Performance Optimization syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for Performance Optimization in Front-end Web Development, not a summary of it.

1. 1

   Loading Optimization

   2 topics

   • Lazy Loading
   • Code Splitting
2. 2

   Rendering Optimization

   2 topics

   • Virtual DOM
   • Reconciliation

Performance Optimization flashcards for Front-end Web Development

23 of 50 cards from the Performance Optimization deck — real questions with worked answers.

1. What is lazy loading in front-end web development?

   Lazy loading is a performance optimization technique that defers the loading of non-critical resources (images, components, modules, scripts) until they are actually needed, rather than loading everything during the initial page load.

2. What is the primary performance benefit of lazy loading?

   It reduces the initial bundle size and initial load time, lowering Time to Interactive (TTI) and saving bandwidth, since resources are fetched on demand instead of all at once.

3. Which native HTML attribute enables lazy loading of images and iframes?

   The loading="lazy" attribute (e.g., <img src="..." loading="lazy">). Its other values are loading="eager" (load immediately) and loading="auto" (browser decides).

4. Which browser API is commonly used to implement custom lazy loading by detecting when an element enters the viewport?

   The Intersection Observer API, which asynchronously observes intersection of a target element with the viewport (or an ancestor), avoiding expensive scroll-event listeners.

5. In React, which function and component are used to lazy load a component?

   React.lazy() to dynamically import the component, wrapped in a <Suspense fallback={...}> boundary that shows a fallback (e.g., a spinner) while the component loads.

6. What JavaScript syntax triggers a dynamic import used for lazy loading modules?

   The dynamic import() expression, e.g., import('./module.js'), which returns a Promise that resolves to the module and creates a separate chunk.

7. What is 'above the fold' content and how does it relate to lazy loading?

   Above-the-fold content is what is visible in the viewport without scrolling. It should be loaded eagerly, while below-the-fold content is a prime candidate for lazy loading.

8. What is a potential downside of lazy loading content that affects user experience?

   It can introduce a loading delay or layout shift when content appears, and if not handled (e.g., with placeholders/skeletons or reserved space), it can hurt perceived performance and Cumulative Layout Shift (CLS).

9. What is code splitting?

   Code splitting is the practice of breaking a large JavaScript bundle into smaller chunks that can be loaded on demand or in parallel, so users only download the code they need for the current view.

10. What is the main difference between lazy loading and code splitting?

    Code splitting is the build-time technique of dividing code into separate chunks; lazy loading is the runtime strategy of deferring when those chunks (or other resources) are actually fetched. They are often used together.

11. Name two common strategies for code splitting in a single-page application.

    Route-based splitting (a chunk per route/page) and component-based splitting (splitting heavy or rarely-used components). Vendor splitting (separating third-party libraries) is another common strategy.

12. In Webpack, what does 'tree shaking' do and how does it complement code splitting?

    Tree shaking removes unused (dead) code from the bundle by relying on ES module static analysis. Combined with code splitting, it ensures each chunk contains only the code that is actually reachable and used.

13. What is a 'vendor chunk' in code splitting?

    A vendor chunk is a separate bundle containing third-party library code (e.g., React, lodash) that changes infrequently, allowing it to be cached long-term by the browser independently of frequently-changing app code.

14. How does code splitting improve caching efficiency?

    By isolating rarely-changing code (e.g., vendor libraries) into separate chunks with content-hashed filenames, only the chunks that actually change need to be re-downloaded, so unchanged chunks stay in the browser cache.

15. What is route-based code splitting?

    A strategy where the application is split so each route/page loads its own chunk only when the user navigates to it, keeping the initial load small.

16. What is the Virtual DOM?

    The Virtual DOM is an in-memory, lightweight JavaScript representation (a tree of plain objects) of the real DOM. The UI library keeps this virtual tree in sync with the actual DOM, computing minimal updates to apply.

17. Why is updating the Virtual DOM faster than directly updating the real DOM?

    Manipulating plain JavaScript objects is cheaper than manipulating real DOM nodes, which trigger layout reflows and repaints. The Virtual DOM batches and minimizes the costly real-DOM operations.

18. What are the three main steps of a Virtual DOM update cycle?

    1) Render a new virtual tree from updated state, 2) Diff the new virtual tree against the previous one to find changes, 3) Patch (commit) only the changed parts to the real DOM.

19. What is reconciliation in the context of the Virtual DOM?

    Reconciliation is the process by which a library (e.g., React) compares (diffs) the new Virtual DOM tree with the previous one and determines the minimal set of real-DOM mutations needed to bring the UI up to date.

20. What is the naive time complexity of comparing two arbitrary trees, and why does React avoid it?

    A general tree-diff algorithm is $O(n^{3})$ for $n$ nodes, which is too expensive for UI. React uses a heuristic diffing algorithm that runs in $O(n)$ by making simplifying assumptions.

21. What two key heuristic assumptions does React's reconciliation algorithm make to achieve $O(n)$ diffing?

    1) Two elements of different types produce different trees (so the old subtree is torn down and rebuilt), and 2) Developers can hint stable identity of children across renders using a key prop.

22. What happens during reconciliation when an element changes its type (e.g., <div> becomes <span>)?

    React tears down the entire old subtree (unmounting components and destroying their state) and builds the new subtree from scratch, rather than trying to match the children.

23. What is the purpose of the 'key' prop when rendering lists in React?

    The key gives each list item a stable identity across renders so reconciliation can match elements, reuse/move existing DOM nodes and component state, and avoid unnecessary re-creation or mis-association of items.

See more Performance Optimization flashcards →

Planning Performance Optimization for Front-end Web Development

Performance Optimization (Front-end Web Development) FAQ