2015-2016前端架构体系技术精简版
点击查看github高清图
点击查看完整版
一、框架与组件
**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
