兩年經(jīng)驗前端社招中大廠面經(jīng)(下)

文章來源于 https://juejin.cn/post/7335721246929780771 作者：Hh, 已授權(quán)轉(zhuǎn)載

接著上一篇：兩年經(jīng)驗前端社招中大廠面經(jīng)（上）

阿里巴巴飛豬

飛豬是提前在線上做題，寫一個旅游相關(guān)的demo：有 tab 切換、商品信息等，做完之后約的一面

總體來說，問的都很基礎(chǔ)，只是自己答得不好，非常菜~

前端一面（掛）

• 什么是原型對象，以及你對原型的機(jī)制了解是什么樣子的
• JS的繼續(xù)，你會用哪些方式去實現(xiàn)呢？
• 有哪些方式可以隱藏頁面的元素
• 你說的這幾種方式 哪些會引起頁面的重排
• 哪些操作會引起頁面的重排
• 那如果要操作dom元素的話，你有什么方案去減少 重排和重繪？
• 如果你要做一個長列表的圖片，是這種無盡流的這種，然后你有什么方式可以 提升交互的體驗，優(yōu)化一下頁面的性能呢？圖片的懶加載：三種方案
• 那你的后面是這兩種方法：是怎么實現(xiàn)的圖片懶加載呢？
• 你用的 React 比較多是吧
• React hook 解決了哪些問題，以及有哪些常用的hooks
• useCallback 和 useMemo 的區(qū)別
• React 項目的頁面上有非常多的組件，你有什么方式加快首屏渲染？
• 你剛才 提到了 SSR，SSR的渲染速度它 其實 取決的因素還是挺多的，那如果你的整個頁面的內(nèi)容非常的多，接口也比較慢的話，那你有什么方式 可以進(jìn)一步加快 SSR的首屏呢？可能你的頁面有5 、6 屏，你的接口也非常慢，其中有兩個模塊接口非常慢，那這種情況下 你有什么方案優(yōu)化首屏呢？
• 網(wǎng)絡(luò)和瀏覽器相關(guān)的：計算機(jī)網(wǎng)絡(luò)的五層結(jié)構(gòu)
• https 是怎么保障安全的？
• CDN 具體是 怎么實現(xiàn)的嗎？
• 低代碼項目經(jīng)歷：balabala
• 你在這個項目做了多久
• 你能講一下這一個的整個實現(xiàn)鏈路嗎？低代碼的實現(xiàn)鏈路
• 那你們這個 組件的打包構(gòu)建是 你們自己做的嗎？
• 那你講一下你做的這些項目里面，剛才提到的點之外，還有哪一個技術(shù)對你來說，是比較難的，也比較有挑戰(zhàn)性的
• 所以你主要負(fù)責(zé)那一個模塊呢？
• 你有做過移動端的東西嗎？
• 小程序也沒有是嗎？
• 你為什么想換工作呢？

反問 工作地點：杭州 工作節(jié)奏

摯文集團(tuán)（探探）

算法有一步?jīng)]寫出來，有測試用例沒有通過

前端一面（掛）

• 自我介紹

• 基礎(chǔ)知識

• 移動端的實際開發(fā)經(jīng)驗有嗎？移動端相關(guān)的技能

• 聊一聊你對前端代碼的語義化了解

• CSS BFC 的了解，你可以隨便發(fā)散

• display：flex 介紹它的相關(guān)屬性，還有它平時怎么使用

• 平時做過的項目有對兼容性有要求嗎？是谷歌為主吧，那谷歌文字最小是多少px？12px，有什么方法縮小嗎？

• transform: scale 縮小，存在的問題：比如說 我正好有一個文案，正好有4個字，后面跟了一個 icon圖標(biāo)，那如果說我要設(shè)置 8px， 16px 需要縮小50% 對吧，那它和后面的 icon的距離怎么辦，它和后面的 icon 又不連續(xù)了 這個問題比較偏于實戰(zhàn)，處理的方法很多，比如 單獨特殊處理 icon，或者整體把 他們縮小，

• 說 一些數(shù)組的常用方法 舉一個場景：這個數(shù)組先取出 特殊的屬性，從一個對象數(shù)組變成 一個 字符串?dāng)?shù)組，我只要對象里面的一個key，key值是一個字符串。返回key 得到一個字符串?dāng)?shù)組，然后基于這個 key 做一些過濾

這個代碼有什么好處，有什么缺點：復(fù)雜度太高了？map 和 filter 底層是循環(huán) 但是數(shù)組的其他方法也可以解決：reduce 第一種 和 第二種區(qū)別：靈活性更高，第一個是 有好處的，語義化更好。。。

      
      arr.map(() => {}).filter(() => {});  // 這段代碼由優(yōu)化的嗎？
