前端自學路線之綜合篇

接以前的兩篇，今天來聊聊前端學習路上的雜七雜八的東西。若是說切圖和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插件來完成壓縮、合併、打版本號、編譯ES六、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這樣的播放器工具。這些就是廣度方面的擴展了，前端的業務場景不少，你要能知道什麼場景下用怎樣的解決方案，業界是否是已經有成熟的開源庫了，它們有哪些坑，等等。

 

今天就說這麼多了，我發現我囉嗦的功力真是見長了~ 一提及來沒完~~固然我列的確定是不全的，你們也能夠在留言中補充哦。