如何在有限時間內儘可能高效率地學習前端？

01-23

原文鏈接：如何在有限時間內儘可能高效率地學習前端？ · LuckyJing Blog
作者：luckyjing

本文寫於2016年4月24日。

當你看到標題，便有一種本能點進來瞅瞅的時候，你可能是初涉前端，想在找工作前夕儘快地豐富自己的技能；也可能已經是前端經驗非常豐富的人，來瞧瞧這個小子會寫一些什麼奇怪的文字；當然，你也可能是涉及任何一個領域，和我一樣想在畢業後寫代碼掙錢養家的程序員，無論角色怎樣，如果你身邊有在前端路上稍微迷茫的同學的話，或許我的一點心得能夠幫上一些忙，下面是仔仔的一些感悟，水平有限，所以還請多多包涵。

我今年大三，大一下學期開始接觸前端，在一波波春季實習生招聘的浪花里，收穫了阿里，騰訊，網易三家的前端實習生offer，結果也出乎我的意料，但是真心覺得js是世界上最好的語言。（玩笑話）

撇開具體細節來講，前端相對於後端，直接擺在了用戶面前，如果說後端面向的主要是業務邏輯，資料庫，操作系統，那麼前端面對的是用戶交互和體驗。不妨這麼理解，為了提高用戶的體驗，我們需要使用CSS去做樣式美化，需要使用JavaScript去完成一些如輪播圖，模態框之類的交互組件，同樣為了提高用戶的體驗，我們需要去做SEO優化，需要去考慮性能優化，去做腳本壓縮，去做緩存控制，同時也為了我們自己開發方便，我們需要去學習使用一些自動化工具來解放我們的雙手……

如果再有人問你前端是什麼，就告訴他們這是一個使用一大堆技術，用以提高用戶體驗的領域。

或許現在有同學們正在入門前端，內心頗感焦慮，其實只要堅定了這條路，那麼一定可以學好，並且找到心儀的工作的。下圖是我總結的一套學習流程。

從一些簡單的書籍入手，多進行些廣而淺的學習，後進行精而深的學習，在有限的時間內，應儘可能多地掌握一些基本知識，然後更多地進行實踐。在學習中遇到了解決不了的問題，就去查，隨後就及時做記錄，然後再回過頭去實踐，往複這樣的過程，提升會很快，下面我會根據個人的一些理解寫上一些參考的學習經過，畢竟這是一個工程量很大的問題，所以會把平常參考的一些資料放在末尾，供大家更加細緻的了解。

灌輸知識篇

可以選擇在W3school，這裡有非常全而且基礎的教程，完全足夠我們入門，學過之後，我們應該對整個前端開發用的技術有初步的了解。最終效果可以達到：我可能不太懂太多，但是我知道這個名詞，懂這個API，知道簡單的使用。
可以在慕課網結合著視頻進行學習，但是我覺得視頻僅僅只能陪伴我們走到入門階段，隨後需要自己去養成一套學習方法去自主學習，所以不太建議一連串地全部學完之後再去手敲代碼，而是學一點，敲一點，照著誰敲呢？可以是上述的W3school。
另外一本書便是大名鼎鼎的JavaScript高級程序設計了，建議買正版，這本書適合新手讀，更適合老手讀，比如可以在看完慕課網的視頻之後來照著此書敲一敲學一學，感覺很酸爽，有句話是學得快，忘得快，所以得經常來回翻一翻，每次讀完都會有新的感受。
當然W3school肯定滿足不了聰明的你，所以再次奉上殺手鐧MDN，中文的就不要看了，強迫自己去看英文的吧，你所需要的一切的解釋，應有盡有。
在線文檔平台也不能錯過，極力推薦瀏覽器版本DevDocs，Mac上推薦Dash。
光看文檔太枯燥，想去看看別人的理解怎麼辦，可以去博客園，掘金進行海搜，遇見大牛的幾率很大，然後就毫不猶豫地收藏到你的收藏夾里去吧。
更有針對性的就可以去了解一下BAT，360有哪些了不起的前端團隊吧，關注他們，或許未來就在其中了。
目前推薦的東西都有個先決條件，就是需要聯網，可是愛學的你或許在熄燈後上床也要看書，在教室聽著Java課，心裡卻想著JavaScript，所以特意為你推薦GitBook，裡面有高質量的文檔，國內的有看雲KanCloud，可以更好接收一些，它們都可以下載，一定要下載epub格式，隨時隨地裝入你的手機和平板，iPhone里的iBooks，其他平台里推薦iReader。
除了一些直接的知識，我們也需要社區文化，自豪地擁抱SegmentFault,StackOverflow吧，程序員的百度知道。
GitHub是我們每一個人都需要常去的地兒，你需要知道，一切代碼的來源，99%都在這兒，所以想知道些最新動態，花點時間泡在這兒准沒錯。

