背景
和很多人一樣，我也是半路轉的前端。自己一開始是做服務端開發的，也在美團日常實習過一段時間。 在實習期間，主要就是設計資料庫表、Java/SpringBoot的CURD、提供RESTFul介面以及部署伺服器的一些工作。因為日常工作會與前端工程師們打交道，在那個時候發覺前端很酷，自己對服務端的開發確實不是很感興趣，以及到後面對JS的喜愛，讓我堅決的走上了前端的道路。
計算機基礎
萬丈高樓平地起，作為校招生，計算機基礎絕對是面試中的重中之重。
希望大家可以夯實基礎，不要抱有僥倖的心理。
資料結構與演算法
程式碼來自於LeetCode
基本的資料結構
- 陣列
- 連結串列
這兩個資料比較的簡單，陣列可以結合JS的 Array 來學習。
而連結串列的結構如下
function ListNode(val) {
this.val = val;
this.next = null;
}
複製程式碼樹
樹的話要掌握以下幾種結構
- 二叉樹
- 哈夫曼樹
- 二叉搜尋樹
- AVL樹
- 2-3樹
- 紅黑樹
樹的結構如下
function TreeNode(val) {
this.val = val;
this.left = this.right = null;
}
複製程式碼樹涉及的演算法
- 前序遍歷、中序遍歷、後序遍歷、層次遍歷
- 每種樹查詢某個結點的時間複雜度
- 每種樹增加或刪除結點的需要的步驟
圖
圖的表示法
- 鄰接表
- 鄰接矩陣
圖涉及的演算法
- 最小生成樹
- 最短路徑
- 並查集
查詢演算法
- 遍歷
- 二分查詢
排序演算法
- 插入排序(近乎有序的情況下效率很高)
- 選擇排序
- 氣泡排序
- 歸併排序
- 快速排序
面試前端不會有什麼太高深的演算法，掌握基礎就好了
書籍推薦:
演算法(第4版) [Algorithms Fourth Edition] 人民郵電出版社
計算機網路
計算機網路的知識點比較多，但是針對面試的話，考察的點主要有如下幾個
- OSI7層模型
- 應用層協議，HTTP與HTTPS，DNS
- 傳輸層協議，TCP與UDP
- 網路層協議，IP
協議的話，主要考察這些方面
- HTTP具體的內容、請求型別，HTTP與HTTPS的區別
- DNS的具體流程
- TCP與UDP的異同，兩個協議的具體內容，TCP連線建立與斷開的流程、TCP擁塞控制
計算機網路部分只要瞭解常用的知識，自己能對網路有個感性的認識即可。有條件的話，可以看一下推薦的這本書，是自己當時的教材，講得非常生動，翻譯得也很好。
書籍推薦:
計算機網路：自頂向下方法(原書第7版) 機械工業出版社
作業系統
每天都在作業系統上工作，如果不瞭解程式是怎麼在系統上跑起來的，也說不過去吧？理解了作業系統的知識，雖然說沒有什麼直接的用處，但是我們在寫程式的時候，會通透很多。
程式與執行緒
程式是對執行時程式的封裝
- 程式和執行緒以及它們的區別
- 程式間的通訊的幾種方式
- 執行緒同步的方式
- 什麼是死鎖？死鎖產生的條件
- 死鎖的處理
- 程式有哪幾種狀態
- 作業系統中程式排程策略有哪幾種
記憶體管理
程式是要裝進記憶體，才能執行起來的
- 分頁和分段有什麼區別
- 什麼是虛擬記憶體
- 頁面置換演算法
作業系統還有不少的知識，但是就面試來說，考察的東西就以上的幾個知識點，有興趣可以看書慢慢補全
推薦書籍:
計算機作業系統(湯小丹) 西安電子科技大學出版社
計算機基礎這一塊主要的部分其實差不多了，還有像《編譯原理》《計算機組成原理》這兩門課，考察的點比較少，例如 詞法分析 、有限狀態機以及原碼/補碼/反碼、浮點數表示法 、進位制轉換等等，遇到了再進行鍼對性的複習即可。
前端基礎
HTML
說實話，這部分考察的東西不是很多，主要以下幾點
- HTML的解析過程
- HTML5提供的新API，語義化，
WebStorage等等
CSS
CSS基礎
- 塊狀元素與行內元素
- 盒子模型
- 浮動與定位
- 瀏覽器是怎樣解析CSS選擇器
複雜一點的
- BFC
- Flex佈局
- Grid佈局
- n行自適應
- 垂直居中的多種方式
- 重排和重繪
CSS3新功能
- background
- 動畫
個人的看法是，對於CSS的學習，不要太鑽牛角尖，因為CSS是一門有魅力但是又很複雜的語言。能夠把上面的幾個知識點理解透徹，融會貫通，相信面試官也不會在CSS方面刁難你了。
JavaScript
說實話，相對於HTML和CSS，JS才是前端面試的重點
JS基礎
- 基本的語法與特性
- 基本型別
- 引用型別
- 變數
- 方法
- 立即執行函式表示式
- 作用域
- 閉包
- 原型
- Ajax與跨域
- DOM
- BOM
以上幾點，都是JavaScript的重中之重。別再看網上JS的入門教程了，強烈給大家推薦這本書，非常適合入門者
JavaScript高階程式設計（第3版）
JS進階
JS的進階主要關注的部分是：作用域、閉包、原型以及一些常見方法的實現
- 詞法作用域的含義
- 執行上下文
- 作用域鏈
this的指向- 變數物件
- 原型鏈深入
call、apply、bind的實現
推薦書籍：
你不知道的JavaScript
ES6
現在ES6已經非常普及了，作為不過時的前端，還是需要了解
ES6基礎
- let / const
- 模組化語法
- 物件擴充套件
- Class 與 繼承
- 函式擴充套件
- 箭頭函式
- Set和Map
ES6新物件
- Promise
- Iterator
- Generator
- Decorator
- Proxy
以及一些新標準的語法
- async/await
ES6的基本語法，面試會考察一些常用的，如果不瞭解也不用太糾結，畢竟只是API。
推薦書籍：
ES6標準入門(阮一峰)
前端工具
框架
這裡我把常用的前端框架 React 和 Vue 也算在工具裡面了，因為本人畢竟熟悉 React，所以下面會針對 React 來展開，其它框架的考察的知識點也類似
React
- React的基本用法與常見API
- JSX語法
- 元件、資料流、生命週期
- React獲取真實DOM
- React事件系統
- 受控/非受控元件
- 樣式處理
- 高階元件
- 效能優化方法
setState與diff演算法原始碼
Redux
- 具體流程
- 實現原理
react-redux的用法
Vue
其實 Vue 全家桶我只會一些常用的API以及雙向繫結的實現原理，就不展開了。
面試官一般不會專門去問你框架的知識，除非你自己的專案裡面使用過，要考察一下你瞭解到什麼成都。如果不瞭解一點框架原始碼的知識，只提API，是沒有什麼亮點的，因為大家都會。
前端路由
前端路由基本的思想就是根據路徑去匹配對應的元件，然後用元件裡面的內容去替換頁面裡面需要路由的內容
- Hash模式
- History模式
打包工具
對打包工具不會有太多的考察，一般來說使用過webpack(功能強大)就夠了
- 配置檔案的寫法
- 常用loader
- 常用plugins
- webpack-dev-server
Node.js
前端工具，其實都是建立在Node.js的基礎上的，所以這一塊也要了解
- CommandJS規範
- npm 指令碼
- Node.js 常用的模組
- 服務端框架(有了解過會比較好)
Babel
JS的轉譯工具，會用即可
- 轉譯ES6
- 轉譯JSX
- 自己定義的一些轉譯規則等等
其它修煉方式
1. 看原始碼
很多前端同學覺得，前端沒必要刷題，因為工作足夠簡單。確實，引用 閏土小叔 的一句話
Vuecli一把梭真的爽的一筆，再引個elementui，只要搜尋引擎玩的6，寫程式碼根本不需要智力
但是，我們有想過這些問題嘛
- 如何從零開始搭建一個腳手架呢？
- 如何實現一個類似React的檢視層框架呢？
- 如何提高diff演算法的效率？
這些工具都是世界上最優秀的JS大師耗費多年心血寫出來的，直接開源給你看都不想看嘛？
看不懂，直接看網上的部落格唄。
2. LeetCode
直接說刷題的好處
- 讓你對JS更加熟悉，不再是讀讀背背
- 深入理解資料結構與演算法
- 鍛鍊和保持編碼能力
- 面試要考
- AC的快感
刷LeetCode，對編碼能力提升真的有很大幫助。從零開始刷滿50題，寫起JS來絕對是不一樣的體驗。入門的話，可以看一下推薦的這本書
劍指offer
《劍指offer》加上 LeetCode ,題量可以保持200道的話，已經很不錯了。當然，面試出重複題目的概論不高，最主要是提供一點思路。
後續...
篇幅關係，後面會再更新一些基礎知識之外的常見考點，如果有什麼錯誤或者遺漏，歡迎指正。