#2015-2016前端架构体系技术
一、框架与组件
**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
完整版地址 http://ouvens.github.io/frontend-resource/2016/01/26/front-end-learning-list.html
来源：oschina
链接：https://my.oschina.net/u/192415/blog/609680