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://HdhCmsTestxuanfengge测试数据/easeing/easeing/ Ceaser： http://xuanfengge测试数据/easeing/ceaser/ cubic-bezier： http://cubic-bezier测试数据/**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测试数据......
六、前端/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
查看更多关于2015-2016前端架构体系技术精简版_html/css_WEB-ITnose的详细内容...