面試形式：線下面試：一面：30分鐘+二面：30分鐘

特殊要求：內(nèi)網(wǎng)開發(fā)+自研UI組件庫（無文檔介紹）+學(xué)習(xí)能力要求高

面試評價：題目靈活+應(yīng)用性較強

面試官：項目負(fù)責(zé)人+前端負(fù)責(zé)人

面試官的提問大綱：本公司招聘要求+本人簡歷

面試流程以及面試題：

一面（前端負(fù)責(zé)人）：

?

1、自我介紹？

? ?- 我叫xxxxxx，是一名前端開發(fā)工程師。畢業(yè)于某知名高校計算機專業(yè),有3年豐富的前端開發(fā)經(jīng)驗。

? ?- 熟練掌握HTML、CSS、JavaScript等前端技術(shù),對Vue.js、React等主流框架有深入了解和實踐經(jīng)驗。

? ?- 曾參與過多個大型Web項目的開發(fā)和維護工作,積累了豐富的項目經(jīng)驗。擅長前端性能優(yōu)化、組件化開發(fā)、狀態(tài)管理等。

? ?- 對前端技術(shù)有濃厚的興趣,熱愛學(xué)習(xí)和研究新技術(shù),能夠快速適應(yīng)新的項目環(huán)境。

?

2、項目介紹、難點、解決過程？

? ?- 我最近參與的一個項目是公司內(nèi)部的一個ERP管理系統(tǒng)。該系統(tǒng)是基于Vue.js開發(fā)的單頁應(yīng)用程序。

? ?- 項目的主要難點在于:

? ? ?1. 大量的業(yè)務(wù)邏輯和數(shù)據(jù)交互,需要合理設(shè)計數(shù)據(jù)流和狀態(tài)管理。

? ? ?2. 針對不同業(yè)務(wù)場景,需要開發(fā)大量可復(fù)用的UI組件。

? ? ?3. 系統(tǒng)涉及大量的表單和表格,對性能優(yōu)化提出了很高的要求。

? ?- 我通過以下方式解決了這些問題:

? ? ?1. 采用Vuex進行集中式狀態(tài)管理,合理劃分模塊和命名空間,提高代碼可維護性。

? ? ?2. 基于公司的UI組件庫進行二次開發(fā)和擴展,提高開發(fā)效率。

? ? ?3. 使用虛擬滾動和懶加載技術(shù)優(yōu)化表格和表單的性能,保證良好的用戶體驗。

?

3、搶單問題？

? ?- 為了保證搶單的時效性,可以采用以下方式:

? ? ?1. 利用WebSocket或Server-Sent Events技術(shù),實現(xiàn)客戶端與服務(wù)端的實時雙向通信。當(dāng)有新的訂單進來時,服務(wù)端能夠?qū)崟r推送給客戶端,客戶端收到通知后立即進行搶單操作。

? ? ?2. 在客戶端使用Axios等庫進行輪詢請求,定期檢查服務(wù)端是否有新的訂單。一旦發(fā)現(xiàn)有新訂單,立即進行搶單。

? ? ?3. 采用分布式鎖的機制,當(dāng)一個客戶端搶到訂單后,立即在服務(wù)端加鎖,其他客戶端就無法再搶到該訂單。

?

4、Vue2修改數(shù)組,頁面沒有發(fā)生變化？

? ?- 在Vue2中,當(dāng)您直接修改數(shù)組元素的值時,Vue無法檢測到數(shù)組的變化,因此頁面不會自動更新。

? ?- 解決方法:

? ? ?1. 使用Vue提供的變異方法,如`push()`、`pop()`、`shift()`等,這些方法可以觸發(fā)頁面更新。

? ? ?2. 使用`Vue.set()`或`this.$set()`方法來更新數(shù)組元素的值。

? ? ?3. 創(chuàng)建一個新的數(shù)組并賦值給data屬性,這樣也可以觸發(fā)頁面更新。

?

5、兩個客戶端如何實現(xiàn)實時通訊？

? ?- 可以使用以下技術(shù)實現(xiàn)兩個客戶端的實時通訊:

? ? ?1. WebSocket: 基于WebSocket協(xié)議,建立客戶端與服務(wù)端的雙向通信通道,能夠?qū)崿F(xiàn)即時、低延遲的數(shù)據(jù)傳輸。

? ? ?2. Server-Sent Events(SSE): 基于HTTP協(xié)議,服務(wù)端可以主動向客戶端推送數(shù)據(jù),客戶端只需要監(jiān)聽事件即可。

? ? ?3. Long Polling: 客戶端發(fā)起一個HTTP請求,服務(wù)端暫時不返回響應(yīng),直到有新數(shù)據(jù)可用時才返回。客戶端接收到響應(yīng)后立即發(fā)起新的請求,形成一個輪詢的過程。

? ?- 對于您的場景,我建議使用WebSocket或SSE技術(shù),可以更好地實現(xiàn)兩個客戶端的實時通訊需求。

?

6、接口類型？

? ?- 以下幾種常見的接口類型:

? ? ?1. RESTful API: 遵循REST架構(gòu)風(fēng)格的HTTP接口,提供標(biāo)準(zhǔn)的CRUD操作。

? ? ?2. WebSocket API: 實現(xiàn)客戶端與服務(wù)端的雙向?qū)崟r通信。

? ? ?3. 自定義RPC接口: 針對一些復(fù)雜的業(yè)務(wù)場景,可能會設(shè)計一些自定義的遠程過程調(diào)用接口。

? ?- 不同類型的接口有不同的優(yōu)缺點,需要根據(jù)具體的業(yè)務(wù)需求來選擇合適的接口類型。

?

7、Flex布局和Table布局的區(qū)別？

? ?- Flex布局:

? ? ?1. 基于彈性盒子模型,能夠靈活控制容器內(nèi)部元素的排列方式和尺寸。

? ? ?2. 適用于復(fù)雜的布局需求,如自適應(yīng)、劇中、空間分配等。

? ? ?3. 相對于Table布局,Flex布局更加靈活和簡單。

? ?- Table布局:

? ? ?1. 基于表格布局模型,適用于展示類似表格的數(shù)據(jù)。

? ? ?2. 布局相對簡單,但不太靈活,無法很好地處理自適應(yīng)需求。

? ? ?3. 在一些特定場景下,Table布局可能會有更好的語義化和性能。

?

8、div元素和span元素的區(qū)別？

? ?- div是HTML中的塊級元素,span是行內(nèi)元素。

? ?- div用于劃分頁面結(jié)構(gòu),通常用于布局。span用于對文本進行語義化標(biāo)記。

? ?- div通常用于包裹一個區(qū)塊,span通常用于對文本進行樣式修飾。

? ?- div在默認(rèn)情況下會獨占一行,span則不會。

? ?- div可以包含塊級元素和行內(nèi)元素,span只能包含行內(nèi)元素。

?