掌握現代web前端技術需要從哪裡開始學起？

01-06

目前本人做後端java程序員對前端有興趣學習想利用業餘時間來學習一下
目前本人水平只能是說js基礎還過得去 jquery用的熟練
對於三大框架 angular react vue幾乎是毫不了解而且前端工程化這塊根本就不懂感覺現在的前端都是一個獨立系統
我從哪些基礎知識看起呢？

個人覺得不管是現代 web 前端技術還是古代 web 前端技術，甚至是學習其他任何東西，都應該注重基礎，否則你學到一定程度都會遇到很明顯的瓶頸。今天你看到了 React，Vue，Angular，明天你還會看到更多的新東西。而事實上，這些東西背後的原理和本質都離不開那些基礎的東西。這個打好基礎的原則是學習技術的最大前提，始終都要牢記。

但是，凡事都要結合現實情況來討論，如果你有大把時間又不需要為養活自己而憂愁，那麼你大可以慢慢打基礎，畢竟打基礎需要大量時間，但如果此時的你短時間內還要找工作（或者換工作），希望能夠學習一個時髦的技術好出去更好的「謀生」，那麼這種和我們小時候的應試教育類似，出於一種相對急功近利的目的去學習，那麼就應該挑一個能夠快速達到目的的學習之路。比如：短時間快速入門基礎後（HTML,CSS, JavaScript）,然後挑一個企業使用比較多的，比如 React 或者 Vue，直接拿個項目練手，基本上達到會用的程度還是很快的。但是，達到了會用的水平後，解決了你謀生的問題後你還是需要再回到夯實基礎的原則上，本著不僅知其然，更要知其所以然的態度，踏踏實實深入去學習。

這兩種方式沒有哪種更好，學習都是要帶目的的，只是目的不同，決定了學習方式不同而已。

舉個我個人覺得很恰當的例子：兒童學鋼琴和成人學鋼琴。方式一定是不一樣的，孩子們有大把時間，而且不用擔心基本生存問題，所以慢慢練，擺手勢，學節拍，基礎樂理，練指法，爬音階，考級曲目一個一個練，每天幾個小時日復一日，年復一年這都是在打基礎，為了能夠更好的彈奏出一首首越來越難的曲目（也可能為了考級證書抑或培養情操）。

但是成人學琴絕對不會這樣的，大多都是了解一點基本樂理（能看懂五線譜這種，也不管大調小調），搜到一首流行歌曲琴譜，直接就上手練了，因為這樣見效快啊，節奏不準，節拍不對那又如何，我又不去比賽，彈出個大概，滿足感杠杠的好吧！

好了，道理就是這麼個道理。最後來一張國外一名工程師整理的前端學習路線參考圖：

我從我的 Live 中截幾張圖你就知道了，一般來說有兩種路徑

自底向上：

從項目中學習：

謝邀

首先確定一個問題，題主只是想擴展自己的技能樹還是為了轉行。

如果是為了擴展自己的技能樹，為了在日後的工作里能寫一些和自己後端代碼相匹配的漂亮的後端管理頁面的話，請拋開學習基礎知識，學習工程化這些思想，直接看下面的回答

1 學習一種當下比較流程的js框架或者處理庫

