只要能看到的，不管是 app，小程序，pc端，都是前端做的
前后端分離模式下，只需要從服務器獲取數據，展示到頁面，
或者把客戶端獲取到的數據傳遞給服務器，屬于應用層和交互層

后臺需要處理數據，需要會算法
通過算法考察思維邏輯

動手是學習的重要組成部分：書籍中的每一個例子都動手實現并在瀏覽器中查看效果
掌握原生javascript的基礎上推薦熟練掌握jQuery，在實際工作中用處很大

Grunt：前端自動化工具，提高工作效率
less css：優秀的CSS預處理器
bootstrap：優秀的CSS框架，對沒有設計師的團隊很不錯，與less結合使用效果完美
requirejs：AMD規范的模塊加載器，前端模塊化趨勢的必備工具
Node.js：JavaScript也可以做后臺，前端工程師地位更上一步
AngularJS：做Single Page Application的好工具
移動端web開發：智能手機的普及讓移動端的流量正在逐步趕超PC端
Javascript內存管理：SPA長期運行需要注意內存泄露的問題

工具
chrome dev tools：前端開發調試利器

著重注意幾個功能：
console（廢話）
elements:元素樣式調整，很常用
sources：代碼中添加斷點，單步調試，以及單步調試過程中查看內存中的對象
watch expression：通過表達式查看當前內存中的值
call stack：查看調用棧，開啟async，可以看異步調用棧（這個非常有用，尤其是ajax調試的時候）
scope variables：作用域鏈上的變量，非常有用
network：抓包查看每個請求，非常重要，前后端聯調必備
timeline：分析渲染、js執行等等各個階段，性能優化利器
emulation：模擬移動端環境，mobile頁面開發必備

一些插件:
liveload: 修改頁面后自動刷新，不用按F5
dimensions：直接在頁面上測量的利器
livestyle：css樣式修改后自動起效果，不需要刷新，elements修改后也能同步到代碼中
image tool：測量，取色
UC二維碼：移動端調試掃碼必備
pagespeed，YSlow：頁面性能分析和優化插件
馬克飛象：優秀的在線markdown編輯器，快速寫周報，做記錄

Mark Men：測量、取色、標注利器，拿到視覺稿之后第一個打開的軟件
GFW Fucker：我用紅杏，可以的話買個虛擬服務器當梯子
iHosts：非常優秀的hosts管理軟件，輕松修改hosts，開發調試必備
Charles：Mac 平臺最好用的抓包分析工具
Rythem：AlloyTeam出品的代理抓包軟件，非常輕量，安裝簡單，移動端（真機）開發調試很好用
Wunderlist：一個非常不錯的Todo List，任務、需求多的時候管理起來很方便

語言基礎

JavaScript：
作用域鏈、閉包、運行時上下文、this
原型鏈、繼承
NodeJS基礎和常用API

CSS：
選擇器
瀏覽器兼容性及常見的hack處理
CSS布局的方式和原理（盒子模型、BFC、IFC等等）
CSS 3，如animation、gradient、等等

HTML：
語義化標簽

進階

JavaScript:
異步控制（Promise、ES6 generator、Async）
模塊化的開發方式（AMD、CMD、KMD等等）
JavaScript解釋器的一些相關知識
異步IO實現
垃圾回收
事件隊列

常用框架使用及其原理
jQuery：基于選擇器的框架，但個人認為不能叫框架，應該算工具庫，因為不具備模塊加載機制，其中源碼很適合閱讀鉆研
AngularJS/Avalon等MVVM框架：著重理解MVVM模式本身的理念和雙向綁定的實現，如何解耦
underscore：優秀的工具庫，方便的理解常用工具代碼片段的實現
polymer/React: 組件化開發，面向未來，理解組件化開發的原理

CSS和HTML：主要是CSS3的特性和HTML5的特性，以及瀏覽器處理的流程和繪制原理

DOM樹、CSSOM樹、渲染樹的構建流程及頁面渲染的過程
解析HTML、CSS、JavaScript時造成的阻塞
HTML5相關
SVG及矢量圖原理
Canvas開發及動畫原理（幀動畫）
Video和Audio
flex box布局方式
icon fonts的使用

常用NodeJs的package：
koa
express
underscore
async
gulp
grunt
connect
request

一些理念：
響應式Web
優雅降級、漸進增強
don’t make me think
網頁可用性、可訪問性、其中的意義
SEO搜索引擎優化，了解搜索引擎的原理
SPA的好處和問題

性能優化：
減少請求數量（sprite、combo）
善用緩存（application cache、http緩存、CDN、localstorage、sessionstorage，備忘錄模式）
減少選擇器消耗（從右到左），減少DOM操作（DOM和JavaScript解釋器的分離）
CSS的回流與重繪

項目

版本管理：首推Git，用過Git都不會想用SVN了
Git：本地版本管理的機制
SVN：遠程中心的版本管理機制

自動化構建：主要就是less、模板、coffee等的預處理以及對代碼壓縮和合并
Gulp：基于流構建，速度快、模塊質量好
Grunt：獨立任務構建，速度慢，配置蛋疼，靈活性高

預處理和模板引擎
less：語法簡單，但功能有限
jade、ejs、velocity等模板引擎，各有各的長處 - caffe：python工程師最愛，我沒用過

環境搭建：主要是將線上代碼映射到本地，并在本地啟動一個demo服務器，至于模擬數據的mock，見仁見智了
本地代理：ihosts

自動化測試：在業務較為穩定的情況下，可以通過自動化測試來減少測試的事件，但需求較多的時候，維護測試用例的成本會很高，可能用自動化測試會起到反效果
jasmine
mocha

