我原先也是一個小白，計算機方面的東西一點也不明白，朋友推薦我去中公學前端，我就去了，現在已經畢業工作了，薪資比大部分小夥伴好很多了

這個問題等你往深的接觸並有自己一定理解後你可能跟我一樣會對整個前端有新的認知。

過硬的基礎

這個問題可能不止一遍又一遍的強調，熟練運用( html, css, js)這並不意味著基礎就紮實了。你是否會遇到這樣的問題: 吐槽自己的程式碼為什麼沒有長進？吐槽新的框架出來了，可我連之前的版本還沒掌握？嘗試著翻閱原始碼奈何根本讀不下去或者只是一知半解？因為這些問題都是發生在我的身上，我嘗試著去擴充套件自己的技術棧，然後小程式也會，web app也懂，服務端也略知一二，瀏覽器原始碼...... 這些看似有著豐富經驗的回答，但實則暴露了一個問題，哪一個都是隻知皮毛。後來我沉下心來，重拾基礎，慢慢的我程式碼可以做效能最佳化，原始碼似乎也看進去了。然後我發現基礎往深的鑽研，我似乎發現新大陸一樣。接下來給大家分享一下我的學習經歷; 依舊是基礎，並逐步展開。

html

重新把 html 知識點並且重點是 html5 的新特性再過一遍，對常用的語義化標籤，新增的 canvas，本地儲存，xhr，dom，bom api進行總結歸納。然後嘗試著封裝一些 api，對原始 xhr 進行整理等等，對於這些知識不需要刻意去弄懂底層實現，只要能夠熟練掌握並可以根據業務做到良好的擴充套件就可以了。

另外，這個權威指南看不下去就算了，找其中的重難點知識進行梳理。

css

我不知道以後會不會出現 css4 ，但就目前而掌握 css3 已經相當不錯，在前端領域對樣式掌握到手到擒來絕非易事(並不是熟練應用各種類庫，外掛)。我當初學習樣式始於興趣，終於瓶頸，不過目前依舊在學習嘛。學習樣式最快而且最容易上手的是拿現有模板去實現互動效果。舉例，以實現天貓靜態頁為依劇，不管你用什麼前端框架做輔助( jquery)，一定要手寫，既鍛鍊了html，也能快速css，css3。如果遇到難點，查閱資料(科學上網)，或者控制檯查其網頁實現，然後就往深層挖掘。

然後就是這本書，很有必要讀一讀。

JavaScript

前端的核心，從web端，到移動端，到客戶端，再到伺服器，都可以看到js的身影。你抱怨自己程式設計能力沒有長進，抱怨原始碼讀不懂都和不理解它有密切關係。js 的型別和語法、作用域和閉包、this 和物件原型鏈、非同步和效能、es6 新特性( promise、proxy)。這些是從基礎到進階，每一塊都必須深入掌握，越深越好。

不管你是否造輪子，也或者你正忙於業務開發，真正阻礙你前進的便是這些大山，去掌握它們，鍛鍊自己的內功。

不管你之前讀的是犀牛書，紅寶書還是官方web文件mdn，我現在只想推薦你認真讀一下這個系列。

前面說了一大堆關於基礎的問題，前端也不止這些但不管怎麼說基礎必須過關。

類庫及框架

有了基礎，相信你應該不懼目前的各類框架，mvc也好，mvp也罷，mvvm( vue, angular, react )也都ok。保持你的深度，然後擴充套件技術棧，這個時候你不用擔心翻看原始碼的問題，相信你能快速掌握。

掌握node

以前端代表伺服器開發node為主，你不會陌生，有了基礎什麼事件迴圈( even loop)、任務佇列、非同步回撥，掌握它們只是時間問題，當前這些是 js 引擎和瀏覽器機制相關的問題。然後就是至少熟悉一種後端語言，資料庫知識( sql, nosql)。

web api

掌握瀏覽器的渲染機制，快取機制，安全問題，效能最佳化，網路io，同源策略等等

演算法和設計模式

