出自：http://imweb.io/topic/56a6fbd0e39ca21162ae6c10
一、框架與組件
**bootstrap等UI框架設計與實現
- 伸縮佈局：grid網格佈局
- 基礎UI樣式：元素reset、按鈕、圖片、菜單、表單
- 組件UI樣式：按鈕組、字體圖標、下拉菜單、輸入框組、導航組、麪包屑、分頁、標籤、輪播、彈出框、列表、多媒體、警告
- 響應式佈局：佈局、結構、樣式、媒體、javascript響應式
- 第三方插件：插件管理
**jQuery、zepto使用原理以及插件開發
- 支持amd、cmd、全局變量的模塊化封裝
- $.fn.method = function(){}
**mvc/mvvm框架原理設計，vue/angular/avalon等
- directive設計：html、text、class、html、attr、repeat、ref，可擴展
- filter設計：bool、upperCase、lowerCase，可擴展
- 表達式設計：if-else等實現
- viewmodel結構設計：例如數據，元素，方法的掛載與作用域
- 數據更變檢測：函數觸發，髒數據檢測、對象hijacking
**polymer/angular2思想與設計思路
- import技術
- template和script引入方式
- css樣式命名空間隔離
- 簡單複用第三方庫
**reactjs原理與使用
- virtual dom單向數據綁定
- js執行語法方式
- UI由狀態控制
......
二、構建生態
**grunt/gulp開發環境任務編寫
- 文件處理插件：html、scss、js、image、font、其它
- 優化插件：雪碧圖、圖片壓縮、iconfont構建
- 發佈替換插件
- 打包、壓縮包插件：組件自動分析
- 白名單配置
- 自定義插件編寫
......
三、開發技巧與調試
**fiddler加willow基礎組合調試
- 常見配置與分析
- 結合瀏覽器調試
werien、vorlonjs遠程調試，chrome inspect 代碼自動化檢查fecs
......
四、html、css與重構
**jpeg、webp、apng、bpg圖片
- 編碼原理
- 特點與優劣勢
- 適用場景
**iconfont使用與實現原理
- 自動打包構建方法
- iconfont兼容性寫法
- fonthello、fontawesome、icomoon.io、iconfont.cn線上工具
**頁面響應式設計
- layout佈局響應式
- html結構響應式
- css樣式響應式
- image媒體響應式
- javascript響應式
- media query與平臺判斷
**css重置
- reset
- nomalize
- neat
**sass/compass/less/postcss常用語法與使用
- 常用語法功能
- 組件化UI設計管理
- 構建工具實現方案
- 雪碧圖自動合成
- iconfont自動接入等等
**media query與常見頁面尺寸瞭解
- 媒體類型引入和媒體特性引入
- device-width適應
- retina屏幕適應
**em,rem原理與實現
**code4ui、code4app、初頁、maka等
- 前端dom操作即使刷新前端頁面
- 根據dom操作生成組件config配置保存到db
- 根據config配置使用r.js或webpack打包
- 發佈打包後輸出文件
**css3動畫
- transform
- animation
- transiction
- 3D加速與動畫加速
- 動畫庫
- cubic-bezier：http://cubic-bezier.com/
**css網格佈局
- susy
- Responsive Grid System
- Fluid 960 Grid(adaptjs)
- Simple Grid
**搜索引擎與前端SEO
- tdk優化
- 頁面內容優化
- 唯一的H1標題
- img設置alt屬性
- nofollow
- url優化
- 統一鏈接
- 301跳轉
- canonical
- robot優化
- robots.txt
- meta robots
- sitemap
- SEO工具
- 各種站長工具等
**瀏覽器緩存種類，resources,webSQL,indexDB, localstorage,cookie,app cache,cache storage
- store.js、cookie.js
**UI框架
- bootstrap、jqwidgets、semantic ui、amaze ui
- 微信手Q ui: frozenui、weui、blend ui
- extjs、echart圖表ui
......
五、native/hybrid/桌面開發
**ionic移動開發方案
- 運行架構
- hybrid混合開發
- cordova交互
- 離線包更新
- 性能瓶頸
**nativescript移動開發方案
**react Native移動開發方案
- 運行架構：js引擎
- 性能缺陷與內存泄露
- 更新機制
- 使用場景
**android/ios原生開發與框架
- java
- oc、swift
- web與native交互
- 屏幕旋轉
- 搖一搖
- 錄像，拍照，選取本地圖片
- 打電話，發短信
- 電池電量
- 地理位置
- 日期選擇
- 開啓硬件加速
**桌面應用開發
- nodewebkit
- 網易Hex
- pomelo(遊戲服務器框架)
- react desktop
- appjs:appjs.com
......
六、前端/H5優化(另一個圖已給出)
**yslow、pagespeed
**移動web性能優化
- 單頁面及路由實現
- 業內著名站點案例分析
......
七、全棧/全端開發
**express/node club + mongodb、thinkjs等框架
**cdn與dns
- 動態域名加速
- cdn原理與cdn combo
......
八、研究實驗
**WebAssembly、webTRC、typescript
**Material design規範的前端框架
- 交互動效庫
**AMP-HTML規範
- 使用受限HTML以及緩存技術來提高移動網絡中靜態內容的性能
- 添加自定義的元素代替禁用掉的元素：amp-audio, amp-img、amp-video等
......
九、數據分析與監控
**badjs數據上報
**點擊熱力圖clickHeat、heatMap
**js加載失敗優化方案
- 失敗重發機制
- 加載源域名服務器文件
- https反劫持
**百度alog數據上報
......
十、其它軟技能
**axure 原型圖設計
**xmind腦圖管理
**效率管理
**can i use、github
**知識管理/總結分享
**產品思維與技能
......
十一、前端技術網站
**技術社區
- alloyteam、html5基地
- W3 help
**行業會議
- segmentfault會議
- 深js、杭js
- GMIC(全球移動互聯網大會)
- D2、webrebuild
- infoQ內容、Qcon、velocity
完整版地址 https://ouvens.github.io/frontend-resource/2016/01/26/front-end-learning-list.html