arr.reduce(() => {})

const userList = [
  {
    id: 1,
    username: 'john',
    sex: 1,
    email: '[email protected]'
  },
  {
    id: 2,
    username: 'jerry',
    sex: 1,
    email: '[email protected]'
  },
  {
    id: 3,
    username: 'nancy',
    sex: 0,
    email: '[email protected]'
  }
];
let result = userList.reduce((pre, current) => {
  return {...pre, [current.id]: current};
}, {});
 
console.log(result);

    

• JS 閉包
• 什么是內(nèi)存泄漏
• 那 V8 引擎的垃圾回收機(jī)制
• 從整個 V8 垃圾回收機(jī)制來講：你還有什么要說的、有補(bǔ)充嗎？
• 簡單講一下js的執(zhí)行原理：Even Loop
• 做題：事件循環(huán)題目輸出順序
• 說一下瀏覽器的緩存機(jī)制
• Etag 和 last-modified ：為什么 會出現(xiàn) Etag， Etag 比 last-modified 好在哪里？Etag 它解決了什么問題？
• JS Bridge ：web 和 native 通信的橋梁，原理能講一下
• 項目相關(guān)的問題：balabala
• 說一下 你這個幾個項目比較有成就感的、比較復(fù)雜的問題， 挑一個 詳細(xì)講一下，就行
• 項目相關(guān)的問題：balabala
• 那我這有一個問題：后端的數(shù)據(jù) 怎么跟組件 關(guān)聯(lián)起來的呢？比如你現(xiàn)在渲染一個下拉菜單，菜單里有a/b/c ，下拉組件 select 怎么 a/b/c關(guān)聯(lián)起來的
• 項目相關(guān)的問題：balabala
• 算法：最長不重復(fù)字符串的長度

反問

PC、移動、Vue、React 看不同的項目 簡單介紹業(yè)務(wù) 非常感謝你投遞探探，今天就到這里，后續(xù)的話，如果有二面其他的，hr 會聯(lián)系您

騰訊云智

騰訊云智（深圳）TEG 客服系統(tǒng)

前端一面（通過）

• 自我介紹
• 離職還是在職？
• 在這個項目中主要負(fù)責(zé)哪些模塊
• 主要用的前端哪一些技術(shù)實現(xiàn)的呢？
• 你們低代碼，它是怎么的一個流程？
• 有沒有考慮過，其他的UI框架，或者說，其他的渲染模式呢？
• 也就是說你們現(xiàn)在是基于React做了一些開發(fā)是吧，還沒有擴(kuò)展到Vue、或者是原生的JS？或者說是一些其他的框架上是嗎？
• 你們的數(shù)據(jù)結(jié)構(gòu)變更，有做什么版本管理的東西嗎？
• 有沒有類似于 diff 的功能：撤回、重做
• 版本管理是有的，有沒有做過性能方面的監(jiān)控呢？比如用戶做了一些某一些組件，生成了某一些頁面，運行方面的數(shù)據(jù)，性能這方面有嗎？
• 性能優(yōu)化
• 它的運行的時候，出現(xiàn)的異常是怎么捕獲的？
• 除了你剛才說的，你有做過一些業(yè)務(wù)嗎？
• 你們用的類組件還是 hook函數(shù)組件
• 這個邊界你們是怎么判定的呢？什么時候該用類組件，什么時候用hooks
• 類組件 和 hooks 區(qū)別
• hooks 組件、hooks怎么去管理組件的狀態(tài)的？怎么做到哪些不同作用域之間的分割，以及 邏輯復(fù)用的問題？
• 你平時會寫 JSX 語法多嗎？
• JSX 是通過 什么工具 去編譯
• JSX 編譯之后是什么結(jié)構(gòu)？
• React 生成的節(jié)點 它可以通過 ReactDom 去渲染， 你能自己寫一個 類似 ReactDom.render 的解析器嗎？
• 用 React 創(chuàng)建一個節(jié)點，它不一定只能在 react 中使用，你也可以自己寫一些解析器，是不是？
• React 為什么需要 ReactDOM？
• 你平時有接觸過 Vue 嗎？
• React 和 Vue 有一個共同的說法，都說是漸進(jìn)式的框架？你覺得漸進(jìn)式是指什么意思？
• React 可以多次調(diào)用 ReactDOM.render 嗎？
• React 是不是可以用 類似插件的機(jī)制，新增一個功能：這就是 React 和 Vue 的漸進(jìn)式功能所在，可以細(xì)化到某一個dom 元素，漸進(jìn)式特性。它們兩者 的都是一樣的，你給我一個容器，就可以 基于這個容器實現(xiàn)對應(yīng)的功能，不用你對整個前端的項目做一個重構(gòu)吧，可以慢慢的嵌入你的系統(tǒng)，從一個小的節(jié)點開發(fā)，慢慢的覆蓋你的系統(tǒng)。。。滲透到系統(tǒng)其他的地方
• react 的類組件可以寫一些公共的類，作為 公共繼承的對象嗎？
• 在 JS繼承有哪些方式，比如ES5
• 平時 用到 類的繼承這一種特性嗎？或者用到原型鏈相關(guān)的方法
• 你覺得哪一些場景的情況下用繼承會比較好
• 實現(xiàn)需求：自動播放輪播圖，隔個2s，跳到下一張：怎么去做這個
• 輪播圖的切換動效怎么實現(xiàn)
• 它如果還需要 有一個 首位相連的效果怎么實現(xiàn)？比如最后一張切換到第一張 反問：

