Google Frontend Developer Interview Questions

"To optimize frontend performance and boost Core Web Vitals like LCP and FID, I prioritize code-splitting using Next.js dynamic imports to reduce the initial JS bundle size. I compress images using webp format, implement lazy loading for images below the fold, and leverage browser caching. Additionally, I minimize render-blocking resources by deferring non-critical scripts."

"In Next.js, Client-Side Rendering (CSR) fetches data and builds HTML dynamically in the browser, which is fast once loaded but poor for SEO. Server-Side Rendering (SSR) generates the complete HTML page on the server for each request, ensuring fresh data and great SEO. Static Site Generation (SSG) pre-builds all HTML pages at build time, yielding the fastest load times and excellent scalability for content that changes infrequently."

"React's Virtual DOM is a lightweight, in-memory copy of the actual DOM. When a component's state changes, React creates a new Virtual DOM tree and compares it with the previous one using a diffing algorithm called Reconciliation. It finds the minimal set of changes and updates only those nodes in the real DOM. Using unique 'key' attributes helps React identify which items changed, added, or removed, avoiding redundant renders."