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