從零開始準備的前端春招實習(已拿頭條阿里騰訊提早批offer)

背景

和不少人同樣，我也是半路轉的前端。本身一開始是作服務端開發的，也在美團平常實習過一段時間。 在實習期間，主要就是設計數據庫表、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道的話，已經很不錯了。固然，面試出重複題目的概論不高，最主要是提供一點思路。

後續...

篇幅關係，後面會再更新一些基礎知識以外的常見考點，若是有什麼錯誤或者遺漏，歡迎指正。