導讀：2021Web前端開發學習路線圖
? 三大件學習
現在每年依舊有很多初級入門的前端開發。所以對初入門的朋友也給出一點意見。
剛入門的朋友，我覺得不應該一開始就學習像Vue、TypeScript、Webpack等知識。應該把重點放在CSS&HTML&JavaScript基礎知識的學習上。
CSS&HTML
對于剛入門的朋友我依舊建議先將CSS(3)&HTML(5)的知識點認真學習一遍。學習的途中最好是學習完一部分就自己在敲一遍代碼，加深自己的記憶。
當然如果你愿意，建議你可以先仿一個網站的靜態頁面（掘金、知乎等都可以），有一些屬性就可以了解他實際的實現場景。
當然剛開始敲代碼的時候還是不要過分依賴自動補全功能，一開始就使用自動補全對你記憶一些屬性時沒有幫助的；踏實點學習，日后會有回報的。
?
關于CSS(3)你需要了解的一些知識點
?盒模型（標準&IE）
?flex、float、NormalFlow等的理解
?CSS常用選擇器
?行內、內部、外部樣式的區別
?CSS層疊規則
?BFC與IFC的了解
?CSS3的transform、transition、animation等屬性的運用了解
?響應式布局的理解
HTML(5)你需要了解的一些知識點
說到HTML我想有很多人是div一把梭。因為div用的爽，不用擔心默認樣式。
有人說HTML語義化的優點很多，比如清晰的頁面結構、有利于SEO、便于團隊開發和維護；這些我都承認，不過我還是喜歡div一把梭。
?HTML語義化
?canvas
?本地存儲（localStorage、sessionStorage、cookie的理解）
?video和audio的使用
?應用緩存(cachemanifest)
JavaScript
JavaScript一直都是我們前端的基石，一定程度上JavaScript的理解深度決定了你的發展。所以一定要用心學習。
現在很多人一看到閉包、原型鏈、作用域鏈、繼承之類的文章都是直接跳過，你現在可以自問一下你的確理解這些基礎的知識點嗎？
JavaScript的基礎知識點確實很多，所以《JavaScript高級程序設計》寫了700多頁；不過當你JS基礎扎實后，你會發現你在學習框架、亦或是學習框架源碼的時候會輕松許多。
?
JavaScript（ES6+）你需要了解的一些知識點
?類型轉換
?this
?作用域（作用域鏈）
?原型鏈以及繼承
?閉包的理解
?動態作用域和詞法作用域
?JavaScript執行機制
?promise&async
上面說的CSS&HTML&JavaScript的基礎知識點并不需要你一入門就全部都理解透徹；有些雖然是基礎，但卻也有它的難度。就算是高級也不敢說自己全都掌握了，有句話說的挺好——書讀百遍、其義自見。
我們第一遍學習不可能盡懂，到最少可以給我留下一個印象。過一段時間再學習這塊知識點的時候，你肯定會有一個全新的理解。學習只一個需要一直在線的任務，重復的學習可以幫助你保持持續的競爭力。
我先聲明一點，我并沒有說其他技術不需要去學習，只不過初入門最好重點是先將基礎夯實。
其實三大件的學習不需要花費多少時間，有基礎的大概3個月就可以大致的看一遍。是否真的理解這是后話，不過已經算是入門了。
CSS&HTML&JavaScript推薦書籍/網站
1.W3C的CSS&HTML網絡教程
2.《CSS權威指南》
3.《CSS揭秘》
4.《JavaScript高級程序設計》
5.《你不知道的JavaScript》上卷
6.ECMAScript6入門
HTML不知道推薦什么書。我個人覺得看教程和動手實踐就基本沒什問題。
接下來我們就可以學習一些工具類的庫了。
?
庫工具
對于庫工具而言我們常用的有JQuery、underScore、zepto、Moment等
?JQuery:降低開發者操作DOM的復雜度
?UnderScore:提供實用的函數
?Zepto:JQuery的簡化版
?Moment:日期和時間操作庫
這些庫給我們提供了很大的便利，省去了我們編寫相關方法的時間，同時也是我們的程序更加穩健——我們自己寫的方法很可能在某些情況下就出bug了。
當然對于這些庫我們不僅僅只是去了解API，我們需要去學習它的源碼?？纯慈绻约簩懴嚓P方法的話是不是也想到了這種方式，這些庫工具是也是一個很好的學習工具，我們不應該忽略。
比如讓你自己實現節流函數，你會如何實現。
過濾對象應該如何實現
……
?
這種問題的答案不就在Underscore源碼里面嗎？
我們在學習庫工具的時候，必定是需要回頭看JavaScript基礎的；這也就進一步夯實了基礎。
?
前端框架（MVVM）的學習
當下最火的框架想必一定是React和Vue，如果JQuery的存在是是我們更加方便的操作DOM,那么現在MVVM框架則是讓我們從手動更新DOM的繁雜操作中解放出來。
至于React和Vue該學習哪一個，更多的還是看當下公司使用的是哪一個（也不是必然）。對于Vue(React)該如何使用其實不用多久就能上手，我們更應該關心的是他們背后的設計思想和實現原理。
一些問題
?響應式的基本原理是什么
?發布訂閱模式的理解
?VirtualDOM的理解
?前端路由的實現原理
?nextTick/setState的實現原理
?diff算法
?單頁面應用（SPA）的原理和優缺點
我們對于框架的API使用沒必要花太多時間，應該多研究他們背后的設計思想和實現原理。
Vue和React我該選擇哪一個？
對于這個問題相比很多人都有困擾（有些人兩個都學，也就沒有這個困擾），這個問題已經有很多人回答了。但我還是覺得不是非要選擇哪一個才是政治正確，選擇你需要的。
感興趣的可以看看這篇文章：
ReactorVue:WhichJavascriptUILibraryShouldYouBeUsing?
以下是提煉的文中觀點：
Vue的優勢是：
?模板和渲染函數的彈性選擇
?簡單的語法和項目配置
?更快的渲染速度和更小的體積
React的優勢是：
?更適合大型應用和更好的可測試性
?同時適用于Web端和原生App
?更大的生態系統，更多的支持和好用的工具
Vue相關資料
對于框架的一些學習資料我個人更傾向于推薦官方文檔，有很多問題官方文檔已經說得很清楚了。市面上有些書籍也就是對官方文檔進行了一個擴寫（不排除有精良之作）。
Vue官網&VueRouter官網&Vuex官網
剖析Vue.js內部運行機制掘金小冊
vue技術揭秘
瀏覽器&計算機基礎
如果你希望能能快速進階到高級工程師，那么對于瀏覽器&計算機基礎的知識你就必要又有一定的掌握。因為這能讓你更好的理解前端。
瀏覽器一直是JavaScript最重要的宿主環境，所以我們必須去了解JavaScript在瀏覽器中是如何執行的。
我們前端開發接觸最多的應該就是瀏覽器了，記得工作第一年最頭痛的就是處理IE的兼容問題。工作中出現的很多問題都和瀏覽器有關，所以我覺得了解瀏覽器工作原理是非常有必要的。
為何要學習瀏覽器工作原理？
?準確評估Web開發項目的可行性
?從更高維度審視頁面
?解決面試中遇到的絕大部分瀏覽器問題
計算機基礎
對于計算機基礎我們需要做到大體了解，這樣的話我們對整體的流程會有一個大概的把握。在實際開發過程中不會過于被動。
需要了解的一些知識點
?瀏覽器緩存機制
?瀏覽器中JavaScript的執行機制
?頁面渲染原理
?瀏覽器安全問題
?瀏覽器為什么會跨域
?如何系統的優化頁面
?HTTP與HTTPS的區別
?TCP/IP協議
?三次握手和四次揮手
?CDN的作用和原理
?正向代理與反向代理的特點
這里僅僅列出了一部分知識點，如果想全面的學習可以看下面推薦的資料。
瀏覽器&網絡基礎推薦書籍/資料
?《瀏覽器工作原理與實踐》專欄
?《圖解HTTP》
?《網絡是怎樣連接的》
前端工程化
從事前端稍微久一點的開發就一定會有這個感受——前端開發越來越工程化，越來越復雜。
對于前端開發來說，現在前端要做的不只是切頁面調接口這么簡單，我們需要了解的技術無疑更加廣泛。
前端工程化的一點淺見
由于項目的復雜度越來越高，前端需要做的工作就越來越繁重。當項目復雜就會產生許多問題，比如：
?如何進行高效的多人協作？
?如何保證項目的可維護性？
?如何提高項目的開發質量？
?如何降低項目生產的風險？
前端工程化細分的話我覺得可以分成模塊化、組件化、規范化三個方向?；蛘哒f一切能提升前端開發效率，提高前端應用質量的手段和工具都是前端工程化的實踐。
模塊化
?JavaScript模塊化
?CSS模塊化
?資源模塊化
組件化
從UI拆分下來的每個包含模板(HTML)+樣式(CSS)+邏輯(JS)功能完備的結構單元，我們稱之為組件。
也就是將復雜頁面按功能拆分成多個獨立的組件。
規范化
編碼規范
接口規范
git使用規范
CodeReview
UI元素規范
前端工程化一些知識點
?理解Babel、ESLint、webpack等工具在項目中的作用
?Babel的核心原理
?Webpack的編譯原理、構建流程、熱更新原理
?nginx的基本理解
?理解Git的工作流程
?Mock的意義及優點
性能優化
提起性能優化，大家最先想到的是什么？我最先想到的是一道面試題：
從輸入URL到頁面加載完成的具體過程
因為從直觀層面來看，我們前端需要優化的步驟基本都在這個加載工程當中。
性能優化現在對于前端來說已經是必不可少的技能了，當然現在有些所謂的性能優化的技巧現在都成為了一種需要遵從的規范。
我們需要關注兩個方向的性能優化：
?運行時的優化
?開發時的優化
性能優化一些知識點
?前端性能衡量指標、性能監控（performance,LightHouse）
?常見的性能優化方案有哪些
?SSR方案的性能優化
?Webpack的性能優化方案
?React、Vue等框架使用性能優化方案
?網絡層面的優化方案
?頁面渲染層面的優化方案
?白屏的優化方案
?
推薦資料
?《大型網站性能優化實戰》
?《前端性能優化原理與實踐》掘金小冊
Nodejs
我們知道由于Nodejs的出現，前端開發出現了一個新的高潮。JS開始可以涉及后端領域，JS的可能性更大了。
Nodejs一些知識點
?Nodejs在應用程序中的作用
?Express和Koa的區別
?Nodejs的底層運行原理、和瀏覽器的異同
?Nodejs非阻塞機制的實現原理
數據結構和算法
《學習JavaScript數據結構與算法》（第三版）
