乐趣区

关于前端:2020前端知识图谱

jiezi

  • 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 智能化方向
    • 数据可视化方向
    • 图形互动化方向
退出移动版