準備面試簡歷

對於簡歷來說，不需要非常的複雜，簡歷就是要以比較簡潔的方式，讓閱讀簡歷的人能夠快速、準確的捕捉到有用的資訊。

• 頁數：1~2頁即可
• 格式：PDF 最好，避免出現格式錯誤

個人資訊

• 姓名
• 年齡
• 專業
• 學歷
• 聯絡方式：手機+郵箱

個人資訊三要素：姓名、電話、郵箱是必寫的。聯絡方式是 HR 以及面試官能聯絡到你的途徑，如果因為電話和郵箱聯絡不上而失去面試機會，真的是太虧了。其它的一些個人資訊：政治面貌、年齡、工作年限等資訊，可以根據具體情況而定。

教育經歷

將學校、專業、入學時間/畢業時間等寫清楚就好了。
教育經歷對實習生/應屆生來說是重點，社招就算非重點了。

實習 / 工作經驗

HR 和麵試官比較關心的一般來說是以下幾點：

• 公司名稱：有大廠經驗會比較加分
• 工作崗位
• 在職時間：關心的是你工作是否穩定，有沒有頻繁跳槽
• 主要工作：簡述一下你在公司做了什麼事，具體在專案經歷體現

專案簡歷

專案經歷對於開發來說是一份簡歷最重要的部分！

注意的點：

1. 一定得是自己做的專案，不要看著別人專案厲害，就拿來吹，面試和背調環節都可能穿幫的。

2. 對於這個專案，你必須在業務和技術實現上都非常熟悉：

• 業務上：這個專案的業務背景是什麼，在業務上有什麼比較厲害的地方，推動了業務如何執行等等
• 技術實現上：這個專案的整體技術實現思路是怎樣的，專案中用了什麼比較牛逼的技術，解決了什麼比較困難的問題等等

3. 有亮點的

• 這個專案做了什麼厲害的事情
• 你在專案裡做了什麼厲害的事情
• 用了什麼厲害的技術解決了什麼困難的問題
• ...

4. 遇到比較難解決問題的

• 遇到了什麼問題
• 在這過程中你是如何排查問題的
• 最終是如何解決這個問題的

專業技能

這裡有幾個問題，也是寫專業技能的時候最忌諱的：

• 技術名詞注意書寫正確
• 技術名詞注意大小寫
• 特別注意 瞭解、熟悉、精通 的使用

瞭解

• 會使用/用過
• 瞭解其思想
• 沒有深入瞭解過

熟悉

• 有大量實踐
• 有深入瞭解過原理，甚至閱讀過原始碼
• 遇到複雜問題能夠快速想出解決方案

精通

• 深入理解原理
• 大量複雜場景實踐經驗
• 大量相關原始碼經驗

準備面試複習

先來看看前端路線圖：

前端學習路線圖完整版：【點選領取】

前端基礎

① HTML

• html 語義化
• canvas 相關
• svg 和 canvas 的區別？
• html5 有哪些新特性？
• 如何處理 HTML5 新標籤的瀏覽器相容問題？
• HTML 全域性屬性(global attribute)有哪些

② CSS

• 讓一個元素水平垂直居中，到底有多少種方案？
• 浮動佈局的優點？有什麼缺點？清除浮動有哪些方式？
• 使用 display:inline-block 會產生什麼問題？解決方法？
• 佈局題：div 垂直居中，左右10px，高度始終為寬度一半
• 盒模型
• CSS 如何進行品字佈局
• CSS 如何進行聖盃佈局
• CSS 如何實現雙飛翼佈局？
• 什麼是 BFC？
• 觸發條件
• BFC 渲染規則
• …

③ JavaScript

• JS 原始資料型別有哪些？引用資料型別有哪些？
• null 是物件嗎？為什麼？
• '1'.toString() 為什麼可以呼叫？
• 0.1+0.2 為什麼不等於 0.3？
• 什麼是 BigInt? 為什麼需要 BigInt?
• 如何建立並使用 BigInt？
• typeof 是否能正確判斷型別？
• instanceof 能否判斷基本資料型別？
• 能不能手動實現一下 instanceof 的功能？
• Object.is 和===的區別？
• [] == ![] 結果是什麼？為什麼？
• JS 中型別轉換有哪幾種？
• == 和 ===有什麼區別？
• 物件轉原始型別是根據什麼流程執行的？
• 如何讓 if(a == 1 && a == 2) 條件成立？
• 什麼是閉包？
• 閉包產生的原因?
• 閉包有哪些表現形式?
• 如何解決下面的迴圈輸出問題？
• 原型物件和建構函式有何關係？
• 能不能描述一下原型鏈？
• JS 如何實現繼承？
• 函式的 arguments 為什麼不是陣列？如何轉化成陣列？
• forEach 中 return 有效果嗎？如何中斷 forEach 迴圈？
• JS 判斷陣列中是否包含某個值
• JS 中 flat—陣列扁平化
• 什麼是高階函式
• 陣列中的高階函式
• 實現陣列 map 方法
• 模擬實現一個 new 的效果
• 模擬實現一個 bind 的效果
• 實現一個 call / apply 函式
• 談談你對 JS 中 this 的理解
• JS 中淺拷貝的手段有哪些？
• 寫一個完整的深拷貝
• 資料是如何儲存的？
• V8 引擎如何進行垃圾記憶體的回收？
• 描述一下 V8 執行一段 JS 程式碼的過程？
• 巨集任務 (MacroTask) 引入
• 微任務 (MicroTask) 引入
• 理解 EventLoop：瀏覽器
• 理解 EventLoop：nodejs
• nodejs 和瀏覽器關於 eventLoop 的主要區別
• 關於 process.nextTick 的一點說明
• nodejs 中的非同步、非阻塞 I/O 是如何實現的？
• JS 非同步程式設計有哪些方案？
• 能不能簡單實現一下 node 中回撥函式的機制？
• Promise 憑藉什麼消滅了回撥地獄？
• …