此處推薦react或者vue(因為我不熟angular

推薦react的原因是 1，seo友好，可以後端渲染。2，jsx強無敵 html+js爽的停不下來。3，生態圈好，從pc到移動，從單頁到多頁，只有你想不到的，沒有你找不到的類庫。

推薦vue的原因是 1，中文文檔十分友好。2入門簡單，自帶的一些組件很好用。3，模板運算符很強大。

2 選擇好一種你想學的東西之後在選擇一款相應的ui庫，解決了學習css，html和一些動畫效果的問題

react推薦antd，antd-mobile，還有最近出的antd pro(此處可看出阿里是一個想幹事的開源公司

vue推薦 iview(vue 還有餓了么出品的一個前端框架，個人不是很推薦，但是根據餓了么的朋友說前端組所有精力都在搞這個，導致本身的業務都沒人寫，2333

以上只需要學完並且熟練使用就能讓你寫出一個美美噠的後台管理或者別的什麼網頁了

至於你說要專職前端，需要學習以下東西

1，簡單的ps技巧，用法，畢竟不是所有的ui都會幫你量好，換算成px或者你想要的單位

2，切圖切圖這個工作看起來簡單但是你要學習html 1-5 css 1-3的所有標籤屬性還要掌握lass sass等一些預處理器才能更好的進行工作這裡推薦w3sschool

3，交互需要用js做一些動畫特效和交互特效需要掌握一些js或者jquery函數甚至專業的js動畫庫的用法，這塊多練就好

4 ，數據渲染現在大前端時代，前端也講究前後分離了後端只負責數據吞吐前端來渲染數據，你可以用jquery甚至js在html里寫js然後在js里拼dom(寫過的應該都想死，還有就是繞不開的react，vue，ng，來幫助你更好的來做數據處理

5，學習一些node.js的相關知識，比如說本地起一個server來跑網頁，npm安裝你想要的包不要重複造輪子，甚至做一些數據抓取的工作。

6 學習webpack，gulp的相關知識，如果你使用了上面說的三座大山，就要知道它裡面有了很多es6 ,es7，裝飾器之類瀏覽器不能解析的函數或者方法，你需要用相關的工具來轉義他，如果沒用的話你也可以用來壓縮js，css，配合瀏覽器來做熱更新之類的操作

如果你把這些都能學會並且熟練應用我相信找一份15k+的工作絕對沒問題(有沒有你現在的高我就不知道了哈哈哈)，把這些學懂並熟練應用後你就可以適當的看一些js高程，js vr，WebGl，js 機器學習方便的只是來更好的擴廣自己前端的技術。

作為一個多年學習前端的老後端，稍微分享一下我的學習體會吧，可能和很多老前端思路不太一樣。

先要學JS，JS是個很好的語言，你從Java過來，很有可能什麼都寫個Class，Class是好東西，但過度使用是無意義的。作為Java 過的程序員，要多看看function的用法，要盡量向function方向抽象，而不是抽象成java那種傳統意義的對象。我覺得模塊之間暴露（export）出去的首選是function，當然class也不差，看你設計了。其實js是非常好的函數式編程語言，不能浪費了。還要多用let，const，用好箭頭表達式，可以讓你的js非常漂亮。還有就是Promise/async/await，這是大力推薦的，至少可以幫你減少callback的層數。

然後是Build，JS的項目會有很多的依賴關係，現在不是早年了，你要是把所有依賴的js文件都手動加進html頁面，我敢保證，這種項目你做個仨月就得瘋了。npm和yarn可以幫你管理和安裝第三方js包,推薦用yarn。webpack幫你把零散的js文件和資源文件打包到一起，這樣你瀏覽器就不用載入海量的js文件了。還有就是JS和Java不一樣，如果你需要一個Java還沒發布的語言特性，你往往需要等JVM的下個版本。但是JS不用，你可以提前使用各種最新的語言特性，他們有babel（其實還有很多選擇，實現方式也不一樣）這種東西讓你的新代碼跑在老環境。gulp也非常好，編寫build腳本體驗非常好，不光是js工程，其他語言的項目我也推薦gulp。

如果你只用js做前端，可以看看react, angular和vue這三大框架。前端人苦啊，這仨貨風格迥異。其實作為後端我覺得會一兩個就行了，我首推react，因為這個框架的設計比較符合我們後端的設計模式。而且個人感覺性能調優比較方便。react的自動測試可以看看jest，這一塊可能很多項目會忽略，其實react這框架不是特別好測試，早點做起來不至於後面抓瞎。另一個原因是有react-native可以給你做移動app。vue的中文資源好，設計更簡潔清晰，反正我粗看了一下它的文檔，覺得眼前一亮。如果你就想讓你的前端頁面快點跑起來，沒有移動app的需求，就學一個vue也沒問題。隨著事件和componet的不斷增多，項目會越來越複雜，早晚有一天會把你壓垮。你可以抽空看看redux，這貨以前有個類似的兄弟叫flux，其實用起來很麻煩，但是沒辦法，我也想不出還有什麼更好的模式來救前端。（還有評論中兄弟說的mobx，我沒用過，應該是不錯的）

說到做前端，其實很多其他語言都可以編譯成js從而跑在瀏覽器上的，比如說早年的coffeescript，typescript，後來還有clojure-script，最近的Kotlin。那時候他們這些語言欺負js語法陳舊，不過現在es6剛出來沒多久，es8都開始用了，單用js應該是可以完全滿足絕大多數程序員了。要是四五年前，我或許還會推薦玩玩coffescript，我覺得現在這個必要性不大了。

說到前端之苦，其實不在js，js就算是在最黑暗ie6的年代，兼容性也是非常不錯的。苦是苦在CSS上。這些年css進步不是特別大，有less和sass兩個可以看看，我只懂皮毛，就不多說了。

html沒啥好說的，我推薦看看svg，配合d3.js可以做非常好的數據可視化。可視化這塊也有很多現成框架可以選擇，看你具體需求了。

簡單的說說一下我的看法：

1.css樣式問題，這個在於熟練，孰能生巧嘛，可以額外學習一下sass或者less一種css預處理器，這個半天基本就入門了

2.js原生ES5必須熟悉，《javaScript 高級程序設計》當然不常用的知識先不用了解，之後開始看ES6的知識

3.angularjs( 即angular1.*, 可以放棄了), angular,react, vue

主流的框架先著手一個就OK了，因為不同的業務選擇不同類型的框架，先精通一個，不要貪多

4.webpack,gulp,gallup前端打包工具重點學習一個

5.node 了解一點node 知識

6.其他:TS，e2e

提供一下我前端面試經歷過有點印象的JD 供參考：

1.angularjs 的雙向綁定如何實現的，如果讓你實現你會咋做

2.angularjs 指令是如何實現的

3.ES6有哪些新特性

4.如何做非同步處理

5.前端項目中你遇到了什麼有挑戰性的工作

6.angular 是如何啟動的(當時覺得那個面試官很變態，現在想來還是自己的問題)

7.localStorage和SectionStorage的區別

8.單頁面刷新之前的數據如何存儲

其他的像：

什麼是閉包，原型鏈啦

什麼是事件冒泡，如何阻止時間冒泡啦

什麼js如何實現指定順序載入啦，defer和asyn的區別的

什麼自己封裝一個類似於jQuery$()這樣的選擇器了

什麼angular的指令都有哪些屬性了，都有什麼作用了

什麼前端代碼優化 (個人覺得實現相同的功能，使用更合適的代碼處理方式也算)

...

這些比較常規的題目平時多注意就行了，這些問題一年前多我自己都稀里糊塗的，css樣式都不熟悉，現在框架本身的細節還沒有注意到，互相學習吧，另外我建議看到這條信息的weber的新人，職場伊始，能去大公司去大公司，能去專業團隊就去專業團隊，過段時間更新一下公司技術架構師的一次晨會

個人學習angularjs的經歷，也是最快的方法：硬著頭皮直接寫項目，使用別人的腳手架，照貓畫虎的寫，不過容易卡帶，走偏

PS:個人前端菜鳥，進步中...

@goddyzhao的回答很贊，根據我的學習經驗，已經工作或正在找工作的同學應該採用自頂向下的學習法，先滿足工作需求的條件，再逐步深入，夯實基礎，甚至研究更多跨領域的知識。

相反，如果還是學生，就應該採取自下而上學習法，一步一個腳印，打下踏實的基礎，將來才會有更多的潛能和主動選擇權。

並不謝邀……

說實話，web是什麼東西我都不知道

但是特別有緣分的是我今天來圖書館上自習，我平常坐的那個位置被人佔了……然後我逛了一圈確實沒有座位了，目測應該只是那個人在圖書館看的書沒有放回去吧……於是我就心（恬）情（不）愉（知）悅（恥）的坐在了這裡，然後看到了桌子上的三本書

emmm，就是這樣放著的

然後我就突然想到了這個問題，就點進來看了一下，結果果然就是這個web

緣啊，真的是妙不可言啊

前端工程化的東西先不用看，沒有燙過坑就不知道這些東西是用來做啥的。

樓主既然有js基礎，那就直接從VUE上手，中文文檔很詳細，一邊看教程一邊學，應該很快就能掌握VUE。

然後就可以去了解下工程化的東西了，比如你寫的這麼多js文件是怎麼打包合併成一個文件的；css很繁瑣，那麼postcss是怎麼幫助你簡化css代碼的呢，又怎麼將postcss轉成普通的css呢；怎麼通過npm把已有的前端資源添加到自己的項目中來；

好了，現在你應該可以自己從零開始搭一個簡單的項目腳手架了。接下來你應該要往進階的方向走了。

1. 做一個多頁面的SPA項目，一步步，將之前胡亂存放的數據轉移到VUEX中，體會一下數據流管理工具的方便性

2. 關注一下你現在打包出的js文件，是不是太大了？怎麼縮小文件體積呢？一開始就把所有的js都載入進來明顯不是一個很好的方案，最簡單的辦法就是按需載入。然後就去配置一下自己的Webpack，實現codesplit。

3. 上面都弄好了？歡迎你接著進入nodejs的天地

-----------11月20號補充-----------------------------

cousera上剛剛推出了學習路徑規劃功能，我看裡面的選項有前端開發工程師，如果對前端真的有興趣，可以去那裡學習。

知乎用戶：怎樣成為牛逼哄哄的前端工程師？

謝邀，回答晚了真的是抱歉。下面我「簡單」圍繞著題主的問題回答。

1、不管是古代還是現代，前端最基礎的是html 和css 不是很難，不過最好還是多了解一些，在開發的時候會舒服很多。

2、js基礎過的去我覺得就可以了，畢竟你不需要開發框架，你需要的是如何更聰明的使用框架。當然，你也可以繼續提高js水平，並且花一定時間專攻某一個框架。

3、jq是個好東西，但是jquery不適合用於前端工程化，可以作為一個庫引入，當作純粹的語法糖。

4、前段工程化比較複雜，你可以把它當成目標，或者理想，但不能定位標準和底線。個人認為現在沒有任何一個網站可以達到完美的前端工程化。所以基礎的先從模塊化做起吧。

5、如果你的項目準備搞前端工程化，那麼祝你成功。

謝邀，可是我還只會C語言，讓您失望了

我也懶得長篇大論

1：想學前端，先得有眼界，一種前瞻的眼界，

2：前端怎麼賺錢，你怎麼才能賺錢

3：HTTP,紅寶書（犀牛書），學習網站，敲代碼，

就這樣。

記得和老闆聊天，他說的一句話，非常有道理，沒有項目的經驗都是扯淡，所以建議你從實現簡單的功能起，開始干，邊干邊學，你做完就真正知道這是什麼鳥，不然的話，人家告訴你這幹嘛那幹嘛的，信不信你明天就忘了。css,你看的一頭霧水，這什麼鬼，JSP，不是網頁嗎，怎麼可以寫Java代碼，而HTML就不行?你做過了，就知道為什麼。因為你學以致用了嘛。

打開Vue文檔開始看就行了，中文的簡單易懂

前端要做的就是和瀏覽器的交互，學好瀏覽器兼容，css，html，js就好了。

直接看angular吧，對後台還是蠻友好的，TypeScript應該對會Java的來說也是小case。

編程語言都差不多的，在你有基礎的前提下，真的沒必要系統的去看，弄一個小項目，練練手，就知道怎麼回事了，遠比一步步系統學習來的快和方便。

這個回答也許能幫助到你

冴羽：女生22歲想學前端，會寫一點點靜態頁面，怎樣系統的自學呢？

學東西最主要的就是基礎，只要有紮實的基礎，無論多複雜的框架，基本都能輕鬆上手。現在angular、react、vue都有自己的官網，也有api等等你可以從安裝開始一步一步的看，遇到不懂的就重點深入去了解。

如果有java基礎，或者想做大的項目，果斷 angular 2+

我是先轉node，啃好了js，再學前端