一、框架與組件

　　bootstrap等UI框架設(shè)計(jì)與實(shí)現(xiàn)

　　伸縮布局：grid網(wǎng)格布局

　　基礎(chǔ)UI樣式：元素reset、按鈕、圖片、菜單、表單

　　組件UI樣式：按鈕組、字體圖標(biāo)、下拉菜單、輸入框組、導(dǎo)航組、面包屑、分頁(yè)、標(biāo)簽、輪播、彈出框、列表、多媒體、警告

　　響應(yīng)式布局：布局、結(jié)構(gòu)、樣式、媒體、javascript響應(yīng)式

　　第三方插件：插件管理

　　jQuery、zepto使用原理以及插件開發(fā)

　　支持amd、cmd、全局變量的模塊化封裝

　　$.fn.method = function(){}

　　mvc/mvvm框架原理設(shè)計(jì)，vue/angular/avalon等

　　directive設(shè)計(jì)：html、text、class、html、attr、repeat、ref，可擴(kuò)展

　　filter設(shè)計(jì)：bool、upperCase、lowerCase，可擴(kuò)展

　　表達(dá)式設(shè)計(jì)：if-else等實(shí)現(xiàn)

　　viewmodel結(jié)構(gòu)設(shè)計(jì)：例如數(shù)據(jù)，元素，方法的掛載與作用域

　　數(shù)據(jù)更變檢測(cè)：函數(shù)觸發(fā)，臟數(shù)據(jù)檢測(cè)、對(duì)象hijacking

　　polymer/angular2思想與設(shè)計(jì)思路

　　import技術(shù)

　　template和script引入方式

　　css樣式命名空間隔離

　　簡(jiǎn)單復(fù)用第三方庫(kù)

　　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ā)布替換插件

　　打包、壓縮包插件：組件自動(dòng)分析

　　白名單配置

　　自定義插件編寫

　　......

　　三、開發(fā)技巧與調(diào)試

　　fiddler加willow基礎(chǔ)組合調(diào)試

　　常見配置與分析

　　結(jié)合瀏覽器調(diào)試

　　werien、vorlonjs遠(yuǎn)程調(diào)試，chrome inspect  代碼自動(dòng)化檢查fecs

　　......

　　四、html、css與重構(gòu)

　　jpeg、webp、apng、bpg圖片

　　編碼原理

　　特點(diǎn)與優(yōu)劣勢(shì)

　　適用場(chǎng)景

　　iconfont使用與實(shí)現(xiàn)原理

　　自動(dòng)打包構(gòu)建方法

　　iconfont兼容性寫法

　　fonthello、fontawesome、icomoon.io、iconfont.cn線上工具

　　頁(yè)面響應(yīng)式設(shè)計(jì)

　　layout布局響應(yīng)式

　　html結(jié)構(gòu)響應(yīng)式

　　css樣式響應(yīng)式

　　image媒體響應(yīng)式

　　javascript響應(yīng)式

　　media query與平臺(tái)判斷

　　css重置

　　reset

　　nomalize

　　neat

　　sass/compass/less/postcss常用語法與使用

　　常用語法功能

　　組件化UI設(shè)計(jì)管理

　　構(gòu)建工具實(shí)現(xiàn)方案

　　雪碧圖自動(dòng)合成

　　iconfont自動(dòng)接入等等

　　media query與常見頁(yè)面尺寸了解

　　媒體類型引入和媒體特性引入

　　device-width適應(yīng)

　　retina屏幕適應(yīng)

　　em,rem原理與實(shí)現(xiàn)

　　code4ui、code4app、初頁(yè)、maka等

　　前端dom操作即使刷新前端頁(yè)面

　　根據(jù)dom操作生成組件config配置保存到db

　　根據(jù)config配置使用r.js或webpack打包

　　發(fā)布打包后輸出文件

　　css3動(dòng)畫

　　transform

　　animation

　　transiction

　　3D加速與動(dòng)畫加速

　　動(dòng)畫庫(kù)

　　緩動(dòng)函數(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)化

　　頁(yè)面內(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工具

　　各種站長(zhǎng)工具等

　　瀏覽器緩存種類，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移動(dòng)開發(fā)方案

　　運(yùn)行架構(gòu)

　　hybrid混合開發(fā)

　　cordova交互

　　離線包更新

　　性能瓶頸

　　nativescript移動(dòng)開發(fā)方案

　　react Native移動(dòng)開發(fā)方案

　　運(yùn)行架構(gòu)：js引擎

　　性能缺陷與內(nèi)存泄露

　　更新機(jī)制

　　使用場(chǎng)景

　　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)化(另一個(gè)圖已給出)

　　yslow、pagespeed

　　移動(dòng)web性能優(yōu)化

　　單頁(yè)面及路由實(shí)現(xiàn)

　　業(yè)內(nèi)著名站點(diǎn)案例分析

　　......

　　七、全棧/全端開發(fā)

　　express/node club + mongodb、thinkjs等框架

　　cdn與dns

　　動(dòng)態(tài)域名加速

　　cdn原理與cdn combo

　　......

　　八、研究實(shí)驗(yàn)

　　WebAssembly、webTRC、typescript

　　Material design規(guī)范的前端框架

　　交互動(dòng)效庫(kù)

　　AMP-HTML規(guī)范

　　使用受限HTML以及緩存技術(shù)來提高移動(dòng)網(wǎng)絡(luò)中靜態(tài)內(nèi)容的性能

　　添加自定義的元素代替禁用掉的元素：amp-audio, amp-img、amp-video等

　　......

　　九、數(shù)據(jù)分析與監(jiān)控

　　badjs數(shù)據(jù)上報(bào)

　　點(diǎn)擊熱力圖clickHeat、heatMap

　　js加載失敗優(yōu)化方案

　　失敗重發(fā)機(jī)制

　　加載源域名服務(wù)器文件

　　https反劫持

　　百度alog數(shù)據(jù)上報(bào)

　　......

　　十、其它軟技能

　　axure 原型圖設(shè)計(jì)

　　xmind腦圖管理

　　效率管理

　　can i use、github

　　知識(shí)管理/總結(jié)分享

　　產(chǎn)品思維與技能

　　......

　　十一、前端技術(shù)網(wǎng)站

　　技術(shù)社區(qū)

　　alloyteam、html5基地

　　W3 help

　　行業(yè)會(huì)議

　　segmentfault會(huì)議

　　深js、杭js

　　GMIC(全球移動(dòng)互聯(lián)網(wǎng)大會(huì))

　　D2、webrebuild

　　infoQ內(nèi)容、Qcon、velocity

上一篇：如何規(guī)范化數(shù)據(jù)庫(kù)設(shè)計(jì)？

下一篇：百度移動(dòng)搜索對(duì)具有對(duì)應(yīng)手機(jī)站的PC站提供“開放適配”服務(wù)