回顾和提升：前端技能树

【目录】
1.【框架与工具】
2.【CSS】
3.【JS】
4.【运行环境】
5.【HTTP与其协议】
6.【Node.js】
7.【开发与调试】
8.【监控与分析】
9.【优化】
10.【安全性】
11.【软实力】
12.【新技术】

——————————————————————————————————————————————

①【框架与工具】

1. vue：组件(nuxtjs/ Vue router/ Vuex)、虚拟DOM
2. React：React Native、Reactjs
3. Angular、Jquery与Zepto、Lodash与Underscore

②【CSS】

1. 动画：animation、transition、transform、动画库、JS动画(canvas/图片)
2. 布局：弹性、栅栏、浮动、定位
3. 响应式设计：media query、em、rem
4. 预处理器：sass/less/postcss
5. 命名方案：BEM、CSS Modules
6. UI框架：bootstrap、element-ui、echart、weui、extjs
7. 选择器
8. 小知识点：iconfont、css样式统一、IE兼容(Modenizr)

③【JS】

1. 基础原理：原型链(内存分配/对象声明/继承)、事件冒泡、异步队列、闭包、函数指针this
2. 打包工具：webpack、Parcel、Gulp、Browserify
3. 转译工具：Bable
4. 编译语言：TypeScript、ES5、ES6

④【运行环境】

1. 桌面环境：NW.js、Electron
2. 移动环境：PWA
3. 浏览器环境

⑤【HTTP与其协议】

1. 请求：GET/POST/OPTION
2. 响应：345xx
3. 报头：普通、实体、请求、响应
4. 版本：http 1.0、http 2.0
5. 请求方式：XHR(原生xhr/JQuery Ajax)、FETCH(原生fetch/Axios)
6. 策略：同源策略、跨域(CROS/ JSONP/ fetch no-cors)

⑥【Node.js】

1. 框架(express/ koa)
2. 同构
3. 架构：Restful

⑦【开发与调试】

1. 开发工具：Atom、Sublime、Webstorm、VS code
2. 单元测试：Mocha
3. 数据模拟：mock.js、rap
4. 功能测试：night-watch

⑧【监控与分析】

1. 异常监控：Fundebug、Better.js
2. 格式监控：EsLint、JsLint、JsHint
3. 性能监控：WebPage Test、PageSpeed、PhantomJs、Chrome Tools
4. 网络监控：Fiddler、Charles
5. 日志监控：LogRocket、LogLine

⑨【优化】
1.搜索优化：Web 语义化、SEO
2.性能优化：网络性能/图片/页面渲染/JS与CSS/协议层/存储优化
存储优化：
（1）本地储存：locaiStroage、SessionStrage、Cookie
（2）缓存：浏览器缓存机制(Cache-Control、Expires、Last Modified)、H5离线缓存(manifest file)

⑩【安全性】

1. 攻击：XSS、Clickjacking、CSRF
2. Cookie 劫持

⑪【软实力】

1. 结构化
2. STAR原则
3. SMART原则

⑫【新技术】

1. WebAssembly
2. Maerial Design
3. WebRTC
4. WebVR