接之前的兩篇，今天來聊聊前端學習路上的雜七雜八的東西。如果說切圖和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這樣的播放器工具。這些就是廣度方面的擴展了，前端的業務場景很多，你要能知道什么場景下用怎樣的解決方案，業界是不是已經有成熟的開源庫了，它們有哪些坑，等等。
今天就說這么多了，我發現我啰嗦的功力真是見長了~ 一說起來沒完~~當然我列的肯定是不全的，大家也可以在留言中補充哦。
文章列表
留言列表
