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