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