一、框架與組件
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加速與動畫加速
動畫庫
緩動函數速查表： http://www.xuanfengge.com/easeing/easeing/
Ceaser： http://xuanfengge.com/easeing/ceaser/
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