Web工程化命题，拒绝页面仔

这里整理了五条纯前端开发命题。这些题目不涉及游戏逻辑，也不依赖后端接口，完全聚焦于浏览器端的能力边界：复杂交互、性能优化、数据可视化、离线存储以及底层API的封装。它们考察的是开发者在没有框架“魔法”加持下，对DOM、事件循环、内存管理和浏览器兼容性的真实掌控力。别只会在React里写`useEffect`，我要看你能不能徒手搞定这些脏活累活。

1. High-Performance Virtual Data Grid Web Page

Build a single-page web application featuring a data grid component that handles 100,000+ rows without lagging. The core requirement is windowing (virtualization): only render the DOM nodes currently visible in the viewport. Implement column sorting, filtering, and resizable columns. The challenge is to ensure smooth scrolling (60 FPS) even when each row contains complex content (e.g., avatars, status badges). Do not use any third-party grid libraries (like AG Grid or TanStack Table). Use native JavaScript or a lightweight framework (Preact/Svelte) to minimize overhead. Implement a "sticky header" and "sticky first column" feature. Measure performance using Chrome DevTools; ensure no layout thrashing during scroll events. The page should include a control panel to toggle between virtualized and non-virtualized modes for comparison.

Tech Stack:
- Core: Vanilla JavaScript or Preact/Svelte (no heavy frameworks).
- Rendering: HTML5 DOM manipulation with `transform: translateY` for performance.
- State: Minimal local state management for sort/filter logic.
- Optimization: `requestAnimationFrame` for scroll handling; CSS `contain` property for isolation.

2. Offline-First Rich Text Editor Web App

Develop a single-page rich text editor web application that works fully offline and supports basic formatting (bold, italic, lists, links). Use the `contenteditable` API or a custom implementation based on `div` structures. Store documents in `IndexedDB` using a wrapper like `idb`. Implement a versioning system: every save creates a new version, allowing users to revert to previous states. The hard part: simulate a "sync conflict" scenario where two tabs edit the same document. Implement a simple merge strategy (e.g., last-write-wins or character-level diff) to resolve conflicts when both tabs come back online. No backend required; simulate the network state with a toggle switch in the UI. The interface should resemble a minimalist writing tool like Notion or Obsidian.

Tech Stack:
- Core: Vanilla JavaScript, Web Components (optional for encapsulation).
- Storage: IndexedDB (via `idb` or raw API) for large text storage.
- Algorithm: Diff-Match-Patch algorithm for text comparison and merging.
- UI: Custom toolbar with accessibility support (ARIA labels).

3. Interactive SVG Map Viewer Web Page

Create a single-page interactive map viewer web application using inline SVG. The map should represent a fictional city with districts, streets, and points of interest. Implement smooth zooming (mouse wheel) and panning (drag) using CSS transforms or SVG matrix transformations. Clicking on a district should highlight it and show a tooltip with details. The challenge is performance: the SVG may contain thousands of path elements. Optimize rendering by grouping elements and using `pointer-events` wisely. Implement a "search" feature that filters districts and animates the camera to focus on the result. Ensure the map is responsive and works on touch devices (pinch-to-zoom). No mapping libraries (like Leaflet or Mapbox) allowed. The page should include a sidebar for listing search results and district info.

Tech Stack:
- Core: Vanilla JavaScript, Inline SVG.
- Math: Matrix transformation logic for zoom/pan calculations.
- Interaction: Pointer Events API for unified mouse/touch handling.
- Animation: CSS Transitions or Web Animations API for smooth camera movements.

4. Browser-Based Image Editor Web Studio

Build a single-page image editor web studio that allows users to upload an image and apply real-time filters (grayscale, sepia, blur, brightness, contrast). The core requirement is to use WebGL for filter processing, not Canvas 2D API, to ensure high performance on large images. Write custom fragment shaders for each filter. Implement a histogram display that updates in real-time as filters are applied. Allow users to adjust filter intensity via sliders. Save the processed image as a PNG/JPEG. Handle CORS issues if loading images from external URLs (use proxy or base64). The UI should be clean and minimalist, resembling a professional photo editing tool like Lightroom, with a dark theme and dockable panels.

Tech Stack:
- Core: Vanilla JavaScript, WebGL (raw API, no Three.js/PixiJS).
- Shaders: GLSL for custom fragment shaders.
- Input: HTML File API for image upload.
- Output: Canvas `toDataURL` for saving images.

5. Accessible Modal Dialog System Demo Page

Implement a single-page demo web application showcasing a robust modal dialog system that strictly adheres to WAI-ARIA Authoring Practices. The page should feature multiple trigger buttons opening different types of modals (simple alert, form input, nested modal). When a 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. Pressing Escape must close the modal and restore focus to the trigger element. Support nested modals (stacking context). Ensure screen readers announce the modal title and content upon opening. Disable scrolling on the body element when the modal is open. Include a "Accessibility Report" section that runs automated checks on the current modal state. No external accessibility libraries allowed.

Tech Stack:
- Core: Vanilla JavaScript or Web Components.
- Testing: Jest/Vitest + Jest-DOM for accessibility assertions (can be run in browser console).
- Standards: WAI-ARIA roles (`dialog`, `alertdialog`), `aria-modal`, `aria-labelledby`.
- Styling: CSS for backdrop blur and transition animations.

这五个命题涵盖了大数据渲染、离线数据同步、矢量图形交互、GPU加速图像处理以及无障碍访问合规性。它们都是前端工程中容易被忽视但至关重要的领域。能独立完成这些任务，说明你不再只是一个UI绘制者，而是一个懂性能、懂标准、懂底层原理的真正前端工程师。