主要的技術(shù)棧是React 目前主要做的業(yè)務(wù)：TEG客服部，打造自己的客服平臺，承接所有反饋 工作時間、節(jié)奏

前端二面（通過）

全程 50分鐘都在問項目，沒有八股文。

• 簡單的自我介紹
• 你現(xiàn)在是在職嗎
• 換工作的原因
• 那你現(xiàn)在在面試哪些公司？有沒有拿到offer？
• 你現(xiàn)在做的偏工具類，后續(xù)想不想做一下偏業(yè)務(wù)類的
• 低代碼都有哪些組件
• 低代碼都有哪些能力
• 有兩個下拉框，值發(fā)生改變時，在你們低代碼里面是怎么實現(xiàn)聯(lián)動的？
• 你們的schema都有哪一些數(shù)據(jù)呢？
• 此處省略 N 個項目相關(guān)的問題！！！
• 有做什么性能優(yōu)化嗎

反問：部門：騰訊集團(tuán)下的人工客服服務(wù)部 負(fù)責(zé)項目：各種客服平臺系統(tǒng) 技術(shù)棧：react 工作節(jié)奏：早9.30，晚8點

騰訊證券系統(tǒng)

騰訊（騰卓）證券系統(tǒng)，深圳，光啟未來中心

前端一面（掛）全程聊項目，一個半小時，沒有八股文。后因為我有下一場面試，主動取消，并跟面試官說明原因

美圖秀秀

深圳，海外事業(yè)部

前端一面（通過）

• 自我介紹
• 介紹之前做過的一些項目
• 現(xiàn)在是在職嗎
• 看機(jī)會的原因
• 你現(xiàn)在主要是做 xxx，下一份工作是比較往哪一個方向去發(fā)展呢？想嘗試哪些方向
• 有技術(shù)難點的項目或者是某一個東西，可以跟我分享一下嗎？你是怎么去解決這個問題的呀
• 項目問題：balabala
• react 技術(shù)棧、用的哪個版本
• 像react的話，一般做性能優(yōu)化是怎么去做的？
• useState 直接 setState 和 setState 傳入一個函數(shù)做處理，這個兩者的區(qū)別
• setState 是同步的還是異步的
• 你覺得 為什么會出現(xiàn) hooks？它有什么優(yōu)勢嗎
• react fiber 有沒有 了解？解決了什么問題
• react fiber 和 hooks 有什么關(guān)聯(lián)？
• react 18 的新特性有沒有去了解？新特性的出現(xiàn)，它們是解決了什么樣的問題？
• node 有使用過嗎？node的服務(wù)器有玩過
• webpack 5 有什么新的特性
• 介紹一下模塊聯(lián)邦
• 自定義 webpack 做了一件什么事情，解決了什么問題
• 除了 webpack，還了解其他 構(gòu)建工具嗎？
• vite 相關(guān)的了解，與 webpack區(qū)別
• 像 webscoket 有實踐過嗎？它是怎么建立連接的？
• csrf 與 xss 的了解
• cookie 的 samesite
• OK，我這邊了解得差不多了，你看一下有什么想問我的嗎？

反問 主要技術(shù)棧 react、next、node 主要做的業(yè)務(wù)和項目：海外事業(yè)部，國外用戶，多語言限制，沒有小程序應(yīng)用，都是網(wǎng)頁或者是原生的客戶端 AIGC 業(yè)務(wù)：balabala 工作節(jié)奏：1075

ok，我們今天聊到這，后序有消息的話，會有HR聯(lián)系你

前端二面（通過）

美圖秀秀的二面和百度三面、58二面差不多，聊人生，最前沿的技術(shù)、chatgpt等。

