前端學習路線
前言
通過對前端知識進行一個評級，確定現在階段，然後提供清晰的學習路線，完成進階。希望可以通過這篇文章，可以幫助大家少走彎路。
目標：
瞭解自己的實力
明確不同階段的學習路線
大綱
對前端知識進行一次評級
level1階段
level2階段
JavaScript進階
Vue進階
瀏覽器原理
資料結構與演算法
設計模式
網路
效能優化
前端工程化
其他
總結
後續文章的輸出規劃
參考資料
對前端知識進行一次評級(定級賽)
level1 :
沒有接觸過前端，對於前端沒有什麼概念
level2 :
使用js,css,html可以完成簡單頁面的還原，但是還不會使用庫
level3 :
使用庫，比如說vue,jquery完成普通業務的開發，比如說一些活動落地頁和後臺管理頁面
level4:
可以熟練的進行平時的業務開發，但是對於JS高階，原始碼，瀏覽器原理，資料結構與演算法，設計模式，網路,前端工程之類的東西很迷茫，只知道一些大概的名詞。這個時候，我們就需要根據個人喜好來進行深入的研究了
level5:
這個層次我還沒達到，大概是一些架構，整體把控，大型專案構建，專案管理，資源分配等等能力了吧。
這是一個由術轉道的過程，已經不在專注於哪一個端，而在於對整體的把控了。（對這個階段沒有什麼認知，小聲逼逼）
level6:
頸椎病康復指南
在前端領域混了這幾年，總結了一套前端學習的精講視訊和學習路線，如果有對前端開發感興趣的夥伴，不管你是想轉行，或是大學生，還有工作中想提升自己能力的web前端黨，歡迎大家的加入我的前端開發交流群：603985993
希望大家誠心交流！，與企業需求同步。好友都在裡面學習交流，每天都會有大牛定時講解前端技術!也可以關注我的微信公眾號：【前端留學生】
每天更新最新技術文章乾貨。
level1階段
這一階段，需要補充一些基礎的前端知識，可以看點入門書籍
《Head First HTML與CSS（第2版）》
最好的入門書。看兩遍就對HTML & CSS 有個大概印象了
《JavaScript DOM程式設計藝術》
最好的JS入門書籍，一目瞭然地告訴你如何用JS操作DOM（這是瀏覽器端程式設計的基本功），還灌輸了最符合標準的程式設計理念
《JavaScript高階程式設計（第3版）》
學習基礎的JavaSrcipt語法
基礎的話可以看1-,8,10,11,13,21，22，23,24章節
level2階段
這一階段是對於一些類庫的使用
《JavaScript高階程式設計（第3版）》
沒錯，就是它，你還是需要再看一遍
《鋒利的jQuery》
入門必備，講JS最著名的庫——jQuery的，快速入門的書。光會原生JS不夠，還要會用庫，
Vue
Vue對於新手還是比較友好的（只看過Vue，不敢逼逼）。這個直接看官網的教程就可以了
官網教程
《ES6 入門教程》
線上版地址
起碼過一遍，瞭解ES6的基礎用法，代理那一部分可以先不看
JavaScript進階
這一部分，可以分成倆個部分
對於JS的高階用法
對於原理的掌握
高階用法
冴羽的部落格
關於js的一些講解通俗易懂
深入系列 對於js一些難點的講解，看的豁然開朗
專題系列 一些手寫程式碼的講解
underscore 系列
ES6 系列
函數語言程式設計指北
木易楊前端進階
類似於冴羽的部落格的部落格，也是對一些js難點的整理
(1.6w字)瀏覽器與前端效能靈魂之問，請問你能接得住幾個？（上）
(建議收藏)原生JS靈魂之問, 請問你能接得住幾個？(上)
(建議精讀)原生JS靈魂之問(中)，檢驗自己是否真的熟悉JavaScript？
(2.4w字,建議收藏) 原生JS靈魂之問(下), 衝刺 進階最後一公里(附個人成長經驗分享)r/> 中高階前端大廠面試祕籍，為你保駕護航金三銀四，直通大廠(上)r/> (中篇)中高階前端大廠面試祕籍，寒冬中為您保駕護航，直通大廠r/> (下篇)中高階前端大廠面試祕籍，寒冬中為您保駕護航，直通大廠
原理的掌握
《JavaScript高階程式設計（第3版）》
沒錯，就是它，你還是需要再看一遍（這已經是第n遍了）
《ES6 入門教程》
線上版地址
再來一遍
《你不知道的JavaScript》系列
《你不知道的JavaScript(上卷)》
內容：作用域和閉包以及this和物件原型
重要性： 這本書可以重點看下
《你不知道的JavaScript(中卷)》
內容：型別、語法、非同步和效能
關於型別，語法部分講得還可以
非同步的話可以去看《ES6標準入門》
效能部分的話，不推薦看
《你不知道的JavaScript(下卷)》
內容：JavaScript入門知識和對ES6及未來發展趨勢的展望
JavaScript入門知識部分可以看下，是對前倆本的總結以及一些語法的內容
ES6部分的話不推薦看
《深入理解ES6》
這本書可以在看完《ES6 入門教程》之後去看
《JavaScript 忍者祕籍》
一定要買第二版
Vue進階
剖析 Vue.js 內部執行機制
vue內部的基礎原理的理解，初級程度
《深入淺出Vue.js》，
作者每單介紹一個部分的時候，都會由最簡單抽象的一個demo，一步一步變成框架實際的樣子，最後拿你寫的demo和框架實際的對比，分析雙方優缺點。
Vue.js 技術揭祕
原始碼解析，中等程度
vue全面解析
超級詳細 - 逐行級別的分析
下載程式碼，然後使用elegant分支
瀏覽器原理
瀏覽器工作原理與實踐
生動有趣的講述了瀏覽器的原理，推薦看
《webkit技術內幕》
基本上講瀏覽器核心各個類的功能和呼叫關係，如果要深入去看的話，需要讀者一些C++基礎
瀏覽器的工作原理：新式網路瀏覽器幕後揭祕
對於瀏覽器的架構，還有瀏覽器整個解析渲染過程描述的比較詳細
深入瞭解現代web瀏覽器
文章為英文，比較詳細的說明瀏覽器工作原理
Inside look at modern web browser (part 1)
Inside look at modern web browser (part 2)
Inside look at modern web browser (part 3)
Inside look at modern web browser (part 4)
Rendering on the Web
Page Lifecycle API
Life of a Pixel
這個演講一開始是Chrome組新人入職的學習資料，給新人一個從高層次去看Chromium如何從HTML / CSS / JS 顯示到螢幕的網頁
資料結構與演算法
盜一張圖
最近在學習資料結構與演算法之美，上面是王爭老師推薦的書單，可以按照需求去讀對應的書籍
設計模式
《JavaScript設計模式與開發實踐》
推薦看下
湯姆大叔的部落格
深入理解JavaScript系列 裡面包含有各種深入以及設計模式
網路
《圖解http》
滿足日常的基本使用
入門級別
《圖解 tcp 協議》
入門級別
極客時間-透視 HTTP 協議
這個課程通過歷史，定義，安全，效能等多個方面講解了http協議
可以比較全面的瞭解網路知識
TCP/IP 詳解（第一卷）
深入講解的TCP/IP
效能優化
推薦的三本書籍，比較全面的進行效能優化
瀏覽器的優化可以看谷歌和MDN部分，比較深入，也和前端的比較貼近
《高效能網站建設指南》
《高效能網站建設進階指南》
《Web效能權威指南》
谷歌開發團隊的效能優化
針對瀏覽器部分進行效能優化，裡面從關鍵 RAIL 指標進行效能優化的分析，可以做參考
MDN效能優化
和谷歌類似，從瀏覽器角度進行效能優化
前端工程化
這部分還在計劃學習中，這裡可以參考LienJack的前端工程化部分
使用和基本概念
瞭解 loader、plugin，並且掌握一些基本常用的
瞭解 babel
參考資料：玩轉webpack
學會優化
體積優化：tree shaking、按需引入，程式碼切割
打包速度優化：快取、多執行緒打包、優化打包路徑
參考資料：
那些花兒，從零構建Vue工程
Webpack 4 配置最佳實踐
webpack4 的30個步驟打造優化到極致的 react 開發環境
原理
webpack構建步驟
細說 webpack 之流程篇
Webpack HMR 原理解析
從零實現webpack熱更新HMR
乾貨！擼一個webpack外掛(內含tapable詳解+webpack流程)
手把手教你擼一個 Webpack Loader
其他
JavaScript 正則表示式迷你書
前三章，滿足日常的基本使用
深入瞭解的話需要看剩下的東西
正則視覺化
TS入門教程
還真就是入門的文章
TypeScript Handbook（中文版）
看完入門課程，可以接下來看這個
總結
通過上面的介紹，大家應該對不同的階段有了清晰的路線了吧，希望大家可以在日後的職業生涯繼續馳騁吧。（申明，本文不是前端勸退文章）