【面試】1110- 一年前端社招面試總結，入職阿里菜鳥
前言
本篇文章也是認識的一位好朋友「東仔」，也是和Fly一年的前端，最近在面試和他交流了很多，還有雨哥，后面繼續(xù)約他寫一份面試題。最近Fly哥也在瘋狂面試，差不多大中廠小廠、得物、B站、愛奇藝、螞蟻、字節(jié)、阿里「有的面完了，有的offer有的還在流程中。等我確定了，我也寫一份面經(jīng)，給大家參考，整體和下面差不多，但是我會有點可視化的，所以最近」更新的可視化文章比較少，精力有限，等我「調整結束」了依舊是高質量文章送上。
介紹
?個人背景：2020年畢業(yè)，二本學校科班前端，一年出頭前端經(jīng)驗。上家公司主要做的是 Vue2 ?PC端的產(chǎn)品，捎帶一些可視化方向的技術。技術棧以
?Vue2為主，有自行學習React、Node.js、Webpack、Flutter、Vue3、TypeScript等。
在卷了一年多后，希望能在滬杭找一家比較好的公司以及團隊來進一步的提升自己，于是在 8 月中旬離職，遠程面試了三周左右，終于收獲到了滿意的 Offer。
期間總共面試了大約 10 ~ 15 家大中型公司，其中攜程、申通、網(wǎng)易云等幾家由于面試時間過晚，均在一面前后自行放棄了后續(xù)面試。
阿里菜鳥、滴滴杭州、B站、華為西研所、星環(huán)、英語流利說、阿里烏鶇等均面試通過，最終選擇了入職阿里巴巴菜鳥網(wǎng)絡。
說明
各公司技術面大多是 3 輪，較少為 2 輪或 4 輪，視頻面試占多數(shù)（方便共享屏幕手寫代碼），也有少數(shù)為電話面試，有 3 家左右公司有單獨筆試。視頻面試出手寫題概率極大，手寫題前端相關較多（防抖節(jié)流等），算法題有的公司考有的不考，算法題難度為簡單到中等，其中中等難度題目較多。
筆者只有一年經(jīng)驗，所以考察基礎技術較多，項目與場景題較少。各家面試題有很多重復的題目，因此本文不單獨以公司為單位分類，而將所有題目以技術分類同時加上考察頻率，希望更容易突出考察重點高頻題。
由于很多題目展開分析時內(nèi)容過多，本文只列舉出題目，答案讀者可自行找資料學習。
面試題
?未標注的題目出現(xiàn)頻率為 1 ~ 2 次，中頻 代表 3 ~ 5 次，高頻代表 5 次以上
?
?以下給出正常的題目，不列舉遇到的坑爹刁鉆題、場景題以及可視化方向的題目
?
HTML5
「 cookie、localStorage、sessionStorage的區(qū)別 ?—— 高頻」HTML5的新特性有哪些meta標簽都包含哪些使用方法語義化標簽有哪些
CSS3
「談談 Flex布局 —— 高頻」水平垂直居中有哪些方式 —— 中頻 動畫有哪些實現(xiàn)方式（含 JS）—— 中頻 談談對 BFC的理解 —— 中頻談談盒模型 —— 中頻 CSS3的新特性有哪些三欄布局有哪些實現(xiàn)方式 移動端適配的方式 1px問題less / sass有做過哪些比較高級的操作
JavaScript（含ES6）
「談談事件循環(huán)（含瀏覽器與 Nodejs）——高高頻」 「談談原型與原型鏈 —— 高頻」 「談談對閉包的理解 —— 高頻」 「 var、let、const的區(qū)別 —— 高頻」繼承有哪些方式 —— 中頻 requestAnimationFrame了解嗎 —— 中頻談談對 Promise的理解 —— 中頻談談垃圾回收機制 —— 中頻 談談深淺拷貝 —— 中頻 談談數(shù)據(jù)類型以及內(nèi)存方式 —— 中頻 談談類型轉換 script標簽上defer與async的區(qū)別Promise的all / allSettled / race / any區(qū)別哪些數(shù)據(jù)結構可以直接迭代 ES6 新特性有哪些
TypeScript
談談對泛型的理解 —— 中頻 談談 TS 中的函數(shù)重載 interface與type的區(qū)別
HTTP
「強緩存與協(xié)商緩存（ 304狀態(tài)碼是什么） —— 高頻」談談 HTTPS—— 中頻HTTP 1/2/3是如何解決隊頭阻塞的HTTP2頭部壓縮是怎么做的HTTP 1/2/3的區(qū)別TLS握手過程httponly的作用301和302的區(qū)別
Vue
「雙向綁定原理（響應式原理）—— 高頻」 「 computed與watch的區(qū)別（追問有看過源碼嗎）—— 高頻」「Vue 的 diff算法(key的作用) —— 高頻」「 Vue3的新特性有哪些 —— 高頻」「Vue 的生命周期 —— 高頻」 「 v-if與v-show的區(qū)別 —— 高頻」「組件傳值方式 —— 高頻」 談談對 MVVM的理解 —— 中頻Vue 的渲染過程 —— 中頻 談談對 vuex的理解 —— 中頻路由原理 —— 中頻 插槽的各種方式 混入 keep-alive自定義指令 defineProperty與Proxy的差異$nextTick原理
React
「談談對 hooks的理解 —— 高頻」「Fiber & 渲染過程 —— 高頻」 React 的生命周期 —— 中頻 setState 是同步還是異步 —— 中頻 React 的 diff 算法以及和 Vue 的有什么區(qū)別 樹的比較為什么時間復雜度是 On3，React 是怎么優(yōu)化虛擬DOM的比較的 React 的組件傳值 說一下 useCallbackhooks在什么場景下不可用談談 mobx與redux的區(qū)別
Webpack & babel
「 Webpack的性能優(yōu)化有哪些方式 —— 高頻」「 Webpack的打包過程 —— 高頻」有做過自定義 Loader/Plugin嗎？怎么做的？原理是什么？——中頻Webpack的插件機制原理 —— 中頻Webpack5新特性有哪些常見的 Loader與Plugin有哪些Tapable.js常見鉤子函數(shù)有哪些External有什么缺陷談談模塊熱替換原理 描述 babel的轉換過程babel的預設和插件的區(qū)別是什么
Node.js & express & koa & mongoDB & mySQL
談談 Node.js的事件循環(huán)——中頻談談 mongoDB與mySQL的區(qū)別 —— 中頻Node.js常見的模塊有哪些有用 Node.js寫過工具嗎，怎么做的express與koa的中間件原理談談對 Restful風格的認識Node.js開發(fā)中怎么調試
其他
「Web安全的攻擊原理以及防御方式（XSS與CSRF）—— 高頻」 「 Vue與React的對比 —— 高頻」「性能優(yōu)化的方式有哪些 —— 高頻」 談談重繪與回流 —— 中頻 Flutter與React Native的比較談談 Flutter的架構談談 Vite原理Webpack / gulp / rollup / vite的區(qū)別口述快速排序 V8執(zhí)行JavaScript代碼的過程談談單例模式與工廠模式 談談策略模式 在項目中有用過哪些設計模式 瀏覽器頁簽間的通信方式有哪些
手寫題
防抖與節(jié)流 —— 中頻 數(shù)組去重 扁平數(shù)組轉樹形對象 —— 中頻 實現(xiàn) bind / call / apply實現(xiàn) Promise.all實現(xiàn) Promise.allSettled實現(xiàn)寄生組合式繼承 實現(xiàn) const功能
項目
挑一個熟悉的項目詳細聊聊 項目中你做的亮點 項目中遇到什么難點，是怎么解決的 之前團隊開發(fā)項目的流程是什么樣的 有碰上本地正常線上出錯的bug嗎，如何排查
經(jīng)驗與反思
「由上面列舉的題目可以看出，八股文的考察比例非常大，一定要做好充分的準備」。 手寫題考察頻率也很高，都是非常常見的題目，在面試前一定要多練習，達到倒背如流的程度，并且注意盡量寫的完善會很加分（可參考伢羽的博客）。 近兩年網(wǎng)傳算法題的頻率和難度非常高，實際上不一定會考，并且考的難度不會太高。寫不出來可以嘗試要面試官提示或者跟面試官講明自己的思路，實在不會寫也不一定百分百會掛掉。推薦在面試前去力扣刷一兩百道簡單中等題。 js、Vue或React中一個框架、http、webpack考察頻率非常高，需要充分準備并且盡可能的有深度。HTML 和 CSS 的基礎內(nèi)容也會考察，注意不要大意翻車。 「項目介紹、難點和亮點要提前準備好，可以多自己練習一下表達」，并且準備面試官可能的相關技術上的追問 「要準備自己的殺手锏題目，對常見的高頻題盡可能答得完善、有深度或有自己獨到的見解」，通過殺手锏題目能很大程度提高通過面試的概率。 「偶爾少數(shù)題目不會并不一定會掛掉，調整好心態(tài)繼續(xù)答好后面的題目。」一分耕耘一分收獲，希望大家能收獲到滿意的Offer。