HR（通過）

58

前端一面（通過）

• 自我介紹
• 目前還是在職，看機(jī)會的原因
• 如果后面聊得順利，多久可以到崗
• 此處省略 N 個項目相關(guān)的問題！！
• 你之前又把它和阿里的低代碼引擎對比嗎？
• 你們在做這個低代碼的過程中，是怎么做事件的綁定的？有一個按鈕，如果我點了按鈕之后想 把一段文字填到一個 dom里面？或者類似于兩個組件的交互，綁定數(shù)據(jù)，并且響應(yīng)時間，是怎么去做這個事情的
• mirrorx 和 reudx 有啥區(qū)別或者優(yōu)勢
• mirrorx 它內(nèi)部是怎么做的異步？
• 自定義 webpack 插件，解決了什么問題，大概分幾步去實現(xiàn)
• 你了解過或者用過 哪些webpack 插件
• 優(yōu)化 webpack 打包編譯 性能 或者體積，可以講一下嗎？
• 性能優(yōu)化
• 拖拽你們是怎么做的碰撞檢測這一塊的
• 比如說，你要檢測dom 范圍內(nèi)有幾層 這個業(yè)務(wù)組件，你釋放的范圍內(nèi) 有哪些業(yè)務(wù)組件，這個是怎么去監(jiān)聽的
• 比如你拖到了 一個什么組件內(nèi)了，這個 dom 上面有哪些，第一層是什么，第二層是什么，這個是怎么去監(jiān)聽的
• 比如說 我有一個 input，它是怎么檢測到是 div1的、還是 div2 的呢，怎么檢測到它的父元素這一塊
• 比如說你在拖拽的過程中，是通過這個 元素的長寬 位置這種對比 這種解析到的，還是通過原生的 dom 的api 去做的監(jiān)聽
• 數(shù)組扁平方法
• 你們是經(jīng)常手寫一些公共的函數(shù)嗎？
• 你可以舉一個例子，可以體現(xiàn)你的封裝能力、設(shè)計能力、或者是一些設(shè)計模式、或者開發(fā)原則 之類的，可以舉一個你開發(fā)過程中的例子嗎？
• 主要用 React、vue用過嗎？大學(xué)的時候用過
• 我們也是 React為主，react hooks 了解哪些或者你用過哪些
• useEffect 和 useLayoutEffect
• react 18 里面的 useTranslation 有過了解嗎，它是做什么的
• react 18 里面的一些新的特性，它對異步事件的處理變化，優(yōu)先級這一塊，有過了解嗎 可以講一講
• 那它是怎么解決有的任務(wù)被頂替 優(yōu)先級事件上的 ？
• class 組件也有用過，class 組件 發(fā)請求是在哪個生命周期
• 它為什么不放在 componentWillMount ？componentWillMount 存在哪些問題？
• 你提到服務(wù)端渲染嘛？
• hooks 里面會產(chǎn)生閉包的情況嗎：數(shù)據(jù)更新了，在事件回調(diào)里面，或者是某一個使用的綁定的地方，它是沒有更新的，類似于setTimeout 或者是一些事件回調(diào)里面
• 那面對閉包，你有哪一些方法能夠在回調(diào)里或者 setTimeout 拿到最新的狀態(tài)、最新的值
• React的性能優(yōu)化的手段 有哪些？
• 你們一般是怎么做 函數(shù)的節(jié)流和防抖嗎？
• 你是學(xué)軟件的嗎？工作之后學(xué)的前端還是之前也學(xué)過
• 你理解為什么引入js 腳本和 css的時候，它們的位置是一頭一尾的這種？是從什么方向考慮
• css 解析會阻塞dom的解析嗎？
• 你大學(xué)學(xué)了多久啊，感覺你的基礎(chǔ)還挺扎實的
• this 指向
• 整體我感覺還挺好的，而且我們這邊也有一些低代碼的場景、現(xiàn)在也是正在做
• 我這邊的問題就這些，你想了解什么，就直接問

反問：負(fù)責(zé)的業(yè)務(wù)或者模塊 部門是 xxx 部門，也是中臺部門，所以做的一些項目也都是一些中臺的項目，包括說SDK類、平臺類、還有 node這種數(shù)據(jù)服務(wù)類的，分這幾個方向把 具體的業(yè)務(wù)：審核相關(guān)的，機(jī)審、人審、還有一些安全相關(guān)的，比如說掃描驗證碼，人臉識別、環(huán)境監(jiān)測之指紋、代碼混淆加密、加密簽名。。。js代碼的加固，都是安全相關(guān)的一些項目把 廣告、中臺 主要技術(shù)棧：React、 umi 目前在做的事：低代碼方向的嘗試、微前端嘗試 安全：sdk 項目 平時工作節(jié)奏：早上 10點、晚上8 9 點下班 部門多少人：前端 x 人 希望后面有機(jī)會可以共事

