1. “評估需求、排期”的工作流程？
“我的工作流程一般是這樣的：
- 需求評審： 首先會和產品、后端同學一起過需求，確保我完全理解了業務背景和要實現的價值，而不僅僅是功能點。
- 技術方案設計： 之后，我會進行技術方案的初步設計，評估實現的可行性和技術難點，比如是否需要新技術、是否存在兼容性風險、是否需要后端配合接口設計等。
- 工時評估： 基于技術方案，我會將需求拆解成一個個具體的開發任務點，并為每個任務評估一個保守且合理的工時。評估時會留出20%左右的Buffer時間用于應對意外情況（如聯調阻塞、bug修復）。
- 排期同步： 將評估結果和排期與產品、測試同步，達成一致后，就進入開發。
2.頁面錯誤是如何處理，比如頁面白屏頁面報錯你是如何第一時間知道的
讓反饋人一次性給齊:機型/系統、網絡(4G/Wi-Fi/公司代理)、登錄態、頁面路徑+操作步驟、發生時間(方便對日志對點)。
同步兩件事:
a.本地調試環境復現(開發者工具 →詳情→ 真機調試);
b.臨時開啟線上埋點(onError、接口耗時、首屏超時點)
定位問題的關鍵方法
1本地復現
在本地調試環境復現問題，檢查控制臺是否有錯誤日志。
使用瀏覽器開發工具(DevTools)的 Network面板檢查資源加載是否成功。
2 線上日志分析
分析監控平臺或后端日志，定位問題發生的頻率、用戶環境和錯誤堆棧，
3 用戶環境驗證
檢查用戶瀏覽器、操作系統版本、網絡環境等因素。
4 斷點調試
- 5.常見坑位速查表
- 分包路徑大小寫、頁面相對路徑寫錯。
- 合法域名漏配子域，開發可用，線上全白。
- 全屏cover-view /oading 遮罩未移除。
- 圖片原圖過大(超大長圖、base64)，低端機染崩。
3.vue2和vue3的區別
Vue2是使用object.defineproperty來做的，
在頁面剛開始加載時，Vue會遍歷data中的所有屬性，
然后使用object.defineproerty把這些屬性全部轉為getter/setter，
當用戶訪問或修改某個屬性時會觸發對應的getter/setter方法，然后會通知每個組件實例對應的watch方法，
最后實現視圖的更新。defineproperty的缺點：
1.對于復雜對象需要深度監聽，一次性監聽到底，它的計算量是非常大的，性能也是不太好的
2.對于新增、刪除操作是無法監聽的，需要使用到Vue.set和Vue.set和Vue.set和Vue.delete來作為輔助
3.需要重寫數組的原生方法來實現數組的監聽所以Vue3使用proxy代替Vue2的defineproperty。
proxy的優勢：
1.它可以監聽整個對象，而不需要遍歷監聽屬性，性能會有所提升
2.它可以直接監聽數組的變化，而不需要重寫數組的原生方法，它的便利性會增加很多
3.它有多達13種攔截方法，所以它的功能會更強大
4.proxy作為一個新標準，它會收到瀏覽器廠商持續的性能優化，也就是它會享受到傳說中的新標準的性能紅利。解題思路：
1.Vue2是怎么做的？
2.Vue2這種方法有什么問題?
3.Vue3是怎么做的？
4.Vue3又是怎么解決Vue2的這些問題？
4.閉包的優缺點，什么場景下用到
閉包是什么：JS中內層函數可以訪問外層函數的變量，外層函數無法操作內存函數的變量的特性。我們把這個特性稱作閉包。
閉包的好處：
- 隔離作用域，保護私有變量；有了閉包才有局部變量，要不然都是全局變量了。
- 讓我們可以使用回調，操作其他函數內部；
- 變量長期駐扎在內存中，不會被內存回收機制回收，即延長變量的生命周期；
閉包的弊端：內層函數引用外層函數變量，內層函數占用內存。如果不釋放內存，過多時，易引起內存泄露。
解決辦法：無法自動銷戶，就及時手動回收，使用后將函數的引用賦null。
5.js的數據類型
string number null undefined boolean object bigInt symbol
6.檢測 JavaScript 數據類型時，typeof和 instanceof 有什么區別?
typeof 和 instanceof都是用來檢測JavaScript 數據類型的，但兩者用途和適用場景不同:
6.1.typeof
·用于檢測基本數據類型
typeof'abc'//'string
typeof 123// 'number
typeof true//'boolean'
typeof undefined //'undefined'
typeof symbol()//'symbol'
typeof BigInt(1)//'bigint'
·局限性:
typeof null //'object'(特殊情況)
.typeof {} // 'object
typeof [] // 'object
typeof function(){} //"function'
6.2.二、instanceof
·判斷對象是否屬于某個構造函數的實例:
[] instanceof Array // true
{}instanceof object // true
new Date()instanceof Date // true
·局限性:
'abc'instanceof string // false，基礎類型返回false
iframeArray instanceof Array //false，不同全局對象
- 僅適用于引用類型(對象)，不適用于基本類型:
- 跨iframe等不同上下文時，可能失效:
推薦實踐:
基礎類型優先用 typeof
對象類型優先用 instanceof或0bject.prototype.toString.call()。
例如:
Object.prototype.tostring.call([])//[object Array]Object.prototype.tostring.call(null)//[object Null]
7.性能優化
7.1.一、頁面渲染性能優化
1.虛擬列表與長列表優化
使用 vue-virtual-scroller 實現長列表虛擬滾動，只渲染可視區域的 DOM 節點
避免一次性渲染數百或上千條數據導致卡頓
優化后頁面滾動流暢度提升明顯，卡頓問題基本消除。
2.組件懶加載與路由懶加載。
利用 Vue 異步組件和import()實現按需加載頁面和組件。
首屏體積減小約 30%，首屏加載速度提升 1~2 秒。
3.合理使用 v-show替代 v-if
減少頻繁銷毀重建組件，提升視圖切換性能。
7.2.二、網絡請求與接口性能優化
1.接口合井與請求緩存。
合并多接口為一個批量接口，減少請求數量;
對部分靜態數據實現本地緩存(如用戶權限、字典表)，免重復請求。
2.防抖和節流
對搜索框輸入、窗口 resize 等高頻操作加防抖/節流;
顯著降低請求頻率，減輕后端壓力。
7.3.三、構建與打包優化
1.按需引入和 Tree shaking。
替換全量導入組件庫為按需加載(如 Element Plus):
啟用生產環境 Tree Shaking，有效減少無用代碼。
2.CDN 外鏈和 externals 配置
將 Vue、ECharts 等大依賴通過 CDN 引入，減小打包體積
Bundle 體積縮小約 40%。
3.代碼分割與緩存策略
配置 SplitChunks 拆分公共代碼和第三方庫;
使用 contenthash 保證緩存命中，提升用戶二次訪問速度。
8.請解釋一下什么是模塊化開發?
解答:模塊化開發是一種組織代碼的方法，它將應用程序分解成獨立的、可復用的模塊。每個模塊負責實現特定的功能，并通過導出和導入API與其他,口模塊通信。模塊化開發有助于代碼的組織、維護和重用，同時也促進了團隊協作。
9.ES6 你使用過哪些語法特性?簡單介紹一下
1.塊級作用域:let 和 const
- 替代 var，解決變量提升和作用域污染問題;
- const 用于定義常量不可重新賦值，
- 實際項目中我默認用const需要修改時才用 let
2.箭頭函數
- 簡化函數寫法;
- 自動綁定 this，常用于事件回調、數組操作等;
3.解構賦值
- 更方便地從對象或數組中提取變量;
配合函數參數結構體使用頻率很高，
4.模板字符串
- 支持變量插入和多行字符串，避免字符串拼接混亂;
5.模塊化:import/export
- 實現 ES 模塊機制;
6.Promise 異步編程
- 提供更優雅的異步寫法，避免回調地獄;
我通常在封裝請求或并發控制時使用。
7.展開運算符/剩余參數(…)
- 對象/數組拷貝、合并、函數參數處理都非常方便:
10.JS性能優化
| 層面 | 關鍵優化點 |
|---|---|
| 編碼 | 減少查找、優化循環、事件委托、防抖節流 |
| DOM | 批量操作、使用 DocumentFragment、避免布局抖動 |
| 內存 | 解除引用、避免泄漏、使用 WeakMap |
| 網絡 | 壓縮、代碼分割、Tree Shaking、利用緩存 |
| 加載 | 使用 async/defer 屬性 |
| API | Web Workers, rAF, Intersection Observer |
