首先前端三大件：前端的根本，html、css、JavaScript、JavaScript是重中之重。
庫工具：對於庫工具而言我們常用的有 JQuery、underScore、zepto、Moment 等
JQuery: 降低開發者操作 DOM 的複雜度
UnderScore: 提供實用的函數
Zepto: JQuery 的簡化版
Moment: 日期和時間操作庫
這些庫給我們提供了很大的便利，省去了我們編寫相關方法的時間，同時也是我們的程序更加穩健我們自己寫的方法很可能在某些情況下就出 bug 了。
前端框架（ MVVM ）的學習
當下最火的框架想必一定是 React 和 Vue，如果 JQuery 的存在是是我們更加方便的操作 DOM,那麼現在 MVVM 框架則是讓我們從手動更新 DOM 的繁雜操作中解放出來。
至於 React 和 Vue 該學習哪一個，更多的還是看當下公司使用的是哪一個（也不是必然）。對於 Vue(React) 該如何使用其實不用多久就能上手，我們更應該關心的是他們背後的設計思想和實現原理。
瀏覽器 & 計算機基礎
如果你希望能能快速進階到高級工程師，那麼對於瀏覽器 & 計算機基礎的知識你就必要又有一定的掌握。因爲這能讓你更好的理解前端。
瀏覽器一直是 JavaScript 最重要的宿主環境，所以我們必須去了解 JavaScript 在瀏覽器中是如何執行的。
我們前端開發接觸最多的應該就是瀏覽器了，記得工作第一年最頭痛的就是處理 IE 的兼容問題。工作中出現的很多問題都和瀏覽器有關，所以我覺得了解瀏覽器工作原理是非常有必要的。
前端工程化
從事前端稍微久一點的開發就一定會有這個感受 —— 前端開發越來越工程化，越來越複雜。
對於前端開發來說，現在前端要做的不只是切頁面調接口這麼簡單，我們需要了解的技術無疑更加廣泛。
性能優化
提起性能優化，大家最先想到的是什麼？我最先想到的是一道面試題：
從輸入 URL 到頁面加載完成的具體過程
因爲從直觀層面來看，我們前端需要優化的步驟基本都在這個加載工程當中。
性能優化現在對於前端來說已經是必不可少的技能了，當然現在有些所謂的性能優化的技巧現在都成爲了一種需要遵從的規範。
Nodejs
我們知道由於 Nodejs 的出現，前端開發出現了一個新的高潮。JS 開始可以涉及後端領域，JS 的可能性更大了。
Nodejs 一些知識點
Nodejs 在應用程序中的作用
Express 和 Koa 的區別
Nodejs 的底層運行原理、和瀏覽器的異同
Nodejs 非阻塞機制的實現原理
……
數據結構和算法
這一點我也比較薄弱，就不展開了。關於這部分你可以刷 leetcode。
另外推一本書《學習 JavaScript 數據結構與算法》（第三版）
以上就是我覺得現在學習前端開發一定要掌握的技術知識，肯定也有其侷限性，但是也希望對你有所幫助，還有就是對於自學前端，也給你幾點建議。
一：首先，有這樣的一種情況很常見，對於想自學web前端的人來說，他們大多數都是非常盲目的，不知道自己改如何入手，很多人在網上找一些視頻，然後瘋狂的過視頻，很快就把一塊內容都學完，他們理解的學完了就是視頻看完了，但是讓他們動手去做東西卻做不出來，而我的理解學完了就是自己能寫出東西，所以對於初學者來說一定不能盲目，要有自己的規劃，不然就是浪費時間白忙活。
二：既然是學習專業技術，我個人的建議是，一定要有一個能指導你的人，不能都靠自己閉門造車，這樣的行爲並不聰明，結識一位這方面的人才，時不時去問問人家問題，不然你可能會發現一個小問題能困擾你一天，最後還不知道是什麼原因。
三：學習web前端技術，不能跟學數學語文一樣對待，比較剛接觸代碼是不容易記住的，所以要掌握上述的技術，你還要知道學習web前端技術有哪些“坑”。對於學習方法這塊是尤爲重要的，怎麼學才能讓你學完了能記住之前學的那些，不至於學完了就忘，這個問題值得你學習之前去思考的。
四：根據我多年的學習情況來看，你平時一定要養成好的學習習慣，就說我自己吧！我就喜歡把自己曾經遇到的問題整理在電腦的日記本上，然後我會蒐集一下博客相關的技術文章，一些我認爲比較有用的網站，以後都能用的上，這是我個人的學習習慣，相信我，如果你想走的更遠，一定要養成習慣。
學習安排路線：
基礎：HTML+CSS頁面搭建，CS核心和PC端頁面開發，HTML5移動端頁面開發
核心：web前端核心技術JavaScript，ecmasript，dom，ajax，json，正則，作用域，運動框架，核心算法，高級函數，插件封裝，jQuery。
高級：html5+高級JavaScript開發，大數據可視化，webapp交互接口，lbs定位，微信sdk，es6標準，高級算法，數據結構，插件封裝。
框架：bootstrap、vue、react、angular、sass企業開發應用。
以上就是我的分享，希望對你有所幫助，
更多文章推薦閱讀 【 學習企鵝圈：731771211 】 ：
2020年Web前端開發工程師市場怎麼樣？學會什麼技術才能拿到高薪