前言
“金三銀四”再過幾天就到了，又到了一年一度的大型**“程式猿跳槽大會”**。作為大齡IT從業者的我們，每到這個時候就會想起年輕時的自己，為了能搞定面試官，通宵背題庫，背定義，四處收集面試真題…每次都準備的滿滿當當，可一到了面試的時候，就會發現與自己預想的完全不一樣。
直到後來經曆了這麼多年，自己也從曾經的應聘者變成了面試者，才終于明白這樣的道理：面試官遠遠要比應聘者狡猾得多。
不按套路出牌是面試官的“基本素養”，多年的工作經驗使他們完全不需要提前準備一些特定的題目和答案，随便的幾個問題，就可以通過回答對其了解個大概。
我與幾個面試官朋友，從面試官的角度進行分析，幫助應聘者了解面試官的想法，揭秘大廠面試官内心：我該如何“刁難”面試者。
面經分享
第一部分是我前端面試的經驗總結，第二部分是我認為比較有思考空間的題目
經驗總結
- 一份漂亮的履歷，需要包括以下部分（排版由上而下）
- 個人亮點（專精領域，個人部落格，開源項目）
- 教育經曆（畢業院校，在校經曆、榮譽）
- 工作經曆（實習）
- 項目經曆
- 專業技能
- 紮實的前端基礎，比如你知道
-
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'/>
-
flex:1
-
Generator
-
- 熟悉一門前端架構（React 優先）
- 勤刷 LeetCode 的算法題，熟悉掌握相應的資料結構如常見的連結清單、棧、隊列、哈希表、樹
- 熟悉網絡基礎、Git 指令、Linux 指令
- 多去了解前端的新趨勢（Flutter，PWA，Serveless，GraphQL，CSS Houdini）
- 要有自信，讓面試官感受到你對前端的熱愛
面試題
由于面試的公司和次數略多，老生常談的面試題就不放出來了，也不按公司劃分面試題了
算法題
大多出自 LeetCode ，LeetCode HOT 100，最好自己過一遍，了解最優解
程式設計題
- 用 Class 實作 EventEmitter，要求擁有 on，once，emit，off 方法
- 實作 deepClone，要求能成功克隆帶有循環引用的對象
- CSS 實作一個寬度為浏覽器1/2，寬高比為 2:1 的盒子
- 實作 sum 函數
sum(1)(2)(3) == 6; // true sum(1, 2, 3) == 6; // true 複制代碼 - 實作 sum2 函數
console.log(sum2(1)(2)(3)()) // 6 console.log(sum2(1, 2, 3)()); // 6 複制代碼 - 用尾遞歸實作 fibonacci 數列
- 實作 co 函數
- 實作以下功能，當對一個 arr 做 push 操作時，會自動列印一行提示消息
const arr = [1,2,3]; arr.push(4); // arr pushed a new element: 4 複制代碼 - 代碼實作中斷 Promise 的運作
- 有一組圖檔，實作後一張圖檔必須等到上一張圖檔加載完畢，才能開始加載
- 為 Test 類添加方法，列印指定内容
class Test { constructor() { this.person = { name: "jack", age: 38, position: "CTO" }; } // ...... } const test = new Test(); for (const ele of test) { console.log(ele); } // [ 'name', 'jack' ] // [ 'age', 38 ] // [ 'position', 'CTO' ] 複制代碼 - 實作 handler 函數，遇到 b 和 ac 都要去除
console.log(handler("aabaa")); // 'aaaa' console.log(handler("abaccbc")); // 'c' console.log(handler("aaccc")); // 'c' console.log(handler("aaabccc")); // '' 複制代碼 - 實作 decode 函數
decode('HG[3|B[2|CA]]F') === 'HGBCACABCACABCACAF' // true 複制代碼 - 實作 _bind 函數，使列印 success
function Animal(name, color) { this.name = name; this.color = color; } Animal.prototype.say = function() { return `I'm a ${this.color} ${this.name}`; }; const Cat = Animal._bind(null, "cat"); const cat = new Cat("white"); if ( cat.say() === "I'm a white cat" && cat instanceof Cat && cat instanceof Animal ) { console.log("success"); } 複制代碼 - CSS 實作圓環進度條效果
- 說出以下列印内容
console.log(-1 >>> 32); console.log(-1 << 32); console.log(1 >> 32); console.log(5 >>> 2); var a = { n: 1 }; var b = a; a.x = a = { n: 2 }; console.log(a.x); console.log(b.x); 複制代碼
簡答題
- 實作 F12 開發者工具的檢查（inspect）功能
- 實作 把一個盒子從一個區域拖放到另一個指定區域中
- 盒子一部分在區域内，一部分在區域外，該如何處理
- 簡述幾個封裝好的關鍵方法
- 開發完的項目，在微信浏覽器上白屏，該如何排查
- 如何統計一個頁面上哪些區域使用者點選次數最多
- 如何根據按鈕級别的粒度，設計使用者權限，例如：A 可以通路按鈕，B 不可以
- 如何對一個網頁内容進行自動化截屏，如何解決登入限制
- A元件包裹B元件，B元件包裹C元件，它們的 componentDidMount 觸發順序如何
- React setState 到底是異步還是同步的，其原理是什麼
- React Hooks 的使用有哪些注意事項
- React 的合成事件機制
- 簡述 React 類元件的新老生命周期，談談 React Fiber 架構的引入
- 詳細介紹一下 Redux 狀态管理，如何和 React 元件連接配接
- React HOC 的用途，什麼是裝飾器模式
- Mobx 的實作原理
- Koa 的中間件原理，介紹一下 compose 函數
- 介紹 NodeJS 的 EventLoop 機制，process.nextTick() 的作用
- NodeJS 是單線程還是多線程，都有哪些線程，JS 為什麼是單線程的
- CommonJS 的實作原理
- NodeJS 中存在哪些流，怎麼了解 pipe() 及其優點
- require 的解析規則
- 介紹一下負載均衡，NodeJS 的 cluster 和 child_process 是什麼
- webpack 是如何進行打包的
- webpack 動态 import 是如何實作的
- 如何編寫自己的 loader 和 plugin
- 簡述 webpack 配置檔案中的 externals，UMD 了解嗎
- 介紹一下 DNS，什麼是疊代查詢和遞歸查詢，什麼是一級域名、二級域名
- HTTP 首部（Header）和實體（Body）的分隔符是什麼，用正則如何比對
- HTTPS 的詳細過程，什麼是數字證書，消息摘要，非對稱加密，Hash 算法
- 如何實作 Tab（标簽）頁之間，用戶端與伺服器的實時通訊
- HTTP 狀态碼：301、302、307 的差別
- 簡述浏覽器的垃圾回收機制，什麼是強引用、弱引用、循環引用
- 簡述 requestAnimationFrame 和 requestIdleCallback 的作用
- CSS 選擇器的解析順序是從右到左，還是從左到右，為什麼
- click 事件在移動端有什麼問題，如何解決，你在移動端還遇到那些坑
- 簡述 JWT 的生成過程和優缺點，怎麼主動登出 JWT 和續簽 JWT
- 通過什麼檢測網站的性能，有哪些名額
- 如何檢視網站的 Ajax 請求是由哪行代碼發出的，一個元素都綁定了哪些事件，Chrome 調試面闆 F8,F10,F11 各代表什麼
- 說說你對 jpg、gif、jpeg、png、webp、base64 URL 的了解
寫在最後
對程式員來說，很多技術的學習都是“防禦性”的。也就是說，我們是在為未來學習。我們學習新技術的目的，或是為了在新項目中應用，或僅僅是為了将來的面試。但不管怎樣，一定不能“止步不前”，不能荒廢掉。
![
文章以下内容會給出阿裡與美團的面試題（答案+解析）、面試題庫、Java核心知識點梳理等，需要這些文檔資料的，直接點選我的GitHub免費領取~
va核心知識點梳理等，需要這些文檔資料的，直接點選我的GitHub免費領取~