HTML並不是一門編程語言，它只是一些簡單的標記罷了，也不需要花太多功夫去記住全部的標籤，按需使用便可，入門後我們也大概清楚了CSS是一些標記對，通過描述樣式來一層層疊加在諸如id和class之類的標籤上，清楚了JavaScript在寫法上的隨意，但是隨意會帶來一些陷阱，諸如變數聲明提升,函數作用域。具體地可以自己體會一下：

var name = "webLearner";function f(){ console.log("1:"+name); var name = "LuckyJing"; console.log("2:"+name);}f();// result1. undefined2. LuckyJing

環境搭建篇

前端可以說是離命令行最遠的一個角色了，不過，我們應該離命令行越近越好。

翻牆，以下大部分都建立在翻牆的基礎上，目前常用的工具是Shadowsocks，我目前使用的是飛訊VPN，它的配置也簡單一些，費用個人使用的話是28元/月。
在Linux環境下工作吧，至少是在shell下工作吧，使用windows的同學們去下載git吧，它會攜帶git bash，它是shell的一種，然後用它替換掉自帶的命令行吧。
2016年12月15日更新：試著擁抱下Docker吧，本博客有新手教程，很簡單哦。文章地址
離命令行近了以後，我們就必須需要去下載Node.js，這是我們使用以下工具的基礎，不用擔心不會，目前只是提供一個運行環境而已，不需要去深入了解內部的東西。
了解npm，學習package.json，這會極大程度上提高前端編寫規範和合理性，簡單的理解npm install --save和npm install --save-dev便可。
在入門後，發現前端跟玩具似的，引入個<link/>,<script/>就算引入模塊了，就可以用了，或許你現在是這樣的：需要bootstrap，去百度搜，找到了官網，然後下載下來，然後複製到工作目錄之下，然後引入，需要jquery的時候亦是如此，好的工作流可以無形中提升工作效率和編碼信心，所以就此擁有模塊的概念吧，試著去npm install -g bower，它很簡單，畢竟它只是一個工具，沒有人會喜歡複雜的工具的，具體的信息你都可以在npm網站上去找到。
或許你一直很好奇，輸入網址伺服器是怎麼返回頁面給客戶端的，這其實是在伺服器端那兒它一定運行著一個伺服器程序，它來分發資源。所以在本地我們也需要一套伺服器端程序，使用更加輕量的nginx吧，它足夠鑽研很久，但是對於初級學習來說的話，你只需要知道，我可以通過localhost訪問到如下圖所示的html文件夾，然後以後將項目放入其中，通過諸如localhost/demo/1.html之類的方式進行訪問即可，有的時候我們想更換埠號，那麼就去了解conf文件夾裡面的配置信息吧，下載下來後，雙擊nginx.exe便會有一個一閃而過的命令窗口，這個時候其實nginx服務已經啟動了，在瀏覽器輸入localhost便能看到了。

作為切圖仔，我們能夠使用的編輯器也非常多，推薦Visual Studio Code Atom WebStorm，前兩個是簡而美的編輯器，啟動速度非常快，能夠滿足大部分要求，不過在做大項目的時候，還是得用WebStorm,寶寶上可以買激活碼，不推薦Sublime的原因是，配置起來比較麻煩，而且更新速度和維護質量沒有前幾個高，當然這只是我個人想法啦~

整理知識篇

如果光一味地嗖嗖地學習，那麼遺忘率會非常高，而且經常會有一種感覺自己啥也沒學到的錯覺，所以現在開始記錄博客吧，寫點文字，提醒自己，原來我會這麼多。

Markdown，它就是一些標記，5分鐘入門，10分鐘熟練綽綽有餘，它可以盡量幫助我們擺脫滑鼠，去百度搜索馬克飛象吧，照著敲敲，感悟一下神奇。
方便的寫作平台-簡書，起初簡書的本意是容納一些真正的愛寫文字的一群用戶，誰知道還招來了一大批程序員，包括仔仔在內,所以不妨選擇它作為你的博客起點吧，只需要在設置里切換為Markdown格式便可以，而且它支持導出所有博文為md格式，方便遷移。

會了Markdown，了解了GitHub，不妨去了解下靜態博客搭建吧，使用Hexo和免費的GitHub託管。

不太喜歡每次靜態博客怎麼辦，推薦使用leanote，如果你用過wordpress，那麼它們在形式上更加相似，不過wordpress歷史包袱過多，所以使用原汁原味的markdown去書寫leanote吧，更值得推崇的是，它擁有全平台客戶端，完全可以做到隨寫隨更，比如我就喜歡在本地客戶端書寫，它會在有網路情況下自動同步到web端，不過需要你有一些簡單的linux伺服器知識，你可以在後期再折騰，現在，簡書完全足夠。

