回顾和提升:前端技能树

【目录】
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

你可能感兴趣的:(回顾和提升:前端技能树)