其實，十年前，在業界前端開發都不配叫工程師，因為很多人感覺前端開發的工作很簡單，就是寫個樣式，設計師就順便把這個活干了，所以，當時前端開發在程序員心里地位是很低的。
但是，隨着移動互聯網的發展，隨着前端和移動端相結合，大前端概念應運而生的同時，前端面對的工作是越來越復雜，尤其是在前后端分離的今天，前端不僅僅要應對界面的開發，也涉及到復雜的業務邏輯的處理，對於前端的開發要求是越來越高了。
我順便要為前端工程師正名：前端工程師的工作量，相對於后端來講比較大一些，不僅僅要應對前端界面和設計，以及應對產品經理的挑剔，還要跟后端工程師確定交互的數據格式和接口。更重要的是前端各種瀏覽器的界面的適配，大前端引發導致的還要適配移動端的工作，相對於后端生態的穩定，完善和生命周期長，前端框架和技術生命周期更短，這就意味着前端工程師要不斷的學習和更新自己的知識，給前端工程師的壓力就越來越大。
所以，做前端是很厲害的。
那前端學習到什么水平可以出去找工作呢？我分享一個前端學習路線圖，如下：
我這里分為三個階段：
第一階段：基礎學習階段
其實前端學習的東西挺多的，我們需要學習前端的開發語言，用於處理業務邏輯的：JavaScript，用於畫界面的標記語言 HTML，以及用於美化界面的 CSS 。這是第一個基礎階段必須要學的。
我認為在第一個階段最重要的學習是：JavaScript 和 CSS ，我並不是說 HTML 不重要，它很重要，但是相比去 JS 和 CSS ，其實 HTML 作為標記語言相對比較簡單。JS 幫你處理復雜的業務邏輯，CSS 可以提升界面美化的性能，總之，JS 和 CSS 為你后期在性能優化的處理上會有很大的幫助，所以這兩個東西的學習，基礎階段必須重視。
第二階段：中級實戰階段
你掌握了這個階段的學習，其實你就可以有能力出去找工作了。
需要掌握的知識算是基礎提高課，HTML5+CSS3和ES6+TypeScript，這些需要了解一下， TS 是趨勢，這里的 H5，CSS3，ES6，TS 是基礎學習階段的升級版本，這些需要你學習的同時，如果能夠達到找工作的水平，還必須會其中一種框架：Vue，React，Angular ，這三大主流框架當中的一種。
其實，傳統的 JQuery 和 DOM 相關的知識點也需要了解一下，雖然現在用的不多了。
當然了，相對來講這三種框架 Vue 是華人開發的，文檔是中文的，中國人學習來比較快，入門也比較低。所以，很多人都會學習 Vue ，國內用 Vue 前端框架的公司也很多。
如果你通過前面基礎學習階段的學習，可以熟練使用 JS ，CSS，H5 的同時，又能掌握了一個開發框架，那么你就達到前端可以找工作的水平了。
當然了，這僅僅只是達到找工作的水平了，如果你想在前端可以有更好的發展，還得繼續深入。
第三階段：高級進階階段
想要前端更進一步的發展，就必須好好學習一下瀏覽器內部運行的原理，掌握一些常用的設計模式，做到前端工程化，也就是：代碼模塊化、功能組件化，打包、構建、發布自動化、流程化。
在性能優化方面很重要，網站性能優化、SEO 和 服務器端的基礎知識也是必須掌握的。包括代碼的可維護性、組件的易用性、分層語義模板和瀏覽器分級支持。
這些高級功能必須掌握，這樣知識掌握了，才能讓你寫出一個高效率，高性能的頁面，這是我們前端開發工程師的追求。
你看這三個階段涉及的知識是不是很多，很雜呢？這三個階段不僅僅前端工程師一個學習路線，更是一個進化，進階的過程，我們前端的學習在未來地位會越來越高，需要的技能和要求也會越來越復雜。前端學習最重要的是按照路線圖進行系統化的學習。
不像我們十年前學習那么痛苦，現在的人學習很方便，因為現在網上有很多的學習資料，有很多不錯的系統課程可以幫助大家更加高效的去學習和掌握實用技能，可以少走很多彎路。
作為一個前端工程師過來人的經驗來講，前端的學習由於其前端在整個軟件開發工程中地位的上升，其扮演的角色越來越重要，面對的情況越來越復雜，所以，需要掌握的前端知識也很雜，如果你沒有系統化的學習前端知識的能力，建議大家一定要找合適的課程去系統化的學習，因為這對於學習效率來講很重要。自己學太容易走彎路了，前端更新迭代很快，效率和節省時間的學習方法才是王道。
金三銀四馬上就快到了，不知道大伙是不是已經在准備春招面試了呢，准備得咋樣了呢，面試題復習得怎么樣了呢？
如果你感覺在基礎知識上面還比較薄弱的話，不如來刷一刷這套《前端校招面試題精編解析大全》吧，祝你順利。
HTML
- 瀏覽器頁面有哪三層構成，分別是什么，作用是什么?
- HTML5的優點與缺點？
- Doctype作用? 嚴格模式與混雜模式如何區分？它們有何意義?
- HTML5有哪些新特性、移除了哪些元素？
- 你做的網頁在哪些瀏覽器測試過,這些瀏覽器的內核分別是什么?
- 每個HTML文件里開頭都有個很重要的東西，Doctype，知道這是干什么的嗎？
- 說說你對HTML5認識?（是什么,為什么）
- 對WEB標准以及W3C的理解與認識?
- ......
CSS
- 解釋一下CSS的盒子模型？
- 請你說說CSS選擇器的類型有哪些，並舉幾個例子說明其用法？
- 請你說說CSS有什么特殊性?（優先級、計算特殊值）
- 常見瀏覽器兼容性問題與解決方案？
- 列出display的值並說明他們的作用？
- 如何居中div, 如何居中一個浮動元素?
- 請列舉幾種清除浮動的方法(至少兩種)?
- block，inline和inlinke-block細節對比？
- 什么叫優雅降級和漸進增強？
- 說說浮動元素會引起的問題和你的解決辦法
- 你有哪些性能優化的方法？
- ......
JavaScript
- js的各種位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的區別？
- js拖拽功能的實現
- 異步加載js的方法
- js的防抖與節流
- 說一下閉包
- 說說你對作用域鏈的理解
- JavaScript原型，原型鏈 ? 有什么特點？
- 請解釋什么是事件委托/事件代理
- Javascript如何實現繼承？
- 函數執行改變this
- babel編譯原理
- 函數柯里化
- 說一下類的創建和繼承
- 說說前端中的事件流
- 如何讓事件先冒泡后捕獲
- 說一下圖片的懶加載和預加載
- js的new操作符做了哪些事情
- 改變函數內部this指針的指向函數（bind，apply，call的區別）
- Ajax解決瀏覽器緩存問題
- ......
由於文章篇幅有限，只能展示部分面試題，有需要的點擊這里免費領取題目+解析PDF。
Vue
- Vue中 key 值的作用
- Vue 組件中 data 為什么必須是函數？
- vuex的State特性是？
- 介紹一下Vue的響應式系統
- computed與watch的區別
- 介紹一下Vue的生命周期
- 為什么組件的data必須是一個函數
- 組件之間是怎么通信的
- Vue.cli中怎樣使用自定義的組件？有遇到過哪些問題嗎？
- Vue如何實現按需加載配合webpack設置
- 簡單描述每個周期具體適合哪些場景
- scss是什么？在Vue.cli中的安裝使用步驟是？有哪幾大特性？
- 聊聊你對Vue.js的template編譯的理解？
- Vue 路由跳轉的幾種方式
- Vue如何實現按需加載配合webpack設置?
- Vue的路由實現：hash模式和history模式
- Vue與Angular以及React的區別？
- Vue路由的鈎子函數
- 什么是Vue的計算屬性？
- ......
React
- 介紹一下react
- React單項數據流
- react生命周期函數和react組件的生命周期
- react和Vue的原理，區別，亮點，作用
- reactJs的組件交流
- 有了解過react的虛擬DOM嗎，虛擬DOM是怎么對比的呢
- 項目里用到了react，為什么要選擇react，react有哪些好處
- 怎么獲取真正的dom
- 選擇react的原因
- react的生命周期函數
- setState之后的流程
- react高階組件知道嗎？
- React的jsx，函數式編程
- react的組件是通過什么去判斷是否刷新的
- 如何配置React-Router
- 路由的動態加載模塊
- Redux中間件是什么東西，接受幾個參數
- redux請求中間件如何處理並發
瀏覽器
- 跨標簽頁通訊
- 瀏覽器架構
- 瀏覽器下事件循環(Event Loop)
- 從輸入 url 到展示的過程
- 重繪與回流
- 存儲
- Web Worker
- V8垃圾回收機制
- 內存泄露
- reflow(回流)和repaint(重繪)優化
- 如何減少重繪和回流?
- 一個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發生了什么？
- localStorage 與 sessionStorage 與cookie的區別總結
- ......
服務端與網絡
- HTTPS和HTTP的區別
- HTTP版本
- 從輸入URL到頁面呈現發生了什么？
- HTTP緩存
- 緩存位置
- 強緩存
- 協商緩存
- 緩存的資源在那里
- 用戶行為對瀏覽器緩存的影響
- 緩存的優點
- 不同刷新的請求執行過程
- ......
算法與數據結構
- 二叉樹層序遍歷
- B樹的特性，B樹和B+樹的區別
- 尾遞歸
- 如何寫一個大數階乘？遞歸的方法會出現什么問題？
- 把多維數組變成一維數組的方法
- 說一下冒泡快排的原理
- Heap排序方法的原理？復雜度？
- 幾種常見的排序算法，手寫
- 數組的去重，盡可能寫出多個方法
- 如果有一個大的數組，都是整型，怎么找出最大的前10個數
由於文章篇幅有限，只能展示部分面試題，有需要的點擊這里免費領取題目+解析PDF。
掌握如上基本可以橫行了，如何霸道呢，那就是框架和打包工具的使用和原理知識了~~~后續詳解
透漏幾個面試小技巧
（1）簡歷寫的賊**，看了簡歷各種框架會用，什么webpack/vue全家桶、react全家桶、rollup/node都有，一問基礎就涼了。 ~~~~框架的底層還是js基礎，基礎不扎實，面試兩行淚。
（2）簡歷的技術點要寫自己擅長的，面試一妹子，2年工作經驗，寫着深刻了解vue原理，一個問題nextTick是怎么可以獲取到更新后的DOM的，很簡單，不知道~當然會扣分。問基礎很多不知道，涼~
（3）面試要誠實，不可以浮躁，不會一些知識點也沒什么問題。一精神小伙，問rem響應式布局原理，js判斷怎么實現的，不知道~_~,問我可不可跳過這個題，最近沒怎么看。 我：最近在看哪方面？jsxh:前端工程化東西？ 我：心里想很浮躁~，說一下common.js/es6模塊化方案的不同？多個項目文件共nodeModules如何做工作區間？如何監聽git提交？ts解決哪些問題？ 涼~~ 工程化是個很大的一個問題，從開發，編譯，部署，上線都是有很多的點
（4）項目說的很到位，手寫一個節流emmm,手寫一個深拷貝emmm,手寫一個promise.all，~~emmmm
(5）遇到幾個不錯的候選人，雖然一些知識點和手寫代碼能力差一些，人很靠譜很nice，看到了以前初級開發工程師的我，我會給機會通過,不是技術會把人卡的死死的。
總結下來基礎和手寫代碼能力很重要很重要很重要~，框架做的再好底層也是基於基礎去做的，整個了各種知識點、設計模式等。至於框架問哪些問題，如何准備，下回分解。