Front End Development Technology & Digital Applications 5 — Questions and Answers
Question 1: What is the purpose of a Source Map file in front-end development?
- Mapping minified/compiled code back to the original source for debugging (Correct answer)
- Defining the file structure of a project for the bundler
- Listing all external APIs the application communicates with
- Specifying which files should be cached by the Service Worker
Correct answer: Mapping minified/compiled code back to the original source for debugging
Source maps link minified or transpiled production code back to the original source code, enabling meaningful stack traces and breakpoints in developer tools.
Question 2: Which feature of HTTP/2 most directly improves page load performance compared to HTTP/1.1?
- Multiplexing multiple requests over a single TCP connection simultaneously (Correct answer)
- Encrypting all traffic with TLS by default
- Compressing HTTP headers using the DEFLATE algorithm
- Supporting server push of resources before the client requests them
Correct answer: Multiplexing multiple requests over a single TCP connection simultaneously
HTTP/2 multiplexing allows multiple requests and responses to interleave on one connection, eliminating the head-of-line blocking problem of HTTP/1.1.
Question 3: What is 'hydration' in the context of server-side rendering (SSR) frameworks like Next.js?
- The process of attaching client-side JavaScript event handlers to server-rendered HTML (Correct answer)
- Fetching initial data from the server before rendering the component tree
- Converting JSX templates into static HTML on the server
- Caching rendered HTML pages on a CDN edge node
Correct answer: The process of attaching client-side JavaScript event handlers to server-rendered HTML
Hydration makes server-rendered static HTML interactive by having the client-side JavaScript framework attach event listeners and take over rendering.
Question 4: Which tool would a front-end developer use to analyze bundle size and identify which modules are contributing most to the total size?
- Bundle analyzer (e.g., webpack-bundle-analyzer or Vite Bundle Visualizer) (Correct answer)
- Lighthouse performance audit
- Browser Network panel waterfall
- ESLint static analysis report
Correct answer: Bundle analyzer (e.g., webpack-bundle-analyzer or Vite Bundle Visualizer)
Bundle analyzer tools generate interactive treemap visualizations showing the size contribution of every module in the final bundle.
Question 5: What is the primary purpose of a robots.txt file in a web application?
- Instructing web crawlers which pages or directories they should or should not crawl (Correct answer)
- Blocking bots from making API requests to the server
- Defining rate limits for automated HTTP clients
- Specifying CORS policies for third-party integrations
Correct answer: Instructing web crawlers which pages or directories they should or should not crawl
The robots.txt file signals to compliant web crawlers which areas of a site to skip, helping manage crawl budget and preventing indexing of private pages.
Question 6: In web performance auditing, what does the Lighthouse 'Total Blocking Time' (TBT) metric measure?
- The total time the main thread was blocked by long tasks, preventing user input response (Correct answer)
- The cumulative time spent downloading all render-blocking resources
- The duration between First Contentful Paint and Time to Interactive
- The time for third-party scripts to finish executing
Correct answer: The total time the main thread was blocked by long tasks, preventing user input response
TBT sums the blocking portions of all long tasks (>50ms) on the main thread between First Contentful Paint and Time to Interactive.
Question 7: What does the 'async' attribute on a <script> tag do differently than 'defer'?
- Downloads the script in parallel and executes it immediately when ready, potentially before HTML parsing completes (Correct answer)
- Delays script execution until the DOMContentLoaded event fires
- Executes the script in a separate Web Worker thread
- Loads the script only if the user's connection is fast enough
Correct answer: Downloads the script in parallel and executes it immediately when ready, potentially before HTML parsing completes
Unlike `defer`, `async` scripts execute as soon as they download, which can interrupt HTML parsing and does not guarantee execution order.
Front End Development Technology & Digital Applications 5
What is the purpose of a Source Map file in front-end development?