前端工程化命题，覆盖性能/架构/交互

这里整理了五条前端开发命题。这些题目不谈虚的，不追求花哨的视觉效果，而是直击前端工程中的痛点：长列表渲染、复杂状态同步、离线优先、构建优化以及无障碍访问。它们适合用来检验开发者是否具备处理真实业务场景的能力，而不仅仅是会写页面。

1. Virtualized Data Grid with Complex Sorting

Build a high-performance data grid that renders 100,000 rows of mock user data. The core requirement is windowing/virtualization: only render the DOM nodes currently visible in the viewport. Implement column sorting (string, number, date) and filtering that updates the view instantly without blocking the main thread for more than 16ms. Use Web Workers for heavy sorting logic if necessary. The grid must support resizable columns and sticky headers. Do not use any third-party grid libraries (like AG Grid or TanStack Table); implement the virtualization logic from scratch using React hooks or vanilla JS. Measure performance using Chrome DevTools Performance tab; ensure no layout thrashing during scroll.

2. Optimistic UI Todo List with Conflict Resolution

Create a task management app that demonstrates Optimistic UI patterns. When a user adds, edits, or deletes a task, update the UI immediately before the API response returns. Simulate network latency (random 500-2000ms delay) and occasional random failures (10% chance). If the API fails, revert the UI change and show a non-intrusive error toast with a "Retry" button. Handle race conditions: if a user edits a task twice quickly, ensure the final state matches the last intended action, not necessarily the last received response. Use Redux Toolkit or Zustand for state management to track pending states separately from confirmed states.

3. Offline-First Note Taking App with Service Workers

Develop a note-taking application that works fully offline. Use Service Workers to cache the application shell and sync data when the connection is restored. Store notes in IndexedDB using a wrapper like idb or Dexie.js. Implement a background sync mechanism: if a user creates a note while offline, queue the request and send it to the server once online. Handle conflicts: if the same note was edited on another device while offline, prompt the user to choose which version to keep. The app must load instantly on subsequent visits, even without a network connection. Provide a visual indicator showing online/offline status and sync progress.

4. Custom Build Pipeline for Legacy Browser Support

Set up a modern frontend project (using Vite or Webpack) that targets both modern browsers (Chrome 100+) and legacy browsers (IE11). Configure the build pipeline to automatically generate two bundles: one modern bundle with ES6+ features and tree-shaking, and one legacy bundle transpiled to ES5 with polyfills. Use the module/nomodule pattern to serve the correct bundle to the correct browser. Implement code splitting so that polyfills are only loaded for legacy browsers. Measure the bundle size difference and document the configuration steps. The goal is to minimize the payload for modern users while maintaining compatibility for legacy ones without maintaining two separate codebases.

5. Accessible Modal Dialog with Focus Trapping

Implement a reusable Modal component that strictly adheres to WAI-ARIA Authoring Practices. When the modal opens, focus must move to the first interactive element inside it. Tabbing through elements must trap focus within the modal; pressing Tab on the last element should loop back to the first, and Shift+Tab on the first should loop to the last. Pressing Escape must close the modal and restore focus to the element that triggered it. Ensure screen readers announce the modal title and content upon opening. Disable scrolling on the body element when the modal is open. Test with NVDA or VoiceOver to verify accessibility. No external accessibility libraries allowed; implement all logic natively.

这五个命题涵盖了前端开发的几个核心硬技能：大数据量下的渲染性能、网络不稳定时的用户体验、离线存储与同步、构建工具的深度定制以及无障碍访问的合规性。能扎实完成这些任务，说明开发者已经脱离了“切图仔”的阶段，具备了独立解决复杂工程问题的能力。