核心職責 1. 性能瓶頸診斷與調優 - 深入分析前端在 Canvas 渲染、圖片加載、交互響應等環節的性能瓶頸； - 運用 DevTools、Performance API、FPS Profiler 等工具進行定量評估； - 制定性能優化策略，持續提升頁面流暢度、資源利用率與響應速度。 2. 并發渲染架構設計與實現 - 使用 Web Worker + OffscreenCanvas 技術構建異步渲染體系，實現渲染主線程剝離； - 設計前端任務線程池（Worker Pool），調度圖片處理、壓縮、繪制等高消耗任務； - 對海量圖片進行批次化、懶加載、并行加載策略的工程落地。 3. 圖像加載與繪制優化 - 負責圖像資源的解碼、轉換（WebP/AVIF）、壓縮、緩存、生命周期管理； - 實現離屏渲染、圖層合成、diff 繪制等機制，降低重繪與內存壓力； - 優化圖像縮放、透明度調整、疊圖對比等高頻交互的流暢性。 4. 可維護性與可擴展性設計 - 抽象圖像渲染引擎模塊，規范接口、渲染上下文、狀態管理方式； - 與產品、后端、算法團隊協同，制定數據接口標準與圖像加載協議； - 沉淀高性能組件庫，服務多個圖像渲染類業務需求。 5. 性能監控與自動化測試 - 搭建前端性能監控系統，采集 FPS、CPU 占用、內存波動、丟幀率等核心指標； - 引入 Lighthouse、Web Vitals、Sentry 等工具監控線上表現。 任職要求 1. Vue 技術棧深入理解 - 熟悉 Vue3、Composition API、虛擬 DOM 與響應式原理； - 能從源碼層面理解組件更新機制，掌握 diff 算法優化思路。 2. HTML5 Canvas 專業級掌握 - 精通 Canvas 2D API、圖層管理、坐標變換、圖像復用與離屏緩存技術； - 對瀏覽器渲染機制（合成層、柵格化、繪制隊列）有深入理解。 3. 異步架構構建能力 - 掌握 Web Worker、SharedWorker、OffscreenCanvas 實踐方案； - 熟悉結構化克隆算法、Transferable 對象、Worker 與主線程通信協議； - 有構建線程池（任務隊列 + Worker 回收復用）系統經驗。 4. 圖像處理與資源優化意識 - 熟悉圖像體積優化、懶加載、批處理、base64 與 blob 數據傳輸； - 了解 GPU 紋理上傳、合成開銷、設備內存占用限制； - 了解圖像格式（JPG/PNG/WebP/AVIF）壓縮策略及瀏覽器解碼效率。 5. 性能調優實戰經驗 - 曾主導過中大型圖像處理或高頻交互系統的性能重構； - 能獨立完成卡頓問題定位、資源回收邏輯設計、耗時操作異步拆分； - 能評估優化前后指標提升，推動實際用戶體驗改進。 6. 系統化的前端工程意識 - 對前端架構模式（MVC、MVVM、微前端等）有清晰認知； - 熟悉模塊化、可組合化的組件設計思維； - 有良好的代碼可讀性、測試覆蓋、復用抽象能力。 加分項 有 WebGL、Three.js、Fabric.js、Pixi.js 等圖形庫經驗； 有瀏覽器圖像編輯器、對比工具、圖層系統開發經驗； 有使用 WebAssembly（WASM）進行圖像處理加速經驗； 有離屏渲染、多圖層合成、紋理緩存等 WebGL 圖形優化經驗； 有曾參與或主導大型圖像渲染類 SaaS/可視化系統/編輯器項目；