接之前的兩篇，今天來聊聊前端學習路上的雜七雜八的東西。如果說切圖和js還可以縷出一條路線的話，今天的內容可真是無路可尋，因為很多前端知識都是網狀的，需要你一點一點去覆蓋。我今天把能想到的先羅列一下，供大家查漏補缺。
效能優化
這是每個前端都要具備的“硬實力”，因為效能優化的時候會涉及到方方面面的知識。常規的手段如：合併http請求、圖片sprite、精簡DOM、本地快取、合理的內聯和外鏈js和css、預載入、懶載入。再考驗功力的就是程式碼層次，如快取DOM物件、減少訪問屬性次數、避免迴流、函式節流、瀏覽器渲染分析等等。
關於渲染分析，你得學會使用Chrome DevTools，通過Timeline來分析頁面渲染的瓶頸在哪裡，是哪個環節出了問題，應該如何針對處理。
如果是PV較高的web站點，你還需要做統計指令碼，上報一些效能指標，如：白屏時間、首屏時間、關鍵功能可用時間、documentReady時間、頁面載入完畢時間。分析影響效能的節點並做優化。
SEO
SEO也算是頁面優化的一個重要課題，你要了解搜尋引擎的爬取規則，寫好keyword和description，優化頁面結構，規範使用語義化標籤，比如重要的標題都放在<h1>...<h5>。減少頁面體積，外鏈高質量連結等。
當然以上是技術層面的基礎工作，其實做好SEO還需要在運營上下功夫，比如和高質量網站交換連結獲得更多內鏈。終極必殺技就是直接去找搜尋引擎供應商“洽談”，讓其人為增加你的網站排名。當然這是技術之外的事情了，瞭解有這麼回事就行。
瀏覽器相容
這也是任重而道遠的一件差事，儘管現在IE6已經被我們無視了，但它畢竟真實存在過，你也可以關心一下它都有哪些“經典”bug，比如盒模型啦，float問題啦，height問題啦等等。如果現在你能在面試的時候對IE6如數家珍，那必然能證明你有著很廣的知識面。
除卻IE，其他瀏覽器也有一些知名相容問題，比如Firefox在監聽事件的時候如果不顯式寫event引數會報錯。
當前階段最大的相容工作應該是在移動端，你得接觸一下各種安卓手機，寫寫移動端頁面，知曉那些曾經“經典”的相容問題。比如iPhone5上的position: fixed不支援，iframe滑動不支援，點選穿透，彈出軟鍵盤後的詭異問題等。安卓上的問題那就更多了，司徒正美的github上收集了很多，可以去查閱。
小遊戲
做前端的沒寫過H5小遊戲，那也算一點欠缺吧。通過寫一個小遊戲，首先你能對canvas有一個全面的使用，當然用CSS3動畫也是可以寫出遊戲的（我部落格有例子）。其次你能對js的延遲函式setInterval有一個更深入的理解，你會了解到瀏覽器是如何重新整理渲染的，什麼是幀率，為什麼會產生掉幀。用requestAnimationFrame為什麼能夠保證不掉幀。
寫小遊戲也能鍛鍊你用物件導向思維編碼的能力，因為遊戲通常比頁面更容易抽象出物件。同時也鍛鍊你組織程式碼的能力。當你能完成一個小遊戲的時候，再寫網頁上的動畫效果，那就是小菜一碟了，因為遊戲的本質也就是動畫嘛。而且遊戲對效能的要求更高，也會促使你寫出更極致的程式碼。
如果你對小遊戲別有興致，還可以嘗試專業的引擎，比如cocos2d-js，box2D以及國外的一些知名引擎。
http協議
這也是一塊硬骨頭啊，比較難啃。但作為web開發者，對web的老祖宗還是需要了解的。你起碼要知道http的請求頭和響應頭中都有哪些欄位，這些欄位都是幹嘛的。如何通過http頭來控制快取，catch-control，expres、last-modified這些都有什麼區別。https也得了解下，它的對稱加密和非對稱加密是怎麼回事，證書是怎麼回事。https如何讓傳輸更安全的，他的侷限又在哪裡。
這塊內容我本人也不是學的很好，要系統學習的話推薦還是看書吧。《http權威指南》比較枯燥，如果你看不下去的話可以試試《圖解http》，這本會易讀很多。
前後端分離
很多前端招聘啟事都會寫，懂後端語言的優先，作為web開發的兩架馬車，如果你能瞭解旁邊的另一架，那自然是再好不過。資料庫層和model層你可以少關心，但至少controller層你還是得能看懂的，因為這是直接與前端對接的地方。
前後端分離也是曾經比較熱門的話題，由曾經的後端渲染，經歷了前端全部渲染、資料全非同步請求，再到後來的後端渲染首屏，再到後來的nodejs作為中介軟體，才算有了一個結論。
其實在現實專案中，前後端分離還是會有各種迥異的方案，都是根據專案的具體情況來搞的，也並不是所有公司都在用nodejs。你需要了解的就是，前後端分離到底是在解決什麼問題，分離的是什麼，有哪些常用方式。
前端工程化
把前端工程化簡單的理解為gulp/grunt/webpack構建，其實是有點淺，因為工程化還要考慮實際專案的各種特殊需求。但是在學習階段，如果我們能掌握好這些構建工具，也就足夠了。
你可以嘗試用gulp外掛來完成壓縮、合併、打版本號、編譯ES6、jslint檢查等常規任務，知道現在都有哪些外掛能用，知道他們是如何在nodejs這個大環境中執行的。此時你也會接觸到nodejs中的一些基礎知識，比如一個commonjs模組的基本規範，nodejs提供的模組以及各種API等。
關於前端工程化，其實是建立在對開發-除錯-上線流程的理解之上，對這一系列流水化工作進行的自動化。參考資料當然首推張雲龍的，github上能搜到。
nodejs
一年前不懂nodejs還是可以“正常工作”的，但是現在已經不行了，一方面是基於前端工程化的原因，現在前端團隊基本都有了自己的工作流，無論gulp、webpack還是npm scripts，都是建立在nodejs環境之上。所以你必須要懂點nodejs了，能做到自己摸索著搭建出開發環境就夠，其實這一過程也是比較繁瑣的，難怪有人調侃現在的前端要變成“配置工程師”了。
另一方面，nodejs作為一個服務端執行的語言環境，現在越來的越多的被用在業務開發中了。連我們這樣重後端的公司，今年都開始用到nodejs。當然最多的場景還是把它作為一個“中轉層”，也就是接收前端請求進行預處理，對返回資料進行二次處理，與資料訪問層對接等。
也有一些公司會把nodejs直接用來作為業務層，畢竟nodejs下有很多模組還是很好用的，比如用PhantomJs做爬蟲或者動態截圖等等。
nodejs的框架的話，我建議從express入手，畢竟算是比較經典的一個框架，而且也足夠簡單。另外像koa以及國產的ThinkJs，在一定程度後也可以開始學習。
其他
上面羅列了8個方面，都是前端比較重要的領域，需要你有一個深入的瞭解。其他的還有沒有了呢？當然是有的，再列也列不完了，所以我簡略說說。
正規表示式、設計模式，使用率雖然不是很高，但是也總有需要用的時候，所以也需要你有一個知識儲備。
關於知識儲備上，你還應該養成閱讀規範和原始碼的好習慣，比如：W3C、ECMA、commonjs/AMD、Promise這些有名的規範文件，沒事就可以翻閱，技術深度就從這而來。
作為一個前端老手，你也應該對業界有名的一些開源工具類框架有所接觸，比如百度的ueditor、webuploader、echarts，圖表類中的highcharts，以及像jplayer這樣的播放器工具。這些就是廣度方面的擴充套件了，前端的業務場景很多，你要能知道什麼場景下用怎樣的解決方案，業界是不是已經有成熟的開源庫了，它們有哪些坑，等等。
今天就說這麼多了，我發現我囉嗦的功力真是見長了~ 一說起來沒完~~當然我列的肯定是不全的，大家也可以在留言中補充哦。