結合你的簡歷內容和技術面試問題，以下是一個結構化的回答建議，突出你的技術深度和項目經驗：
2. 項目與實習經歷
得物低代碼落地頁編輯器（核心項目）
- 背景：解決軟廣落地頁開發周期長、迭代慢問題。
- 技術方案：
- B端：基于Iframe + Valtio狀態管理 + Next.js SSR，實現實時預覽（消除手動刷新）。
- C端：Next.js混合渲染 + 背景圖預加載 + 組件懶加載 + 降級策略，首屏秒開率從15%→65%。
- 工程化：Monorepo + Turborepo + Git流程管理，保障迭代效率。
- 成果：支持拖拽編排與動態表單配置，統一集成異構模型（.dll/.exe/.py）。
智能博客AI平臺（字節青訓營）
- 痛點：解決博客平臺AI多模態缺失（如圖片/文檔解析）。
- 方案：
- 后端集成Coze Agent服務，SSE流式返回結果。
- 前端封裝對話框組件，支持多模態輸入（文本/圖片/PDF）及智能輸出（Markdown/Mermaid）。
- 優化：OAuth2鑒權 + ESWrapper解耦SSE邏輯，提升復用率。
個人網站（技術亮點）
- WebGL動態粒子背景 + ECharts可視化 + 地圖軌跡API。
- 自研設備監聽Hooks實現跨端響應式，部署前端監控與安全策略。
3. 代碼考察
（1）this指向問題
function Person() {this.name = "Liu";setTimeout(function() {console.log(this.name); // 輸出undefined（非嚴格模式為window）}, 1000);
}
new Person();
👉 修正：改用箭頭函數（繼承外層this）或bind。
（2）Promise透傳陷阱
Promise.resolve(1).then(() => {}) // 未傳參 ? 值透傳到下一層.then(value => console.log(value)); // 輸出1
（3）Async/Await優化嵌套
// 優化前
fetchData().then(res => process(res)).then(...);// 優化后
async function handleData() {const res = await fetchData();const processed = await process(res);return processed;
}
（4）對象扁平化
const flatten = obj => Object.entries(obj).flatMap(([k, v]) => typeof v === 'object' ? flatten(v).map(([subK, val]) => [`${k}.${subK}`, val]) : [[k, v]]);
（5）手寫Promise.all
Promise.all = function(promises) {return new Promise((resolve, reject) => {let count = 0;const results = [];promises.forEach((p, i) => {Promise.resolve(p).then(res => {results[i] = res;if (++count === promises.length) resolve(results);}, reject); // 任一失敗立即reject});});
};
4. 八股環節
（1）useState同步/異步？
- 批處理更新：React 18默認自動批處理，異步更新狀態（避免頻繁渲染）。
- 同步場景：在
setTimeout或原生事件中，setState同步執行（脫離React調度機制）。
（2）Hooks條件/循環限制
- 禁止條件語句包裹：Hooks調用順序依賴Fiber鏈表結構，條件破壞順序會導致狀態錯位（React依賴調用順序標識Hook）。
- 循環問題：循環中調用Hook會破壞調用次數一致性（需確保每次渲染Hook數量不變）。
（3）Webpack熱更新速度差異
- 第二次更快：首次構建需完整編譯，熱更新（HMR）僅增量更新修改的模塊，通過內存緩存未修改的chunk。
- 緩存機制：
module.hot.accept監聽依賴變更，復用緩存模塊。
（4）Module/Chunk/Bundle區別
| 概念 | 說明 |
|---|---|
| Module | 源碼文件（如JS/CSS模塊），Webpack以依賴圖組織。 |
| Chunk | 編譯中間產物，由入口文件或動態導入（import()）分割的代碼塊。 |
| Bundle | 最終輸出的文件（一個或多個Chunk合并生成），如main.js。 |
回答策略建議
- 突出簡歷亮點：性能優化（得物項目65%提升）、可視化（WebGL/ECharts）、工程化（Monorepo/Turborepo）。
- 結合項目答八股：如答
Promise.all時關聯得物“統一任務調度函數”的異構調用經驗；答Hooks限制時關聯React Fiber理解。 - 量化成果：獎項（ICA/超圖）、性能指標、落地效果（如AI平臺創作效率提升）。
面試官更關注“如何用技術解決業務問題”，回答時緊扣“問題→方案→結果”邏輯，展現工程化思維。