最後補充一個就是它，提示自己的邏輯思維和程式設計能力，演算法必不可少。掌握設計模式通樣可以便於我們對程式碼的掌握，以及效能最佳化，重構等工作。

沒事了也刷刷題訓練一下思維能力。

問出這個問題，可見你有一顆上進的心。前端不同於其他程式語言，它入門簡單，但緯度廣，有深度，更新快。一旦進入這個行業，便要時刻準備著，經常問自己一個問題，如果明天去面試，你準備好了嗎？

前端小白與前端大神有什麼區別？

對於會一些基本html，css，JavaScript，jQuery，Vue知識或只會搬運的我們稱之為入門級前端程式設計師，最近市面上出現只會Vue的前端從業者，這樣的我們不能認為是一個前端工作者。

入門級前端程式設計師也稱前端小白，他們對於知識體系和深度有一定匱乏，面對需求只會模仿之前的實現思路，並搬運原有的程式碼，程式碼實現繁瑣，不能獨立擔任和完成前端工作，遇到問題得不到解決，這些都是剛剛從事前端的前端小白所面臨的問題。

什麼樣的前端我們稱之為大神級別？

首先從事前端工作多年，經驗豐富，知識體系完善，抗壓能力強。其次懂得使用者體驗，能做出優雅的介面，瞭解計算機的基本原理，網路通訊的基本原理，掌握各種程式設計思想、開發模式，善於研究原始碼。最後對現有優秀框架的瞭解與整合使用，根據專案的業務特點構建出合適的開發模式，設計前端測試方案保證程式碼質量，用工程化方案組織起團隊的開發流程。

一個高階前端工程師，一定要有架構能力，獨立帶領前端團隊能力。拿破崙不是說過不想當將軍計程車兵，都不是好士兵。相信沒有人不想當官的，不想成為領導者的，成為管理者要有一定的技術能力加管理能力，是需要能解決真實問題的。這個時候你是一個公司最厲害的前端，遇到攻堅問題沒有人能解決都來問你，這是一個高階前端所要承受的。

如何成為一名高階前端工程師或者前端大神？

學習。應該說這兩個字足夠回答這個問題了，但我還說說我的感受。

前端工程師的戰場已不再是單純的瀏覽器，將來會覆蓋到各種裝置上。由於nodejs的橫空出世，javascript這門語言竟然神奇的有了服務端的能力，這是一個優秀前端必須要學的。

前端領域的技術更新相對於其他領域要快很多，原因大概也是因為這個領域離使用者最近吧。

而這些新東西，就需要前端工程師來不斷學習。所以，一個優秀的前端必須能夠保持持續學習能力，能夠對新技術有敏銳的嗅覺。活到老，學到老，說的就是前端工程師。

當你的知識體系越來越豐富時，你能解決的問題也就越多，當你解決的問題越多，你的能力也就越強。這個時候別人就會覺得你是個大神。

總結：用最少的程式碼實現最多的功能，感覺哪裡可能出問題，就一定有問題，發現問題不解決，比不發現更可恨，一定要了解前端互動資料是怎麼到前臺的。

其實說的再多終究離不開學習，說一下我認為的知識體系，從html，css,JavaSript，jQuery開始，到一些第三方js框架，伺服器語言一定要了解一種，前端框架和狀態管理。

階段一（HTML&CSS基礎）

HTML：html語義化，html常用標籤及其語義，html5新特性和新增常用標籤

CSS：css語法、選擇器，定位、浮動、盒子模型，css3新增選擇器及其屬性，變形、過濾、動畫

Photoshop：基本應用，把psd圖轉為靜態頁面

規範：樣式和結構分離，製作符合w3c標準的頁面，添加註釋，規範縮排

階段二（前端基本功）

javaScript基礎：基本語法，演算法基礎，常用資料結構，程式設計規範，內建物件常用方法，物件的建立方式和this用法

javaScript API：BOM操作，DOM操作，特效實現、頁面佈局，事件處理、瀏覽器相容處理