生態系統
npm
bower
spm

搭建一個屬于自己的博客
git pages
hexo
jekyll

未來

Web Componets：面向未來的組件化開發方式
HTML模板
Shadow DOM
Custom Elements
HTML Import

移動端Native開發：這也是需要了解的，以后前端工程師會經常地和webview打交道，也要了解native開發

其他
有些東西不是考敲碼就能弄好的，

• 對于業務的思考：我個人這方面非常欠缺，所以放在最前面，在敲碼前要多思考業務
• 交流和溝通能力：這個非常重要，前端同時需要與項目經理、產品、交互、后臺打交道，溝通不善會導致很多無用功，延緩項目
• 知識管理、時間管理：input和output的平衡，output是最好的input。如何做好分享，參與社區，做好交流，作好記錄
• 對新技術的渴望，以及敢于嘗試

入門書
入門可以通過啃書，但書本上的東西很多都已經過時了，在啃書的同時，也要持續關注技術的新動態。
《JavaScript高級編程》：可以作為入門書籍，但同時也是高級書籍，可以快速吸收基礎，等到提升再回來重新看
《JavaScript權威指南》：不太適合入門，但是必備，不理解的地方就去查閱一下，很有幫助
《編寫可維護的JavaScript》
《JavaScript DOM編程藝術》學習JavaScript和DOM開發的必讀之作。
《Node.js開發指南》：不錯的Nodejs入門書籍
《深入淺出Node.js》：Nodejs進階書籍，必備
《JavaScript異步編程》：理解JS異步的編程理念
《JavaScript模式》和《JavaScript設計模式》：JavaScript的代碼模式和設計模式，將開發思維轉變到JavaScript，非常好的書
《JavaScript框架設計》：在用輪子同時，應當知道輪子是怎么轉起來的，講解很詳細，從源碼級別講解框架的各個部分的實現，配合一個現有框架閱讀，可以學到很多東西
《Don`t make me think》：網頁設計的理念，了解用戶行為，非常不錯
《CSS禪意花園》：經久不衰的一部著作，同樣傳遞了網頁設計中的理念以及設計中需要注意的問題
《高性能JavaScript》和《高性能HTML5》：強調性能的書，其中不只是性能優化，還有很多原理層面的東西值得學習
《HTML5 Canvas核心技術》：我正在讀的一本書，對于canvas的使用，動畫的實現，以及動畫框架的開發都非常有幫助
《HTTP權威指南》：HTTP協議相關必備，前端開發調試的時候也會經常涉及到其中的知識
《響應式Web設計》：技術本身不難，重要的是響應式網頁的設計理念，以及移動先行的思想
《JavaScript語言精粹》：老道的書，也是普及JavaScript的開發思維的一本好書，非常適合入門

一些不錯的網站

• github：沒啥好說的，多閱讀別人的源碼，多上傳自己的源碼，向世界各地的大牛學習
• codepen：感受前端之美的必選之地，里面有很多酷炫的效果和優秀的插件
• echojs：快速了解js新資訊的網站
• stackoverflow和segmentfault：基本上各種問題都能在上面獲得解答
• google web fundamentals：每篇文章都適合仔細閱讀
• static files：開放的CDN，很好用
• iconfont：阿里的矢量圖標庫，非常不錯，支持CDN而且支持項目
• html5 rocks: 一個不錯的網站，很多瀏覽器的新特性以及前沿的技術，都能在這上面找到文章
• css tricks：如何活用CSS，以及了解CSS新特性，這里可以滿足你
• JavaScript 秘密花園 JavaScript初學必看，非常不錯
• w3cplus：一個前端學習的網站，里面的文章質量都挺不錯的
• node school：一個不錯的node學習網站
• learn git branch：一個git學習網站，交互很棒
• 前端亂燉：一個前端文章分享的社區，有很多優秀文章
• 正則表達式：一個正則表達式入門教程，非常值得一看
• 阮一峰的博客和張鑫旭的博客：快速了解某些知識的捷徑，但是如果需要深挖，還需要其他的資源
• 各路大牛的博客：知乎上有很全的
• 各種規范的官方網站，不懂得時候讀規范

前端的定位
前端技術日新月異，范圍越擴越寬，標準越來越豐富，似乎任何一個觸角都能伸出很遠。怎么給前端一個合適的定位？
用戶和網站的聯結者，用戶體驗的創造者
不管你是從交互設計上下手，還是從性能優化出發，或者改進工作流提升工作流效率，最終都是為了創造和提升用戶體驗，最終都要體現到用戶體驗這一點上來。

現在的前端工程師做到一定階段不可避免會接觸到很多比切頁面、實現視覺要求、實現交互等更深入的問題，比如前端自動化、圖像編程、性能優化等等，再往后推一點就是PHP/JSP/ASP/nodeJs，
現在隨著前端架構的演進，可能會讓你去寫后端模板的代碼，需要用到后端語言（PHP/Java/C#等），這就是所謂大前端（然而這與前端的定位并不是相背離的，大前端處理的依然是與用戶接觸的部分，仍然是對用戶體驗的優化）。可能最常見或者被談論最多的就是node，其實這幾種技術選型都可以，bat三家據說百度用PHP比較多，阿里用node比較多。

玉伯在他的博客里提過所謂全端是橫向的，全棧是縱向的。全端即所有的終端說白了都是前端，因為都關乎到用戶體驗，直接和用戶接觸。適應多終端的開發，要求你在web前端的基礎上，可能還要去擴展android開發和ios開發的知識，好在由于hybrid開發方式的流行，對使用native語言開發的技能會要求的不那么深入。

總結

以上是生活随笔為你收集整理的前端方向-学习指路的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。