Frontend Interview Questions 2024 (Part 3)

Summary

In this interview-style video, senior frontend engineers discuss key topics such as critical CSS, ARIA attributes, defer and async script attributes, dynamic vs static imports in ES6, cumulative layout shifts (CLS), and state management. They explain how critical CSS improves web performance, how ARIA enhances accessibility, and the benefits of deferring non-essential JavaScript to speed up page load times. They also dive into dynamic imports for lazy-loading and code-splitting, while providing strategies for managing essential and derived state in web applications. This video is a practical guide for frontend engineers looking to improve their skills and optimize web performance.

Takeaways

• 😀 **Critical CSS** refers to the CSS needed to render above-the-fold content, which is essential for improving page load times.
• 😀 To **extract Critical CSS**, use bundlers like Webpack with plugins that simulate rendering in a headless browser and identify the necessary styles for specific viewport widths.
• 😀 **ARIA attributes** are used in non-semantic HTML elements (like `div` or `span`) to enhance accessibility, especially when semantic HTML cannot be used due to design constraints.
• 😀 The **`defer`** attribute in HTML ensures scripts are loaded in the background and executed only after the HTML parsing is complete, while **`async`** loads and executes scripts as soon as possible, without waiting for HTML rendering.
• 😀 Using **`defer` and `async` attributes** helps prevent JavaScript from blocking the critical rendering path and improves page load performance.
• 😀 **Dynamic imports** in ES6 allow for lazy loading of modules at runtime, enabling better performance by loading code only when needed, unlike static imports that are evaluated at build time.
• 😀 **Dynamic imports** are ideal for loading components based on user actions (e.g., loading a library like Lodash when a user clicks a button), which helps improve the initial load speed.
• 😀 **Cumulative Layout Shift (CLS)** is a Core Web Vital metric that measures unexpected layout shifts during page load, which negatively impacts user experience.
• 😀 To **reduce CLS**, identify the problematic elements using debugging tools like Chrome Performance Insights, and implement fixes like defining fixed dimensions for images or optimizing font loading.
• 😀 **Essential state** in frontend apps refers to data that changes independently (e.g., user input or fetched data), whereas **derived state** is computed based on other state values (e.g., total price based on cart items).

Q & A

What is Critical CSS, and why is it important for web performance?

Critical CSS refers to the styles required to render the above-the-fold content of a webpage—elements visible before scrolling. It's important for web performance because it helps prioritize loading only the essential styles, reducing render-blocking CSS and improving the page's load time.

How can Critical CSS be extracted in a web application?

Critical CSS can be extracted using tools like Webpack plugins, which render the application with a headless browser, simulating a specific viewport width. This allows identifying the CSS needed for rendering above-the-fold content. CSS coverage tools in the browser can help pinpoint the exact styles required.

What are ARIA attributes in HTML, and when should they be used?

ARIA (Accessible Rich Internet Applications) attributes are used to enhance the accessibility of non-semantic HTML elements (like `<div>` or `<span>`). They should be used when semantic HTML cannot be applied due to design constraints or when building specific widgets that need to be accessible.

What is the difference between `defer` and `async` attributes in a `<script>` tag?

`defer` downloads a script in parallel with HTML parsing but waits to execute it until after the HTML is fully parsed. `async` downloads and executes the script as soon as it is ready, without waiting for the HTML to finish parsing. Both attributes help improve page load performance by preventing render-blocking.

Why should we use `defer` and `async` attributes for scripts?

Using `defer` and `async` helps improve web performance by preventing scripts from blocking the critical rendering path. This allows the browser to prioritize rendering HTML and CSS before executing JavaScript, reducing the time it takes for the page to become interactive.

What is the key difference between static imports and dynamic imports in ES6?

Static imports are resolved at build time and allow for optimizations like tree shaking and type inference. Dynamic imports, on the other hand, are resolved at runtime and enable lazy loading of modules, which can reduce the initial load time by only loading code when needed (e.g., triggered by user actions).

How do dynamic imports enhance performance in web applications?

Dynamic imports enhance performance by enabling lazy loading, meaning that non-essential code is only loaded when needed, such as in response to user actions. This reduces the initial payload size and helps speed up page load times.

What is Cumulative Layout Shift (CLS), and why is it a critical web performance metric?

Cumulative Layout Shift (CLS) measures the unexpected visual shifts in a webpage as it loads. A high CLS indicates poor user experience, as elements may shift around unpredictably, leading to accidental clicks or frustration. Minimizing CLS is crucial for maintaining visual stability and ensuring a smooth user experience.

How can you fix issues causing high CLS in a webpage?

To fix CLS issues, you should first identify the elements causing shifts using tools like Chrome's Performance Insights. Solutions include setting fixed dimensions for images, optimizing font loading, and implementing critical CSS to ensure the page layout is stable as content loads.

What is the difference between essential state and derived state in a frontend application?

Essential state is the data that changes independently, often tied to user interactions or network requests (e.g., items in a shopping cart). Derived state is computed based on essential state (e.g., total price, number of items) and does not change independently; it depends on other state variables.