JavaScript高階：面向物件思想，物件，json、閉包、原型、作用域鏈，函式的呼叫方式及this指向，正則表示式、面向物件理論及實踐

jqurey：優勢，選擇器，動畫，鏈式程式設計及隱式迭代，外掛使用和製作

模組化：概念，演變過程，設計規範，RequireJS

階段三（移動WEB開發初級）

HTML5&CSS3：多媒體、音訊影片播放，DOM擴充套件、自定義屬性、HTML5data，地理定位、檔案讀取、元素拖拽、多媒體加強，應用快取、歷史管理、web儲存，CSS3選擇器、新屬性、2d轉換、3d轉換、動畫

canvas：繪圖命令、非零環繞原則，繪製形狀、文字、圖片，平移、縮放、旋轉變換，ECharts資料報表

Git：命令列、基本使用、對比檔案差異、還原、合併，回滾操作、遠端倉庫操作、GitHub建立遠端倉庫，github建立遠端私有倉庫、github和gitlab的區別，生成ssh key並新增到github和gitlab上

階段四（移動WEB開發高階）

移動web：移動端螢幕介紹、瀏覽器介紹、作業系統介紹，chrome模擬除錯、真機除錯、viewport、rem、主流適配方案，手勢封裝、mvc、常用指令、雙向繫結和單項繫結

angularjs：模組、控制器、$watch、自定義指令、jqLite、過濾器，格式化過濾、資料過濾、服務$http、前端路由、http攔截器

css框架：透過bootstrap完成響應式開發，瞭解常見的移動端UI框架

前端從最基礎的HTML開始學起，之後就是div+css和css3,這些足以讓你寫一個靜態頁面了，學會這些之後，嘗試著學習JavaScript、jQuery學會原生JS之後，不要以為你很厲害了，這些最多可以讓你找一個月薪三四千到五千左右的工作，工作也不要忘記學習畢竟IT行業更新速度很快，工作之餘學JS外掛庫，寫程式碼的時候提高效率，再補充學習HTML5、bootstrap你就算是一個不錯的前端工程師啦...

但是也不要高興太早，想比前端工程師再厲害一點那就數全棧工程師咯，繼續學習一些框架，比如node.js、angular.js、vue.js、react、mysql等等一些，小編也是前端小白喲，瞭解的不是很全面，但是希望更多小白能少走一些彎路喲，為前端小白加油，為自己加油！相信你會成為那個被人流連忘返的工程師！

入門

在我理解下的基礎知識，就是我們可以寫一些基本的樣式，並能對頁面的元素進行操作。舉例來說，就是我們用Spring和JSP寫了一個部落格，然後我們可以用jQuery來對頁面進行一些簡單的操作，並可以呼叫一些API。因此，我們需要基本的HTML / CSS知識。只是要寫好CSS並不是一件簡單的事，這需要很多實戰經驗。隨後，我們還需要有JavaScript的經驗，要不怎麼做前端呢？

同時，我們還需要對DOM有一些基礎的瞭解，才能做一些基本的操作，如修改顏色等等。在這種情況下，最簡單的方案就是使用jQuery這樣的工具。不過，如果可以自己操作DOM是再好不過的了。

中級篇

中級篇就更有意思了，現在我們就需要對頁面進行更復雜的操作。Ajax和JSON這兩個技能是必須的，當我們要動態的改變頁面的元素時，我們就需要從遠端獲取最新的資料結果。並且我們也需要提交表單到伺服器，RESTful就是必須要學會的技能。未來我們還需要Fetch API，ReactiveX這些技能。

除此我們還需要掌握好HTML的語義化，像DIV / CSS這也會必須會的技能，我們應該還會使用模板引擎和SCSS / SASS。而這個層面來說，我們開始使用Node.js來完成前端的構建等等的一系列動作，這時候必須學會使用命令列這類工具。並且，在這時候我們已經開始構建單頁面應用了。

高階篇