學習不是一味地學，積累和分享更快樂。

效率篇

我是處女座，不論做什麼時候，喜歡打理清晰，在此給大家推薦一些提高效率的工具。

思維導圖工具-XMind，免費，Windows/Mac平台都有,當我們學習知識的時候，仔仔一直堅信理解並梳理清楚才能夠算真學會了。所以我會結合博客和XMind，讓知識體系更為清晰。

圖形類工具-PowerPoint，Mac平台OmniGraffle，可能你也發現了，這篇文章裡面的配圖很多都是用Omni製作的。

不會休息的程序員不是好的切圖仔，所以使用Pomodoro管理我們自己的節奏吧，寫上20分鐘，休息上5分鐘，在5分鐘的時候思考那些沒解決的bug，保證會比坐在電腦前想著要舒服，值得高興的是，它又是一個全平台產品。

面經篇

從16年3月到4月底，也接觸過十幾次面試了，騰訊和網易的為現場面試，一對一的。大概就像下面醬紫。

但是同時也有許多是電話面試，一般不會提前通知，做好隨打隨面的準備，我們無論如何也不懂面試官的世界，所以飯點打來是常有的事情，更有同學晚上11點接到面試電話，與此同時，請隨身攜帶耳機，好的通話效果一定得保證。

不管是哪一種面試，都要儘可能把面試官當做朋友看，沒什麼好緊張的，畢竟以後就是同事了，跟聊八卦一樣聊技術而已，自我介紹不用刻意去背，自己簡單的理一下，分為基本信息，項目經驗及技能，生活興趣就好啦，不宜過多，一般3分鐘差不多，還有就是面試官在打電話時並不一定仔細看你的簡歷，所以最好不要說XX已經在簡歷上寫了，反而可以引導面試官去閱讀你的簡歷，抓住主動的機會，能夠讓自己內心快速平靜下來，自信感爆棚。

面試中最會有不會的問題，不知道知識點的就果斷說不知道吧，沒什麼不好意思的，如果是一些開放性的問題的話，比如演算法，可以本著層層深入的原則，一點一點地把想法告訴面試官，思路是最重要的，細節可以不完全對，但是要讓面試官感受到你擁有獨立思考，解決問題的能力。

面了這麼多次，其實發現考察的問題的點其實大同小異，所以技術面試的確可以準備，惡補上來，下面我簡單列一下常問的大點，具體的可以看參考資料，也可以自己去搜索別人的面經，總的來說，現在面試的時候重心越來越偏靠javascript了，對於前端（全棧）的要求也逐漸凸顯，見下圖自己體會。

HTML部分

對HTML5的理解，Web語義化，SEO
頁面載入的過程
結構組織
新增API 如本地存儲、Canvas

CSS部分

經典的聖杯布局
CSS3 transition transform animate
w3c盒子模型和 IE盒子模型，box-sizing屬性
BFC
優先順序
less 與 sass
background-* 系列屬性，這個不要忽視了，還是很重要的

JS部分

原型閉包
聲明提升
基本數據類型
高階函數
JSON
JSONP 跨域 iframe 通信
Ajax
原生DOM操作（比如逆序DOM節點）
事件捕捉，捕獲，冒泡，代理
Array常用函數
String常用函數
ES5 + ES6
框架部分（大部分按照簡歷來）
Angular臟檢查機制
手寫Angular指令，知道其生命周期
手動實現MVC（考察
衍生部分
HTTP1/2 理解、狀態碼、優化、緩存控制（必考）
TCP三次握手，四次揮手
XSS與CSRF（必考）
學習經歷和方法
性能優化
單元測試
React + Redux

參考資料：

前端零基礎學習提綱(前端零基礎學習提綱 - Samaritans - 博客園)
零基礎如何系統地學習前端開發？(零基礎如何系統地學習前端開發？ - 文章 - 伯樂在線)
Front-end Handbook(Front-end Handbook · GitBook)
TCP的建立與釋放(TCP三次握手詳解及釋放連接過程)
2016十家公司前端面試小記(2016十家公司前端面試小記 - WEB前端 - 伯樂在線)
瀏覽器的渲染原理簡介(http://coolshell.cn/articles/9666.html)
前端開發面試題(前端開發面試題 - weakish - SegmentFault)
一次完整的HTTP事務是怎樣一個過程？(The Soul of Linux)
我是如何同時拿到阿里和騰訊offer的(我是如何同時拿到阿里和騰訊offer的 - Web開發手記 - SegmentFault)

寄語

好的學習方法比什麼都重要，雖然這篇文章是在討論前端，但是絕對不局限於前端，掌握好的學習方式，可以無形中減少我們的學習成本，努力不是用耗時多少來衡量的，我們需要學好，當然也需要玩好，開心才是最重要的。共勉~

閱讀原文