作為8年的老前端，嘗試回答你的問題，自學還是培訓，基本只會是前端學習者提供來的問題，因為前端入門門坎低。記得郭德綱說過一個段子，相聲有那麼多不專業的演員的原因是，大家都會說話，所以一堆不是幹這個的入門，相聲的門檻在山腳下，而進了門才上山的臺階。前端也是如此，因為前端的門檻也在山腳下，很容易踏進去，但是門內是一座大山。
前端其實是一個複合型技術門類，對於初級程序員來說，一般能掌握HTML/CSS/JavaScript/jQuery和簡單的H5技術就可以了，但是當今的前端行業，前端的初級程序員基本已經不需要了，原因是前端的技術複雜度需求越來越高，任何一個企業需要的都是可以勝任複合型、複雜度較高的前端程序員，所以你在初級程序員的基礎上，還需要學習網絡、HTML5/CSS3、JS框架、Node、Webpack、Sass/Less、甚至小程序，並且需要你有一定的開發經驗，這一點現象說明了前端的技術人才的學習週期拉長、學習曲線會更大、技術水平要求更高，那麼到底是自學還是培訓呢，我的建議是入門可以自學，但是提高需要有老師帶，因為前端門檻低，入門的HTML/CSS和基礎的JavaScript，非常容易吸收，但是一到進階就很麻煩了，首先有很多點是無法通過自學理解的，有很多開發的技巧、思想、模式是很難通過自學掌握的，有很多開發經驗是無法通過自學積累的。所以行業內就出現了很多前端培訓的機構，筆者承認有很多機構的培訓質量比較低，但是也有很優秀的機構，筆者不便多說，自己可以通過百度瞭解。
下面簡單的說一下培訓機構
培訓機構橫向分類：線下機構和線上機構
線下機構大多數的培訓內容較少，學費高，這可以理解，線下機構的運營成本很高，這種情況的運作方法就是短期流水線式的生產初級程序員，並跟一些外包公司簽訂內推合同，讓初級程序員進入一些小的外包公司工作，但是你能不能勝任就看自己了，反正我解決了你的就業。（線下也有非常優秀的機構）
線上機構大多數做的比較用心，學費低，內容多一些，但是因為這兩個原因，導致了直播課少，錄播課多，錄播課的質量就因機構而異了，但是大多數線上機構都會提供老師一對一答疑與直播答疑，有很多學生通過線上的學習能進入到比較好的企業。但是線上的弱點就在學習完全靠自己，機構對學生的學習是無法直接監管的，所以學生要有絕對的自制力和意志力。
那麼我們來理一理JavaScript到底該學一些什麼東西？
第一彈：ECMAScript（JavaScript的基礎）
你可以理解他為JavaScript的本尊或者靈活，如果你認為它僅僅是個語法的盒子，那就錯了，它的本質是JavaScript開發的理論基礎和技術提升的踏板。對於初學者來說，這一關很難，但如果你翻過了這座大山，恭喜你，後面的內容你可以邊抽菸邊學習了，反之，還是放棄吧。
那我們來看看都要學些什麼？
1、編程語言、ECMA、JavaScript、瀏覽器的發展史
2、基本語法：值、變量、運算、語句等等
3、各種類型的函數、參數與原理
4、預編譯、暗示全局變量
5、作用域、作用域鏈、閉包
6、對象、構造函數、實例化
7、原型、原型鏈、對象繼承
8、對象、對象克隆
9、數組方法、類數組
10、自定義原型方法、碎片知識
11、錯誤信息、錯誤捕獲
12、嚴格模式
第二彈：DOM（文檔對象模型，JS操作HTML用的（記住：JS是操作不了CSS的！！））
JavaScript跟瀏覽器關係真的不要太好（非常好的意思），但是如果把學習DOM理解為對DOM結構的增刪改查，那就太膚淺了。我們來看看DOM包含哪些內容呢？
1、掌握document對象、瞭解其中的方法的繼承關係（特別是相關原型的問題）
2、遍歷節點樹與遍歷元素節點樹（重考點）
3、節點的增刪改查、元素屬性的操作
4、滾動相關操作
5、樣式屬性相關操作
6、元素運動
（兼容性封裝！兼容性封裝！兼容性封裝！）
7、事件處理函數與綁定機制
8、事件的冒泡捕獲機制
9、事件對象與事件源對象
10、事件代理
11、模塊化與插件化開發的基礎
12、鼠標行為座標系與相關兼容性、功能性函數封裝
13、輸入與狀態改變事件
14、鼠標行為預測技術
15、鍵盤事件
16、DOM常見問題的解決方案與函數封裝
17、至少完成10個典型案例
第三彈：BOM（瀏覽器對象模型，JS操作瀏覽器用的，沒事兒彈個窗？沒孃的孩子最慘）
BOM一直是JavaScript特殊的存在，沒人搭理，卻時不時用用的存在。畢竟沒娘沒規範，所以很多內容都不在用了，但不代表你可以一點都不知道。職業素養！職業素養！職業素養！
1、window、Navigator、history、screen、location對象的屬性與方法
2、window、location對象深入學習
3、初步掌握單頁面應用的簡單開發
4、瀏覽器相關檢查
第四彈：正則表達式（匹配字符串用的，這個字符串是不是個E-mail呢？手機號是不是138開頭的呢？）
這個東西可以說相當於是一門小語言，難學、難記、難掌握，但是在關鍵時刻能給你解決大問題，往往需要大量代碼些的程序，用正則，1行搞定。
怎麼學？老老實實學，然後老老實實一次又一次的摳破頭皮用。
1、轉義相關、修飾與元字符
2、正則量詞、屬性、方法
3、正則相關的所有方法
4、正向預查、貪婪與非貪婪模式
5、replace方法、不捕獲分組
6、整個50個正則案例逐個分析
第五彈：JSON（一種很友好的數據格式）
長這樣舍爾滴 -> {"名字":"JS++","年齡":"18","婚否":"未婚"}
1、JSON數據認知與解析方法
2、JSON對象與字符串的轉換方法
3、AJAX的基本認知
4、數據渲染、模板渲染
5、數據緩存機制、數據緩存池
第六彈：瀏覽器（職業素養！職業素養！前端優化!）
很多開發者並不瞭解瀏覽器，這對於前端開發是非常非常可怕的一件事，因為你寫的東西能不能用，取決於你是否懂得根據瀏覽器相關的機制來優化你的程序
1、DOM/CSS/渲染樹
2、文檔的解析與加載
3、DOM相關回流與重繪
4、渲染引擎、聲明HTML與渲染模式
5、JS引擎的執行機制
第七彈：JS運動（就是用JS讓DOM元素各種動）
這個東西在實際開發中是基本用不到的，但你就不學了嗎？不行！！不行！！不行！！
為啥？JS運動是你瞭解動畫執行機制的唯一途徑，其次，是你提升JS編程邏輯能力的一個重要學習過程。
比如原生JS開發一個輪播圖，這是一個訓練綜合運用能力的過程。
當然相關的數學知識也要學一些喲~
1、JS運動的原理與機制
2、加速度、彈性運動
3、重力運動與拖拽效果
4、原生JS開發無縫輪播圖
第八彈：ES5數組擴展方法
ES3給了我們很多數組相關的方法，但覺得不夠，再給你加一些，方便你開發
ES3的數組方法回顧一下：
concat, join, pop, push, reverse, shift, slice, sort, splice, toString, unshift
ES5給我們擴展的方法：（都跟遍歷數組有關）
forEach, map, every, some, filer, reduce, reduceRight
學習內容：
所有ES5的數組擴展方法的使用場景與重寫（兼容性也得考慮考慮啦）
實戰肯定少不了，因為你要知道各個方法的使用場景。
特別是forEach、map、filter、reduce
第九彈：函數式編程
你如果順利走到這裡，恭喜你，基礎你已經學完了，但是函數式編程是你提升JS能力的又一座大山，這座山主要是理論太抽象，很多都沒有特別明顯的使用場景，它究竟是幹什麼的呢？它其實就是教你封裝一個又一個的函數完成一些比較複雜的功能。可以說是提升抽象函數的能力的利器集合。
1、純函數
2、函數組合、結合律、pointfree
3、高階函數
4、函數柯里化與封裝
5、偏函數與封裝
6、惰性函數與使用場景
7、緩存函數
8、函數防抖、函數節流（必會）
9、歸類函數（必會）
第十彈：碎片知識
我們學了這麼多東西，還要補充嗎？看了下面的這些，你就知道了，還差的遠呢？難受，香菇！！！
1、同步與異步加載的三種方法
2、放大與寬放大模式
3、call/apply/bind以及bind重寫（常考）
4、標籤的屬性與特性
5、Math方法
6、封裝byClassName
7、斷點測試、bug調試
8、圖片的預加載與懶加載
9、日期對象與計時器
10、this指向問題
11、DOM與虛擬DOM（常考）
第十一彈：網絡
我是前端程序員，我為啥要學網絡？這樣的問題經常被問，簡單！因為現在前後端開發分離了，分離不代表相互不搭理，分離既合作，合作就要相互瞭解對方個大概，其次，開發本身還會涉及到前後端聯調的問題，所以前端程序員一定要掌握基本的網絡知識。
1、服務器的搭建
2、網絡、URL、客戶端與服務端、域名
3、DNS/IP/TCP/UDP/HTTP/HTTPS
4、三次握手、四次揮手
5、www、http報文、請求方式、GET與POST
6、http狀態碼、accept與ContentType
7、緩存、長短連接、Content-Length、referrer
8、http版本、同源策略
9、同步與異步請求、混編的概念
10、AJAX以及原生JS封裝AJAX
11、AJAX版本、響應狀態、超時設置、同步與異步設置
12、6種跨域獲取數據的方法
13、iframe與網絡相關
14、cookie相關
15、cookie+token技術
16、相關典型實戰至少做8個
第十二彈：ES6（新的JavaScript版本）
作用在於引入了類、模塊的概念，對異步處理提出了新的方案，也對JS對象們擴展了很多方法，讓開發變得更加順暢。
1、新增語法
2、新增API
3、集合
4、異步
5、面向對象
6、這裡需要一個大的實戰去訓練自己
這是JavaScript要學習的內容，當然後續還有很多很多技術要學習。比如.......jQuery、HTML5技術、CSS3技術、什麼BootStrap、CSS擴展語言Less/Sass、Webpack工程化、Git、VueJS......
關鍵字: JavaScript CSS DOM