JavaScript是一門易上手的語言，也充滿了相當多的糟粕的用法。幾年前人們使用CoffeeScript編成成JavaScript來編寫更好的前端程式碼，現在人們有了ES6、TypeScript和WebPack來做這些事。儘管現在瀏覽器支援不完善，但是他們是未來。同樣的還有某些CSS3的特性，其對於某些瀏覽器來說也是不支援的。而這些都是基於語言本來說的，要寫好程式碼，我們還需要掌握面向物件程式設計、函數語言程式設計、MVC / MVVM / MV*這些概念。作為一合格的工程師，我們還需要把握好安全性（如跨域），做好 授權（如HTTP Basic、JWT等等）。

工程化

這個標題好像是放錯了，這部分的內容主要都是自動構建的內容。首先，我們需要有基本的構建工具，無論你是使用gulp、grunt，還是隻使用npm，這都不重要。重要的是，你可以自動化的完成構建的工具，編譯、靜態程式碼分析（JSLint、CSS Lint、TSLint）、對

似乎你是誠心在問，我就給你一些提示。

我現在不管你什麼水平，總之你自己說了，小白水平。

我就讓你做一件事，就是去看招聘網站，定位到你的城市，看你們城市的招聘啟事。

然後你統計五十個公司的招聘要求，主要看技術棧要求，比如react、vue和其他的名詞。

往死裡學這些技術棧，全學。不斷給自己立小專案，練手，不斷看影片，不斷看文章。

一年後去面試，只要收你就行。必須進入實踐。

沒有玩手機的時間，沒有打遊戲和幹其他無聊的事的時間。

若干年後，相信你可以成為大神。

其實中國有很多程式設計師，但是大神畢竟是少數，絕大多數都是普通程式設計師。都說程式設計師工資高，但是內部也有很多區別。前端相對來說入門容易一些，而且可以透過網頁直接看到效果，上手起來比較快。因為語言大都是相通的，學會了一個，理解起來另一個也會容易一些。

所謂小白呢，我覺得也不能是程式設計知識一點不會，要麼大學選擇計算機，要麼你去培訓直接點，雖然現在教學質量大多數都很一般，但是可以讓你先入門，知道什麼是什麼，先會做東西；像我本科也不是計算機專業，後來去培訓的，理解能力確實有限，相信很多培訓的朋友跟我有同樣的經歷，但是還是比較好學的，所以工作之後能幹活，能完成專案，當然也只停留在能幹活的階段，很多東西仍然是不理解，什麼叫閉包，什麼是類，回撥。但是隨著工作多了，看得多了，程式碼寫的多了，仿著高手寫，慢慢自己的理解也提升了，知道怎麼用，怎麼最佳化程式碼。所以程式設計師經常講經驗很重要嘛，見的多了，怎麼設計，怎麼對接也就懂了。

之後學著去看原始碼，像underscore這種工具，像vue框架的原始碼，學會閱讀，網上也有教你怎麼讀原始碼的教學，站在巨人的肩膀上也是這個道理，我的能力是有限，取他人之長嘛，慢慢提升，也不可能一口吃成個胖子；看原始碼過程中，結合面試常見問題，你的理解一定會有個提升的。

要去了解設計模式，是一種思想，在大型專案的架構中起著很重要的作用。像你開始工作時候，程式碼真的是牽一髮而動全身，又相互依賴，改了一出都要改，這就是最開始設計的不合理；但畢竟剛工作，做出來已經不錯了。但當你經驗多了，可以帶團隊了，不能只是讓他們複製貼上，知道怎麼來的，知道為什麼這麼設計。多做技術交流，內部的也好，和外部的也好，思想是在碰撞中產生火花的。

最後呢，一定要去大廠，與優秀的人在一起，就算你再笨，耳濡目染也能有所提升，在小公司就算做的再好，也是差一些的。像我開始工作時候，公司就我一個前端，學習基本就靠影片了，有所提升，但是還是很菜。但讓也很感謝之前的領導給我機會，但是為了更好的發展還是選擇離職提升自己，不面試不知道自己有多菜，平時工作感覺還可以，但是很多東西都是沒有考慮到的。