前端二面（通過）

• 自我介紹
• 技術(shù)方案
• 你在這個項目中承擔(dān)的是一個怎么樣的角色？
• 你們項目是怎么分工的？
• 深挖項目
• 都有哪些人在用你們這個平臺
• 有沒有和阿里、百度的低代碼做對比嗎？
• 你們的低代碼，和市面上其他的相比，有什么異同？............
• 有沒有關(guān)注最前沿技術(shù)
• 聊人生
• 讀過哪些書

HR 面（掛）

要了 30% 以上的漲幅 告知 HR，已經(jīng)拿了其他的offer，在做對比 沒有下文

美團(tuán)

前端一面（通過）

自我介紹

• 比較有難點或者是比較有挑戰(zhàn)的地方
• 項目相關(guān)問題：balabala
• 有沒有對比、對標(biāo)過市面上的同類產(chǎn)品
• 低代碼都有什么功能，有哪些能力，有哪些人在使用
• 做過的一些性能優(yōu)化，展開講一下
• 用什么技術(shù)棧？狀態(tài)管理用的哪個
• 離職原因
• 學(xué)習(xí)前端的渠道？你遇到問題是怎么解決的？
• 關(guān)注哪些技術(shù)博客，哪些公眾號，哪些開源項目
• 介紹一下強(qiáng)緩存和協(xié)商緩存
• http1、http2、http3的區(qū)別
• set 和 weakSet 的區(qū)別、是否可以遍歷
• 弱引用
• 閉包、v8：balabala
• 垃圾回收機(jī)制
• 介紹常用的 Promise 方法
• 簡單描述一下如何手寫實現(xiàn) Promise
• Promise.resolve 的相關(guān)問題
• react hooks 出現(xiàn)的原因
• 簡單介紹一下 react fiber
• react 函數(shù)組件和類組件的區(qū)別
• react 的生命周期
• react 的嚴(yán)格模式
• 介紹一下常用的設(shè)計模式
• 對 node 有了解嗎？
• 項目相關(guān)問題：balabala
• 對 linux、nginx 有了解嗎
• 對 chatgpt、AI 的看法
• 代碼題：判斷一個IPv4合法性

反問：主要用的技術(shù)棧：react 現(xiàn)在做的一些項目和業(yè)務(wù) 工作節(jié)奏：1085

前端二面（通過）

• 自我介紹
• 面試官向我介紹了 他們當(dāng)前部門的情況，做的業(yè)務(wù)，技術(shù)棧、團(tuán)隊規(guī)模等
• 介紹低代碼相關(guān)的搭建
• 介紹一下你參與過的項目難點、亮點
• 項目相關(guān)問題：balabala
• 低代碼項目做了多久、項目大概多少人
• 有沒有對比過其他低代碼產(chǎn)品，了解其他低代碼的實現(xiàn)嗎？
• react 函數(shù)組件和類組件的區(qū)別
• react 高階組件、render props 區(qū)別
• webpack 基本原理
• webpack 熱更新的原理
• 對 vite 的了解，與 webpack 的區(qū)別
• webpack 的構(gòu)建優(yōu)化
• loader 和 plugins 的作用
• 怎么自定義webpack 插件？
• 項目中自定義的webpack 插件 解決了什么問題？

接下來做三道題：

第一題：閉包相關(guān)（做出來了）

      
      function foo(){
    console.log(a);
}
function bar(){
    var a = 3;
    console.log(this.a + a);
    foo();
}
var a = 2;
bar();
bar.call({a: 4})

    

第二題：事件循環(huán)，看輸出順序（做出來了）

      
      console.log('1');
async function async1() {
    console.log('2');
    await console.log('3');
    console.log('4');
}
setTimeout(function () { console.log('5') }, 0)
async1();
new Promise(function (resolve) {
    console.log('6');
    resolve(6);
}).then((x) => console.log(x))
console.log('8')

    

第三題：高亮關(guān)鍵詞，10 個約束條件，還是有一定的難度的（寫了20多分鐘，完成 60%-70%） 現(xiàn)在在哪個城市，住在哪里 現(xiàn)在都在面哪些公司，手上都有哪些公司的offer 你對未來的團(tuán)隊有什么期望？喜歡什么樣的團(tuán)隊 反問

HR 面（掛）

一二面技術(shù)通過，HR 面掛，要了將近 dobule 的總包，期望漲幅太高了，掛！