求职

自我介绍

• 面试官你好，我叫丘伟康，有5年的前端开发经验，待过几家科技公司，涉及业务主要有短剧、小说、茶饮、电商供应链、指标系统、数据大屏都有做过，熟悉tob、toc项目开发，主要技术栈是vue、react、uniapp、taro、node都有，熟悉前端工程化、性能优化、也有这个开源经验，写过taro多端组件、脚手架、浏览器插件都有。具有业务分析能力， 一定的项目管控能力，能够合理安排工时排期、以及这个资源协调分配，主要是这个情况

介绍一下你上一家公司的业务

• 上一家公司是字间科技、主要是做短剧、小说、投放系统等业务

  • 短剧、小说通过一些剧情和一些内容来吸引用户来观看，通过付费模式、流量来实现收益，提供给投放部门去引流推广

• 利用广告投放系统，将短剧和小说批量投放到巨量、抖音等平台，完成对短剧和小说的推

说下diff

当进行组件更新时，Vue会进行新旧虚拟dom对比，将最小差异更新到真实 DOM，只针对改变的部分进行更新，而不用整体重新渲染

• vue2和vue3的diff有一些区别，我先说下vue2

采用了双端diff的对比，在组件更新的时候，会进行新旧虚拟DOM的比对，只对比同一层级的，不会跨层级的比较，首先会判断key和tag是否相同，如果相同，表示相同节点，否则不相同就直接删除，不会做深度比较，对一个相同节点，会调用patchvnode方法，来比较属性和子节点，如果子节点不相同，会调用updateChildren方法来比较子节点，这个方法会对新旧节点头尾指针进行比较，循环向中间靠拢找到差异，如果相同节点就调用patchvnode方法，如果是不同节点，会创建新节点并将其插入到正确的位置

• vue3在vue2的基础上做了优化，

  • 优化了双端diff的对比，只进行头比头、尾比尾
  • 使用了最长递增子序列优化比对过程
    • 复用dom元素相同，减少移动dom的次数
  • 使用了静态标记，只针对有静态标记的节点进行比对，而没有静态标记的，不用进行比对，直接复用

• react的diff过程，首先diff的入口 是 reconcileChildren 会判断，如果首次渲染，current 空 null （即没有旧的Fiber树），就通过 mountChildFibers 创建子节点的 Fiber 实例。如果不是首次渲染，就调用 reconcileChildFibers去做 diff

  • React Diff核心逻辑 是reconcileChildFibers这个方法，会进行同级比较
    • 在这个方法中，React会比较新旧子节点的同级节点，检查它们的类型和属性是否相同
  • 节点类型不一样，那么React会直接删除该节点，然后直接创建新的节点插入到其中
  • 如果两个节点类型相同，属性也相同，但是子节点不同，那么对子节点进行递归比较
    • 对于多节点会通过reconcileChildrenArray方法来比较

http2

• 多路复用
  • 解决了队头阻塞
  • 一个tcp连接可以同时处理多个请求，
• 头部压缩
  • 减少了数据传输的大小
• 服务端主动推送
• 支持二进制协议
  • 解析起来更高效

业务难点：

• 1、在改版ui重构的时候，把视频相关逻辑优化了，使用了视频预加载，在播放的时候，预加载下一个视频，提高视频加载的速度
• 2、将复杂计算逻辑，抽取出来，使用worker
  • 组合支付相关逻辑，卷、播豆、卡卷叠加计算
• 3、素材库，上传视频素材，使用了文件分片上传