計算機網路

① HTTP 協議

• HTTP 報文結構是怎樣的？
• HTTP 有哪些請求方法？
• GET 和 POST 有什麼區別？
• 如何理解 URI？
• 如何理解 HTTP 狀態碼？
• 簡要概括一下 HTTP 的特點？HTTP 有哪些缺點？
• 對 Accept 系列欄位瞭解多少？
• 對於定長和不定長的資料，HTTP 是怎麼傳輸的？
• HTTP 如何處理大檔案的傳輸？
• HTTP 中如何處理表單資料的提交？
• HTTP1.1 如何解決 HTTP 的隊頭阻塞問題？
• 對 Cookie 瞭解多少？
• 如何理解 HTTP 代理？
• 如何理解 HTTP 快取及快取代理？
• 為什麼產生代理快取？
• 源伺服器的快取控制
• 客戶端的快取控制
• 什麼是跨域？瀏覽器如何攔截響應？如何解決？
• 傳統 RSA 握手
• RSA 和 ECDHE 握手過程的區別
• …

② TCP 協議

• 能不能說一說 TCP 和 UDP 的區別？
• 說說 TCP 三次握手的過程？
• 為什麼是三次而不是兩次、四次？
• 三次握手過程中可以攜帶資料麼？
• 說說 TCP 四次揮手的過程
• 為什麼是四次揮手而不是三次？
• 說說半連線佇列和 SYN Flood 攻擊的關係
• 如何應對 SYN Flood 攻擊？
• 介紹一下 TCP 報文頭部的欄位
• 說說 TCP 快速開啟的原理(TFO)
• 能不能說說TCP報文中時間戳的作用？
• TCP 的超時重傳時間是如何計算的？
• 能不能說一說 TCP 的流量控制？
• …

③ 瀏覽器

• 說一說瀏覽器快取?
• 說一說瀏覽器的本地儲存？各自優劣如何？
• 說一說從輸入URL 到頁面呈現發生了什麼？（網路）
• 談談你對重繪和迴流的理解
• 能不能說一說 XSS 攻擊？
• HTTPS 為什麼讓資料傳輸更安全？
• …

前端框架

① Vue 框架

• 什麼是 MVVM？
• mvvm 和 mvc 區別？它和其它框架（jquery）的區別是什麼？哪些場景適合？
• 元件之間的傳值？
• Vue 雙向繫結原理
• 描述下 vue 從初始化頁面–修改資料–重新整理頁面 UI 的過程？
• 虛擬 DOM 實現原理
• Vue 中 key 值的作用？
• Vue 的生命週期
• Vue 元件間通訊有哪些方式?
• vue 中怎麼重置 data?
• 元件中寫 name 選項有什麼作用？
• vue-router 有哪些鉤子函式?
• route 和 router 的區別是什麼？
• 說一下 Vue 和 React 的認識，做一個簡單的對比
• Vue 的 nextTick 的原理是什麼？
• Vuex 有哪幾種屬性?
• vue 首屏載入優化
• vuex
• …

② React 框架

• 區分真實 DOM 和虛擬 DOM
• 什麼是 React？
• React 的功能是什麼？
• 列出 React 的一些主要優點
• React 的侷限性是什麼？
• 什麼是 JSX？
• 對 Virtual DOM 有什麼瞭解？解釋它的工作
• 與 ES5 相比，React 的 ES6 語法有何不同？
• React 與 Angular 有何不同？
• 解釋 React 中 render（）的目的
• 如何將兩個或多個元件嵌入到一個元件中？
• 什麼是 Properties？
• React 中的狀態是什麼，如何使用？
• 區分狀態和道具
• 如何更新元件的狀態？
• React 中的箭頭功能是什麼？如何使用？
• 區分有狀態和無狀態元件
• React 元件的生命週期有哪些不同階段？
• 詳細解釋 React 元件的生命週期方法
• React 中有什麼事件？
• 如何在 React 中建立事件？
• 你對 React 中的引用有什麼瞭解？
• 如何在 React 中模組化程式碼？
• 在 React 中如何建立表單？
• 你對受控和非受控元件瞭解多少？
• 什麼是高階成分（HOC）？
• …

資料結構與演算法

① 連結串列

• 簡單的反轉連結串列
• 區間反轉
• 兩個一組翻轉連結串列
• K個一組翻轉連結串列
• 如何檢測連結串列形成環？
• 如何找到環的起點
• 合併兩個有序連結串列
• 合併 K 個有序連結串列
• 判斷迴文連結串列

② 棧和佇列

• 有效括號
• 多維陣列 flatten
• 普通的層次遍歷
• 二叉樹的鋸齒形層次遍歷
• 二叉樹的右檢視
• 完全平方數
• 單詞接龍
• 關於堆的說明
• 實現一個最大堆
• 實現優先佇列
• 前 K 個高頻元素
• 合併 K 個排序連結串列
• 什麼是雙端佇列？
• 滑動視窗最大值
• 棧實現佇列

③ 二叉樹

• 前序遍歷 / 中序遍歷 / 後序遍歷
• 最大深度 / 最小深度
• 對稱二叉樹
• 二叉樹的最近公共祖先
• 二叉樹的直徑
• 二叉樹的所有路徑
• 二叉樹的最大路徑和
• 驗證二叉搜尋樹
• 將有序陣列轉換為二叉搜尋樹
• 二叉樹展開為連結串列

前端學習路線圖，前端大廠面試手冊，更多前端資料：【點選這裡可免費領取哦！】(❤ ω ❤)