前端技能树

整理的前端进阶技术栈，学习工作包括面试都用得到

前端技能树

• HTML
  • HTML5
    • 本地存储
      • localStorage
      • sessionStorage
    • canvas
    • websocket
    • Web Worker
• CSS
  • CSS3
    • Flex 弹性盒模型
    • transform 变形
      • translate( )
      • rotate( )
      • scale( )
    • transition 过渡
    • @keyframs, animation 动画
    • rem
  • 预处理语言
    • Less
    • Scss
• JS
  • ES6
    • Promise
    • Class
    • Map
  • 面向对象
    • 构造函数
    • 原型
    • 继承
      • 原型链继承
      • 借用构造函数继承
      • 组合继承
      • 原型式继承
      • 寄生式继承
      • 寄生组合式继承
  • this
    • call
    • apply
    • bind
  • 执行过程，作用域
    • 变量提升
  • 闭包
  • 事件循环（Event Loop）
• jQuery
• 前端架构模式
  • MVC：Model, View, Controller
  • MVP：Model, View, Presenter
  • MVVM：Model-View-VIewModel
    • Vue
      • 双向绑定原理
        • 数据劫持
          • Observer
            • Object.defineProperty( )
              • setter
              • getter
        • 发布-订阅模式
          • Compile
          • Watcher
      • Vuex
      • Vue Router
      • 服务端渲染（SSR）
        • Nuxt.js
• 小程序
  • 微信小程序
  • 支付宝小程序
• 跨平台开发
  • uni-app
  • Flutter
  • React Native
• UI框架
  • iView
  • Element-UI
  • layui
  • Bootstrap
• webpack
• 可视化
  • canvas
    • ECharts
  • SVG
    • D3.js
  • WebGL
    • Three.js
• TypeScript
• Node.js
  • express
• 浏览器
  • 进程
    • 主进程（Browser）
    • GPU进程
    • 第三方插件进程
    • 浏览器内核：渲染进程（Renderer）
      • GUI渲染线程
      • JS引擎线程
      • 事件循环线程
      • 定时器线程
      • http异步线程
  • 从输入url到页面加载完成发生了什么？
    • TCP三次握手，四次挥手
  • Web Components
• 网络安全
  • XSS攻击（脚本注入）
  • XSRF/CSRF（跨站脚本攻击）
• HTTP
  • HTTPS
  • HTTP状态码
    • 1**：服务端收到请求
    • 2** 成功
    • 3** 重定向
    • 4** 客户端错误
    • 5** 服务端错误
  • 跨域
    • JSONP
      • script标签src属性
    • 跨域资源共享CORS
      • Access-Control-Allow-Origin
    • nginx反向代理
    • Node.js中间件跨域
  • 同源策略
    • 同协议，同域名，同端口
  • 请求方法 Request Method
    • GET, POST, PUT, HEAD, DELETE, OPTIONS, TRACE, CONNECT
• 性能优化
  • 虚拟列表
  • Performance
  • HTTP缓存
    • 强缓存
      • Expires
      • Cache-Control
    • 协商缓存
      • Last-Modified
      • Etag