2020前端知识图谱

• js框架

  • vue

    • 双向绑定
    • diff算法
    • vDom

  • react

    • fibber
    • RN
    • redux

  • angular

    • 脏检查机制

  • Type Script

    • 装饰器
    • 强类型

• 原生技术

  • js v8

    • 原型链原理及应用
    • Promise原理与实现
    • 深拷贝极致优化

    • ES5/ES6 的继承除了写法以外还有什么区别 https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/20

      • class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。
      • class 声明内部会启用严格模式。
      • class 的所有方法（包括静态方法和实例方法）都是不可枚举的。
      • class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。
      • 必须使用 new 调用 class。
      • class 内部无法重写类名。等。。。

  • js node

    • 文件操作
    • path操作
    • 网络与线程操作

  • html

    • 事件机制，捕获 / 冒泡
    • 特异标签 与 功能标签

  • css https://medium.com/@w3cplus/web%E6%8A%80%E5%B7%A7-10-9d60ef8a1311

    • 兼容性
    • 新特性 flex grid animation transform 等
    • transform相对于translate 的性能优化原理与应用
    • css锁 纵横比 等

  • 浏览器细节

    • viewport https://www.cnblogs.com/2050/p/3877280.html
    • event Loop
    • GC实现
    • 页面加载到渲染流程
    • AST / render Tree / DOM Tree 构建原理
    • 常见虚拟Dom方案与diff算法
    • 解释器编译器 https://www.jianshu.com/p/5c8df095e35c

    • 图片原理

      • 10 个免费的图像压缩优化工具和脚本 https://juejin.cn/post/6844903475013222414
      • 每个前端工程师都应该了解的图片知识 https://mp.weixin.qq.com/s?__biz=MzI1ODk2Mjk0Nw==&mid=2247484351&idx=1&sn=e88a658e93cd5e3fa4abd035714d2fa4&chksm=ea0160d3dd76e9c56df658fab1466d41751b90e05bd6a27b972ebf5f5d7204d11c6cd4d8a089&scene=21#wechat_redirect
      • 一些图片相关的知识 https://mp.weixin.qq.com/s?__biz=MzIxNjM5MDUwMA==&mid=2247483705&idx=1&sn=d74fa52c506fa40f7cc23fe99a8a3fc8&scene=21#wechat_redirect

• 工程化

  • 模块

    • amd / umd / cmd / ES Moudule

  • 规范

    • eslint

  • 打包流程

    • 基本流程
    • loaders
    • plugins
    • hash缓存策略
    • tree-shaking

  • 自动化

    • 自动构建
    • CI / CD

• 经典范式与理念的使用

  • Currying（柯里化）
  • point-free 函数
  • partial function 应用
  • 高阶函数 函数式编程
  • 纯函数
  • 副作用
  • 闭包

• 监控

  • 行为分析

    • 定制化收集【核心kpi收集】与自动化收集【核心kpi收集、用户操作行为分析】

  • 错误分析

    • window.onError, unRejectHandler，Vue.onError，console.Error, throw, catch， netWrok-404等

  • 性能分析

    • 性能监测

      • 收集指标
      • 评估方式

    • 性能调优

      • ssr
      • 数据收集
      • 包管理
      • tree-shaking
      • 考虑5G大流量下的极致性能优化体验
    • WebAssembly asm

• 安全

  • 数据加解密

    • rsa
    • md5
  • 网页签名
  • 反作弊，客户端加盐

  • 如何做到安全的数据共享

    • 单点登录
    • 扫码登陆
  • csrf

  • xss

    • dom
    • 反射
    • 存储
  • xs-leaks

• 经典业务问题

  • 1px像素兼容
  • 双飞燕 / 圣杯布局
  • 居中问题
  • 适配问题
  • pc-权限管理实现方案
  • 跨域问题
  • 弹窗滚动穿透问题

• 跨平台技术 https://segmentfault.com/a/1190000022106809

  • hybrid
  • RN
  • taro
  • flutter
  • Electron
  • Cordova / 快应用 等

• ui框架

  • element
  • iview
  • vuetify
  • cube-ui
  • vue-beauty
  • ant

• html方言

  • slim等

• 状态通讯与数据模型

  • vuex
  • redux
  • Mobx

• 兼容性

  • h5

    • android
    • ios

  • pc

    • chrome
    • ie 8 / 11
    • fire fox
    • safari

• scence(工具与常见坑)

  • 小程序

    • mina / mpvue / tina / wepy

  • 小游戏

    • cocos / unity / lua / three.js / h52小游戏等

  • h5小游戏

    • 等

• 交互中间件

  • 通讯协议
  • 数据mock
  • 跨域与请求方法类型模拟

• 工作流

  • 项目初始化

  • 成长包管理

    • 一些自己写的工具库，或者抽离出来的辅助函数，如何做到自动化维护
  • 部署发布（一套完整的上线管理流程）

• 测试

  • 前端自动化测试
  • 边界与单元测试

• css编写规范与逻辑css

  • BEM、OOCSS、SMACSS
  • less
  • sass

• 服务端开发

  • node js
  • sql / mongDB等
  • 并发、协议、缓存、文件等

• 第三方服务

  • 地图、统计图表与数据分析侧的常用模式

    • echart、d3、threeJs、high-charts

  • 音视频剪辑

    • 声纹识别、同传翻译等科大讯飞系的web接口

  • 大数据与AI侧的web接口

    • python-动态生成网页等
    • 百度 / 高德地图系的web接口

  • 图片合成、剪辑与滤镜等

    • face-plus / 天天p图系的web接口

• 现代浏览器技术及前端系的各种玩法

  • canvas技术的深度使用
  • css3与设计的深度使用
  • 新语法糖的使用与带来的开发效率提升

• 架构设计思想

  • 遵循原则

    • 单一原则

  • 设计模式

    • 单例模式
    • 工厂模式
    • 代理模式
    • 观察者模式
    • 订阅发布模式
    • 职责链模式等

• 大方向--https://juejin.cn/post/6844903652470046734玉伯

  • 无感化, TWA 是 Techless Web App 的缩写
  • BFF与serveLess
  • UI 智能化方向
  • 数据可视化方向
  • 图形互动化方向