(字節(jié)/華為/美團(tuán))前端面經(jīng)記錄冷冷清清的金三銀四
點(diǎn)擊上方?前端Q，關(guān)注公眾號(hào)
回復(fù)加群，加入前端Q技術(shù)交流群
大家好，我是winty！
今天給大家介紹群里的時(shí)光大佬的面經(jīng)，感謝時(shí)光大佬分享，恭喜時(shí)光大佬！
從畢業(yè)到現(xiàn)在已經(jīng)在北京3年了，當(dāng)年一起來(lái)北京的同學(xué)，如今都有了要離開的打算。我也在萌生了想要去成都的想法。然而從投遞簡(jiǎn)歷開始，就感受到了今年確實(shí)不是很景氣。很多大廠不是裁員就是鎖HC，面試邀約都顯得非常寶貴。
字節(jié)（北京）
一面
HTTPS建立連接過(guò)程
http緩存，強(qiáng)緩存時(shí)cache-control字符集是什么 publichttps://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Cache-Control
深拷貝的實(shí)現(xiàn)，如果遇到function怎么辦 需要判斷類型，對(duì)于基礎(chǔ)類型，直接賦值，對(duì)于復(fù)雜類型則需要遞歸處理，并同時(shí)設(shè)置map，避免嵌套。對(duì)于function可以通過(guò) new Function(' return '+ fn.toString())的方式拷貝
webpack 有用過(guò)哪些loader、webpack做過(guò)哪些優(yōu)化 loader：babel-loader、ts-loader、style-loader、css-loader、less-loader 優(yōu)化：提取公共代碼、代碼分割、代碼壓縮、按需加載、預(yù)加載
微前端的問(wèn)題，設(shè)計(jì)思路，有遇到哪些問(wèn)題，如何做樣式隔離。公用路由的設(shè)計(jì) 采用路由分層的方式，將路由劃分為4層，第一層用來(lái)區(qū)分是iframe還是微應(yīng)用，第二層用來(lái)區(qū)分具體的app頁(yè)面名稱由此在配置表中拿到具體的配置信息，第三層為子應(yīng)用的路由，第4層為子應(yīng)用的參數(shù)。由此實(shí)現(xiàn)基座與微應(yīng)用的路由共享。
樣式隔離，一是通過(guò)qiankun自身提供的樣式沙箱 { sandbox : { experimentalStyleIsolation: true } }，二是vue組件樣式使用scoped，三是頂層樣式增加私有類名 面試官反饋說(shuō)，iframe還是微應(yīng)用對(duì)于用戶來(lái)說(shuō)是無(wú)感的，配置表區(qū)分iframe還是微應(yīng)用即可，不必多占一層路由
為什么要使用composition-api 首先因?yàn)闃I(yè)務(wù)性質(zhì)需要兼容ie所以項(xiàng)目只能使用vue2 通過(guò)使用@vue/composition-api方式使用新特性。轉(zhuǎn)變以往的vue選項(xiàng)式開發(fā)，為更貼近函數(shù)式的代碼開發(fā)。使原本關(guān)聯(lián)邏輯分散在各個(gè)選項(xiàng)中，組件代碼龐大的問(wèn)題的問(wèn)題得到解決，提高代碼易讀性、可維護(hù)性。同時(shí)通過(guò)抽取hook實(shí)現(xiàn)邏輯復(fù)用，提升效率。相較于mixin具有隱式依賴等缺點(diǎn)，更具備可用性。 兩數(shù)之和https://leetcode-cn.com/problems/two-sum/ 純數(shù)字版本號(hào)數(shù)組排序
function?versionSort(versions)?{
??return?versions.sort((a,?b)?=>?{
????const?aArr?=?a.split(".");
????const?bArr?=?b.split(".");
????while?(aArr.length?||?bArr.length)?{
??????const?A?=?aArr.shift()?||?0;
??????const?B?=?bArr.shift()?||?0;
??????if?(A?-?B?!==?0)?{
????????return?A?-?B;
??????}
????}
??});
}
二面
http請(qǐng)求頭有哪些字段 Accept系列、Cache-Control、Cookie、Host等等
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers2. 原型鏈
https://juejin.cn/post/69344983614750720143. 工作中遇到的具有挑戰(zhàn)的事情 從零開始搭建完善的工具庫(kù)，如何組織代碼？如何保持資源的動(dòng)態(tài)引入？如何來(lái)做單元測(cè)試？4. 單頁(yè)面通信，多頁(yè)面通信 這個(gè)我一下蒙了。但是感覺(jué)應(yīng)該是路由通信、借助cookie、localStorage通信，以及iframe的通過(guò)addEventListener和postMessage通信 5. 微前端樣式隔離 同上 6. 網(wǎng)絡(luò)安全展開說(shuō) 幾種安全問(wèn)題：XXS CSRF、點(diǎn)擊嵌套劫持、CDN劫持等 防范主要圍繞同源策略，cookie的sameSite 、http-only，referer的驗(yàn)證，CSP等方式來(lái)避免https://zhuanlan.zhihu.com/p/83865185
webpack與rollup的區(qū)別 webpack大而全，功能全面配置完善，同時(shí)loader與plugin非常豐富。并且具有deveServer方便開發(fā)調(diào)試 rollup小而美，相較沒(méi)有webpack完善但是同樣體積更小速度更快。類似壓縮等基礎(chǔ)功能也要通過(guò)插件實(shí)現(xiàn)。更適合做一些工具庫(kù)的打包處理 介紹一下你寫的webpack loader 工具為了兼容vue2、vue3兩個(gè)版本，核心代碼是完全相同的，差異只是在vue特性api的引入上，vue2從@vue/composition-api中引入，vue3從vue中引入.所以loader做的事情就是在構(gòu)建vue2版本的時(shí)候?qū)?code style="font-size: 14px;padding: 2px 4px;border-radius: 4px;margin-right: 2px;margin-left: 2px;background-color: rgba(27, 31, 35, 0.05);font-family: "Operator Mono", Consolas, Monaco, Menlo, monospace;word-break: break-all;color: rgb(150, 84, 181);">import { *** } from 'vue' 替換為 import { *** } from '@vue/composition-api'職業(yè)規(guī)劃 希望在未來(lái)的兩到三年時(shí)間，拓充技術(shù)能力的同時(shí)，在業(yè)務(wù)能力上有所沉淀成為業(yè)務(wù)，形成一定的見(jiàn)解，同時(shí)謀求從大頭兵向小組長(zhǎng)的一個(gè)轉(zhuǎn)變 實(shí)現(xiàn)具有并發(fā)限制的promise.all
function?promsieTask(taskList,?maxNum)?{
??return?new?Promise((resolve,?rejuct)?=>?{
????let?runCount?=?0;
????let?complated?=?0;
????const?taskNum?=?taskList.length;
????const?resArr?=?[];
????let?current?=?0
????function?handler()?{
????if(runCount>=maxNum)?return
??????const?a?=?taskNum?-?complated;
??????const?b?=?maxNum?-?runCount
??????const?arr?=?taskList.splice(0,?a>b?b:a);
??????arr.forEach((task,?index)?=>?{
????????const?d?=?current+index
????????task
??????????.then(
????????????(res)?=>?{
??????????????console.log(current,index,res)
??????????????resArr[current]?=?res;
????????????},
????????????(reason)?=>?{
??????????????resArr[current]?=?reason;
????????????}
??????????)
??????????.finally(()?=>?{
????????????complated++;
????????????runCount--;
??????
????????????if?(complated?===?taskNum)?{
??????????????resolve(resArr);
????????????}
????????????handler();
??????????});
??????});
??????current?+=?taskList.length
????}
????handler();
??});
}??
三面
業(yè)務(wù)相關(guān)，聊一下做的印象最深的項(xiàng)目，有哪些關(guān)鍵指標(biāo)衡量效果,有哪些進(jìn)步優(yōu)化空間 這個(gè)具體到業(yè)務(wù)指標(biāo)原來(lái)沒(méi)有怎么想過(guò)，答得不是很好 從具體的業(yè)務(wù)中講講和學(xué)習(xí)的關(guān)系 這個(gè)問(wèn)題也是沒(méi)有考慮的很好，講的很虛。是講的最近做的一個(gè)項(xiàng)目的重構(gòu)，從設(shè)計(jì)模式的方面，和vue底層的方面講了一下。后面想想應(yīng)該從一些新技術(shù)或者以前不熟悉的東西入手，講一邊業(yè)務(wù)開發(fā)通過(guò)新技術(shù)拓展能力，一方面將學(xué)習(xí)通過(guò)實(shí)踐的方式加深理解 對(duì)自我的認(rèn)知和未來(lái)規(guī)劃 因?yàn)閱?wèn)業(yè)務(wù)相關(guān)回答的不是很好，所以著重講了一下希望加強(qiáng)業(yè)務(wù)能力 筆試題 合并兩個(gè)遞增鏈表
/**
?*?Definition?for?singly-linked?list.
?*?function?ListNode(val)?{
?*?????this.val?=?val;
?*?????this.next?=?null;
?*?}
?*/
/**
?*?@param?{ListNode}?l1
?*?@param?{ListNode}?l2
?*?@return?{ListNode}
?*/
var?mergeTwoLists?=?function(l1,?l2)?{
????const?head?=?new?ListNode()
????let?current?=?head
????while(l1&&l2){
????????if(l1.val????????????current.next?=?l1?
????????????l1?=?l1.next
????????}else{
????????????current.next?=?l2
????????????l2?=l2.next
????????}
????????current?=?current.next
????}
????if(l1){
????????current.next?=?l1
????}
????if(l2){
????????current.next?=?l2
????}
????return?head.next
};
HR面
畢業(yè)以來(lái)的工作履歷 當(dāng)時(shí)為什么沒(méi)有走校招 去年換工作的時(shí)候收到的offer和選擇 有沒(méi)有收到其他公司的offer，有沒(méi)有什么傾向性 選擇工作有什么著重點(diǎn)
華為OD（成都）
機(jī)試題
輸入一個(gè)正整數(shù)，輸出他的兩個(gè)素?cái)?shù)因子，如沒(méi)有輸出 -1 -1 輸入兩個(gè)數(shù)組，分別從兩個(gè)數(shù)組中取出一個(gè)元素相加，和作為一個(gè)元素，求K個(gè)這樣的元素的最小和。坐標(biāo)完全相同，屬于同一個(gè)元素。 輸入一個(gè)n*m的多維數(shù)組，輸出一個(gè)字符串，按順序?qū)⒆址械拿恳粋€(gè)字符在數(shù)組中查找，要求查找位置必須相鄰，且每一個(gè)元素只能使用一次。輸出字符串在數(shù)組中的坐標(biāo) 牛客網(wǎng)的測(cè)試用例無(wú)法調(diào)試，只知道通過(guò)率分別是100%，95%，95%.實(shí)在想不出邊界條件了。這里就不放出代碼誤導(dǎo)大家了。
一面
http 請(qǐng)求頭有哪些關(guān)鍵字，反映客戶端信息的是那個(gè)字段 同上 User-Agent http請(qǐng)求觸發(fā)catch的原因可能有哪些 攔截器捕獲其他異常，比如204，請(qǐng)求處理函數(shù)執(zhí)行異常，返回資源異常（不符合接口定義） 302、304什么含義 302：臨時(shí)重定向 304：資源未修改，使用緩存 項(xiàng)目重構(gòu)前是什么狀態(tài) 部門內(nèi)第一個(gè)是使用組合式模式開發(fā)落地的項(xiàng)目，由于前期不熟悉缺乏經(jīng)驗(yàn)。導(dǎo)致項(xiàng)目數(shù)據(jù)流動(dòng)混亂、功能雜糅、請(qǐng)求相互依賴，不但沒(méi)有突出組合式邏輯清晰代碼復(fù)用的優(yōu)點(diǎn)，反而導(dǎo)致代碼可維護(hù)性差，白屏?xí)r間長(zhǎng)。通過(guò)梳理邏輯功能，重新組織頁(yè)面、組件，按照單一原則抽離hook，解耦無(wú)關(guān)邏輯。梳理數(shù)據(jù)流動(dòng)，無(wú)關(guān)請(qǐng)求并行觸發(fā)。提升代碼可維護(hù)性，加快首屏渲染。 微前端的技術(shù)方案是怎么確定的，有沒(méi)有遇到什么問(wèn)題，樣式隔離，數(shù)據(jù)管理，路由沖突
是主要由我決定的。采用qiankun的原因，一是方案成熟，文檔健全，社區(qū)案例多。二是我自身以前有過(guò)一些經(jīng)驗(yàn)，對(duì)qiankun比較了解，能夠快速落地 樣式隔離，一是通過(guò)qiankun自身提供的樣式沙箱 { sandbox : { experimentalStyleIsolation: true } }，二是vue組件樣式使用scoped，三是頂層樣式增加私有類名數(shù)據(jù)管理，qiankun本身有提供globalState相關(guān)api，但是子應(yīng)用只能在onchange事件觸發(fā)時(shí)才能拿到公共數(shù)據(jù)。所以先聲明公共數(shù)據(jù)，通過(guò)initGlobalState注冊(cè)，然后在微應(yīng)用注冊(cè)階段通過(guò)props方式預(yù)先傳遞給子應(yīng)用。在子應(yīng)用側(cè)，通過(guò)mounted鉤子和onClobalStateChange共同維護(hù)公共數(shù)據(jù) 路由沖突，子應(yīng)用是需要與基座共享路由的，所以在路由激活子應(yīng)用的模式下。預(yù)先分配給子應(yīng)用一個(gè)激活路由，這個(gè)路由同時(shí)也是子應(yīng)用的baseRoute，在掛載階段通過(guò)props傳遞，子應(yīng)用拿到baseRoute作為前綴注冊(cè)路由。從而實(shí)現(xiàn)路由共享。
qiankun的打包配置
https://qiankun.umijs.org/zh/guide2. 了解市面上其他的微前端方案么 1、是類似乾坤、飛冰這種基于singleSpa的方案 2、是類似美團(tuán)那種，相同技術(shù)架構(gòu)的，自研原生實(shí)現(xiàn) 3. 為什么使用Monorepo組織代碼倉(cāng)庫(kù) 我們這個(gè)庫(kù)，設(shè)計(jì)上就是要能夠支持vue2、vue3兩個(gè)版本，以及不同業(yè)務(wù)需要的 采用Monorepo組織代碼倉(cāng)庫(kù)，方便管理維護(hù)不同的功能包、既做到了獨(dú)立發(fā)布，又能在項(xiàng)目中統(tǒng)一維護(hù) 4. webpack知道有哪些插件lodaer么？5. webpack你知道哪些優(yōu)化
構(gòu)建階段、多線程、緩存 資源產(chǎn)物 ? 代碼壓縮、代碼分割、提取公共代碼、懶加載、預(yù)加載
leetcode 452題
https://leetcode-cn.com/problems/minimum-number-of-arrows-to-burst-balloons/
二面
http1 和http2的區(qū)別 壓縮請(qǐng)求頭，二進(jìn)制分幀、多路復(fù)用
https://zhuanlan.zhihu.com/p/1025610342. 講一下loader和plugin
webpack的loader主要用來(lái)處理特定的文件，進(jìn)行轉(zhuǎn)換
plugin通過(guò)wepack提供的構(gòu)建鉤子可以實(shí)現(xiàn)loader無(wú)法實(shí)現(xiàn)的功能，比如deveServer、代碼分割等
3. extenral
通過(guò)extenrals 選項(xiàng)，可以將依賴從輸出的bundle中移除，并保持資源引入
4. 講一下微前端
微前端并不是為了取代iframe，他們都有所適用的場(chǎng)景。對(duì)于部分相互獨(dú)立并沒(méi)有什么復(fù)雜數(shù)據(jù)交互的項(xiàng)目來(lái)說(shuō)iframe就很合適，而且天生具備很好的隔離。而對(duì)于具有數(shù)據(jù)交互，尤其是在一個(gè)大項(xiàng)目中拆解出不同的業(yè)務(wù)功能模塊來(lái)說(shuō)，微前端的模式更合適。5. vue2和vue3的響應(yīng)式
vue2的響應(yīng)式是基于Object.definePropert 數(shù)據(jù)劫持與數(shù)組常用方法的改寫來(lái)實(shí)現(xiàn)的。對(duì)于復(fù)雜數(shù)據(jù)類型，需要層層遞歸劫持，性能較差
vue3是通過(guò)原生api proxy 代理實(shí)現(xiàn)的，不需要遞歸，也不需要改寫方法，性能更好，支持更好。但是由于代理只是對(duì)目標(biāo)對(duì)象，在傳遞響應(yīng)式對(duì)象時(shí)，操作不當(dāng)容易丟失響應(yīng)性。6. 講一下es6
這個(gè)就是老生常談了，大家仁者見(jiàn)仁智者見(jiàn)智
7. promise、promise.all ,promise與async await的區(qū)別，async await如并發(fā)
promise
8. 計(jì)算島嶼周長(zhǎng)
//?給定一個(gè) row x col 的二維網(wǎng)格地圖 grid ，其中：grid[i][j]?= 1 表示陸地， grid[i][j]?=?0?表示水域。
//?網(wǎng)格中的格子?水平和垂直?方向相連（對(duì)角線方向不相連）。整個(gè)網(wǎng)格被水完全包圍，但其中恰好有一個(gè)島嶼（或者說(shuō)，一個(gè)或多個(gè)表示陸地的格子相連組成的島嶼）。
//?島嶼中沒(méi)有“湖”（“湖”?指水域在島嶼內(nèi)部且不和島嶼周圍的水相連）。格子是邊長(zhǎng)為 1 的正方形。網(wǎng)格為長(zhǎng)方形，且寬度和高度均不超過(guò) 100?。計(jì)算這個(gè)島嶼的周長(zhǎng)。
//?示例1：輸入：grid =?[[0,1,0,0],[1,1,1,0],[0,1,0,0],[1,1,0,0]]
//?輸出：16
//?解釋：它的周長(zhǎng)是上面圖片中的 16 個(gè)黃色的邊
//?示例2：輸入：grid =?[[1]]
//?輸出：4
function?search(grid)?{
????let?res?=?0
????grid.forEach((line,?i)?=>?{
????????line.forEach((item,?j)?=>?{
????????????if?(item?===?1)?{
????????????????dp(i,?j)
????????????}
????????})
????});
????function?dp(i,?j)?{
????????if?(i?==?0?||?grid[i?-?1][j]?==?0)?{
????????????res++
????????}
????????if?(i?+?1?==?grid.length?||?grid[i?+?1][j]?==?0)?{
????????????res++
????????}
????????if?(j?==?0?||?grid[i][j?-?1]?==?0)?{
????????????res++
????????}
????????if?(j?+?1?==?grid[0][1].length?||?grid[i][j?+?1]?==?0)?{
????????????res++
????????}
????}
????return?res
}
const?grid?=?[[0,1,0,0],[1,1,1,0],[0,1,0,0],[1,1,0,0]]
console.log(search(grid))
三面
這一面就是簡(jiǎn)單溝通了一下現(xiàn)在的工作情況。電話面試大概10分鐘就結(jié)束了
美團(tuán)（成都）
一面
http 緩存cache-control字符集 max-age\public\private\no-cache\no-store\ 網(wǎng)絡(luò)安全，頁(yè)面出現(xiàn)廣告什么原因 XSS腳本添加頁(yè)面？頁(yè)面劫持、代理？CDN，iframe嵌套 同上 微前端樣式隔離，js隔離原理 同上 babel原理 loader和plugin的區(qū)別 同上 map和object的區(qū)別 map補(bǔ)足了js沒(méi)有這種字典類似功能的短板。雖然好像map能做的key/value object也可以實(shí)現(xiàn)。但是map可以按照順序遞歸，key可以是對(duì)象等復(fù)雜數(shù)據(jù)類型 Object.assgin 與 ...復(fù)制對(duì)象的區(qū)別 這個(gè)除了使用方式上，并沒(méi)有感覺(jué)有什么不同，之后嘗試了一下表現(xiàn)也是一樣的 有做過(guò)組件庫(kù)，或者這種公共基礎(chǔ)么？有考慮哪些設(shè)計(jì)原則 單一原則、拓展性、可靠性 有用過(guò)哪些ide的能力（變更函數(shù)名？） 這個(gè)沒(méi)懂是想問(wèn)什么 尾遞歸優(yōu)化 這個(gè)是從調(diào)用棧的角度來(lái)講的，通過(guò)尾遞歸優(yōu)化的方式，釋放中間變量
https://zhuanlan.zhihu.com/p/39371113411. ts 用過(guò)那些函數(shù)，interface和type的區(qū)別 interface 可以拓展 extends interface能夠聲明合并 type不可以extends、implement但是可以類型交叉 type可以聲明類型別名、聯(lián)合類型、元組 interface不可以 12. 扁平化嵌套數(shù)組有幾種方式
flat toString().split(',') 遞歸
二面
你最近做的事情 在做一個(gè)lowCode平臺(tái)的代碼重構(gòu)，項(xiàng)目采用vue3但是之前是組合式的寫法。我們重構(gòu)主要做了兩件事，一是將選項(xiàng)式改為組合式，并抽離hook；二是將整個(gè)渲染配置數(shù)據(jù)從組件中剝離出來(lái)，通過(guò)響應(yīng)式的方式構(gòu)建單項(xiàng)數(shù)據(jù)流維護(hù) 介紹數(shù)據(jù)流，是否了解市面上其他公共狀態(tài)管理工具 ，了解Piniahttps://pinia.vuejs.org/introduction.html#basic-example通過(guò)vue3提供的響應(yīng)式api，我們獲得了無(wú)需借助第三方工具，即可實(shí)現(xiàn)公共響應(yīng)式數(shù)據(jù)的維護(hù)。我們總結(jié)了一些經(jīng)驗(yàn)，可以直接定義響應(yīng)式數(shù)據(jù)，以及更新他的set方法通過(guò)代碼引入，props傳遞以及porvide/inject的方式靈活使用。感覺(jué)這部分表達(dá)為什么不用市面上已有的狀態(tài)管理庫(kù)而用我們的方案，這部分講的不夠自信，理由不夠充分 展開問(wèn)業(yè)務(wù) 問(wèn)微前端的選型原因 一是qiankun的技術(shù)方案相對(duì)比較完善，無(wú)論是常見(jiàn)問(wèn)題還是社區(qū)經(jīng)驗(yàn)都比較豐富 二是我個(gè)人之前有一定的知識(shí)儲(chǔ)備，使用qiankun能夠容易落地 如何尋找到兩個(gè)dom節(jié)點(diǎn)的最近公共父節(jié)點(diǎn) 通過(guò)從下向上遞歸，并將父節(jié)點(diǎn)儲(chǔ)存，比較
美團(tuán)二面感覺(jué)面的不是很好二面之后就沒(méi)有后續(xù)了
往期推薦
最后
歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...
