面试准备：记录、算法与知识点 ​

腾娱互动-元梦之星-前端开发工程师 ​

Vue3 和 Vue2 的区别 ​

常规八股

Vue 响应式如何收集依赖 ​

没答好

ref 和 reactive 的区别 ​

磕磕绊绊答出来

RxJS 的框架介绍 ​

忘光了

Webpack 打包优化 ​

答出来了

Ts 泛型介绍 ​

答出来了，不知道主要想问什么

基于项目提问八股 ​

算法 ​

把字符串转换成数字，A=1,B=2,....Z=26,AA=27,...AAA，写一个函数，按照上面的规律，输入一个字符串，返回一个数字

第一个题A了，这个变了下卡住了，叫给了思路就着急下了，总共10分钟两道题

charCodeAt 可以转字符串的 ASCII 码，忘了是哪个 API

const A_CHAR_CODE = 'A'.charCodeAt(0)

/**
 * @example 'A' ---> 0 'B' ---> 1 'Z' ---> 25 'AA' ---> 26 'AB' ---> 27
 */
function letterToNumber(letter: string) {
  let result = 0

  for (const char of letter)
    result = result * 26 + char.charCodeAt(0) - A_CHAR_CODE + 1

  return result - 1
}

/**
 * @example 0 ---> 'A' 1 ---> 'B' 25 ---> 'Z' 26 ---> 'AA' 27 ---> 'AB'
 */
function numberToLetter(n: number) {
  let result = ''
  // n 从 0 开始
  n += 1
  while (n > 0) {
    const remainder = (n - 1) % 26
    result = String.fromCharCode(A_CHAR_CODE + remainder) + result
    n = Math.floor((n - 1) / 26)
  }
  return result
}

面试算法题记录 ​

简易的 html 解析器 ​

要求实现一个简易的 hmlt 解析器

要求：

1. 检验是否合法html
2. 没有单闭环标签
3. 没有属性
4. 要求输入：<div>aaa<h1>test</h1></div>

输出：

{
  "tagName": "div",
  "children": [
    "aaa",
    {
      "tagName": "h1",
      "children": [
        "test"
      ]
    }
  ]
}

function parseHtml(html) {
  if (!html || !validHtml(html))
    return null

  const matchReg = /<(\w+)>|<\/(\w+)>|([^<]+)/g
  const stack = []
  let result = {}

  html.replace(matchReg, (_, startTag, endTag, text) => {
    if (startTag) {
      const node = {
        tagName: startTag,
        children: [],
      }
      if (stack.length > 0)
        stack[stack.length - 1].children.push(node)
      else
        result = node

      stack.push(node)
    }
    else if (endTag) {
      stack.pop()
    }
    else if (text) {
      stack[stack.length - 1].children.push(text)
    }
  })

  return result
}

/**
 * 检验是否合法的html
 */
function validHtml(html) {
  const stack = []
  const reg = /<\/?(\w+)>/g
  let res = ''

  while ((res = reg.exec(html)) !== null) {
    const tag = res[0]
    const text = res[1]
    const isEnd = tag[1] === '/'

    if (!isEnd) {
      stack.push(text)
    }
    else {
      const lastTag = stack.pop()

      if (text !== lastTag)
        return false
    }
  }
  return stack.length === 0
}
const a = parseHtml('<div>aaa<h1>test</h1></div>')

console.log(a)

/** 输出结果
 * {
    tagName: "div",
    children: [
      "aaa",
      {
        tagName: "h1",
        children: [
          "test",
        ],
      },
    ],
  }
 */

找出循环依赖 ​

找出输入的树对象的循环依赖，要求：

1. 没有重复依赖，例如：存在A -> B -> D -> A，则B -> D -> A、D -> A为重复

// 输入
const input = {
  A: ['B', 'C'],
  B: ['D'],
  C: ['A', 'E'],
  D: ['A', 'C']
}
/**
 * A -> B -> D -> A (*)
 * A -> C -> A (*)
 * A -> C -> E ()
 */

// 输出
const result = [
  'A -> B -> D',
  'A -> C'
]

前端面试知识点 ​

Vue 2 和 Vue 3 的区别 ​

一、性能提升

1. 基于Proxy的新响应式系统（数据劫持优化）

由原来的Object.defineProperty的getter 和setter，改成了ES6 Proxy 作为其观察机制（准确说是 Proxy 配合 Reflect，Reflect提供了一些操作Object对象的方法），初始化时无需递归遍历数据，初始化效率更高，而且也可以监控数组。速度加倍，节省了一半内存开销。

2. 虚拟DOM重写

虚拟DOM静态属性缓存，避免重复patch。内存换时间。

3. Diff算法优化

增加了静态标记flag。标记和提升所有静态根节点，diff 的时候只⽐较动态节点内容。

4. 静态提升（hoistStatic）

Vue2中无论元素是否参与更新，每次都会重新创建（createVNode），然后再渲染（Vue2 中的虚拟dom节点是进⾏全量的更新）。

在Vue3中使用了静态提升后，对于静态不需要发生变化的元素，只会被创建一次，静态节点都被提升到 render ⽅法之外，在渲染时直接复用即可。（静态提升避免了静态元素节点频繁重复创建）

5. 体积更小

vue3整个源码体积相对减少，优化了打包方法，引入tree-shaking，按需编译，避免打包无用模块（例如只打包用到的ref,reactive,components等），使得打包后的bundle的体积更小，提升了运行效率。（通过摇树优化核⼼库体积，减少不必要的代码量）

二、开发体验提升

1. 用 Ts 完全重写

基于typescipt编写，可以享受到类型提示。对Ts支持更好。

编辑器可提供强有力的类型检查和错误提示。

2. Compositon Api 的支持

compositon Api 可以解决业务分离问题，使代码有更好的复用性。

同时，也方便后续的维护和管理，setup() 的出现，使得相关的业务代码得以集中起来，方便查找和维护。我们可以把不同的业务代码进行逻辑抽离，比如使用hooks形式，更容易维护。而Vue2不同的业务代码都混杂在options中，不便管理。

Composition API 和 React Hook 的区别 ​

从 React Hook 从实现的角度来看，React 是通过链表去实现 hooks 的调用的。需要确保每次更新时 hooks 的调用顺序一致，这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。

所以有以下几个限制：

• 不在循环中、条件语句中、函数嵌套中调用 Hook
• 你必须确保它总是在 React Top level 调用函数 Hook
• 使用效果、依赖关系必须手动确定

和 Composition API 是基于 Vue 的响应系统，和React Hook 相比：

• 在 setup() 函数中，一个组件实例只执行一次，而React Hook 每次重新渲染时，都需要调用 Hook，给 React 带来的 GC 比 Vue 更大的压力，性能也相对 Vue 来说比较慢
• Compositon API 不必担心调用的顺序，它也可以在循环中、条件、在嵌套函数中任意位置使用 响应式系统自动实现依赖关系收集，而且组件的性能优化是由 Vue 内部完成的，而 React Hook 的依赖关系需要手动传递，并且依赖关系的顺序必须得到保证，尤其是使用 useEffect、useMemo 等 Hook 时，否则组件性能会因为依赖关系不正确而下降。
• reactive + ref 属于响应式数据，⽐ react 的useState，要更难理解

虽然Compoliton API区别于React Hook，但它的设计思路也是来自React Hook的参考。

ref 和 reactive 的区别 ​

1. ref 支持基础类型
2. 监听方式不同

watch 可以直接监听 ref 的基础类型

watch 监听 ref 的对象类型，需要.value 或者加个 deep

watch 监听 reactive 默认会加上deep

3. ref 需要.value使用

反向面试 ​

大部分翻译自：https://github.com/viraptor/reverse-interview ，亦有其他网友补充。

译者总结的一份适合突击记忆的简洁版 LeetCode 题解和面试问题，也欢迎 Star。https://github.com/yifeikong/interview

下面列表里的问题对于参加技术面试的人来说可能有些用。 列表里的问题并不一定适用于某个特定的职位或者工作类型，也没有排序 最开始的时候这只是我自己的问题列表，但是慢慢地添加了一些我觉得可能让我对这家公司亮红牌的问题。 我也注意到被我面试的人提问我的问题太少了，感觉他们挺浪费机会的。

如果你问过的问题没有被列出来，请提交一个 PR。

翻译：

EnglishKoreanPortuguese繁體中文

预期使用方式 ​

• 检查一下哪些问题你感兴趣
• 检查一下哪些是你可以自己在网上找到答案的
• 找不到的话就向面试官提问

绝对不要想把这个列表里的每个问题都问一遍。（尊重面试官的时间，而且你可以通过查找已经发布的答案来显示 你的主动性）

请记住事情总是灵活的，组织的结构调整也会经常发生。拥有一个 bug 追踪系统并不会保证高效处理 bug。 CI/CD （持续集成系统） 也不一定保证交付时间会很短。

职责 ​

• On-call （电话值班）的计划或者规定是什么？值班或者遇到问题加班时候有加班费吗？
• 我的日常工作是什么？
• 有给我设定的特定目标吗？
• 团队里面初级和高级工程师的比例是多少？（有计划改变吗）
• 入职培训 (onboarding) 会是什么样的？
• 每个开发者有多大的自由来做出决定？
• 在你看来，这个工作做到什么程度算成功？
• 你期望我在最初的一个月 / 三个月能够完成什么？
• 试用期结束的时候，你会怎么样衡量我的绩效？
• 自己单独的开发活动和按部就班工作的比例大概是怎样的？
• 一个典型的一天或者一周的工作是怎样安排的？
• 对我的申请你有什么疑虑么？
• 在这份工作上，我将会和谁紧密合作？
• 我的直接上级他们的上级都是什么样的管理风格？（事无巨细还是着眼宏观）
• 我在这个岗位上应该如何发展？会有哪些机会？
• 每天预期 / 核心工作时间是多少小时？
• 我入职的岗位是新增还是接替之前离职的同事？（是否有技术债需要还）？(zh)
• 入职之后在哪个项目组，项目是新成立还是已有的？(zh)

技术 ​

• 公司常用的技术栈是什么？
• 你们怎么使用源码控制系统？
• 你们怎么测试代码？
• 你们怎么追踪 bug?
• 你们怎样监控项目？
• 你们怎么集成和部署代码改动？是使用持续集成和持续部署吗 (CI/CD)？
• 你们的基础设施搭建在版本管理系统里吗？或者是代码化的吗？
• 从计划到完成一项任务的工作流是什么样的？
• 你们如何准备故障恢复？
• 有标准的开发环境吗？是强制的吗？
• 你们需要花费多长时间来给产品搭建一个本地测试环境？（分钟 / 小时 / 天）
• 你们需要花费多长时间来响应代码或者依赖中的安全问题？
• 所有的开发者都可以使用他们电脑的本地管理员权限吗？
• 介绍一下你们的技术原则或者展望。
• 你们的代码有开发文档吗？有没有单独的供消费者阅读的文档？
• 你们有更高层次的文档吗？比如说 ER 图，数据库范式
• 你们使用静态代码分析吗？
• 你们如何管理内部和外部的数字资产？
• 你们如何管理依赖？
• 公司是否有技术分享交流活动？有的话，多久一次呢？(zh)
• 你们的数据库是怎么进行版本控制的？(zh)
• 业务需求有没有文档记录？是如何记录的？(zh)

团队 ​

• 工作是怎么组织的？
• 团队内 / 团队间的交流通常是怎样的？
• 你们使用什么工具来做项目组织？你的实际体会是什么？
• 如果遇到不同的意见怎样处理？
• 谁来设定优先级 / 计划？
• 如果团队没能赶上预期发布日期怎么办？
• 每周都会开什么类型的会议？
• 会有定期的和上级的一对一谈话吗？
• 产品 / 服务的规划是什么样的？（n 周一发布 / 持续部署 / 多个发布流 / ...)
• 生产环境发生事故了怎么办？是否有不批评人而分析问题的文化？
• 有没有一些团队正在经历还尚待解决的挑战？
• 你们如何跟踪进度？
• 预期和目标是如何设定的？谁来设定？
• Code Review 如何实施？
• 给我介绍下团队里一个典型的 sprint
• 你们如何平衡技术和商业目标？
• 你们如何共享知识？
• 团队有多大？
• 公司技术团队的架构和人员组成？(zh)
• 团队内开发、产品、运营哪一方是需求的主要提出方？哪一方更强势？(zh)

问未来的同事 ​

• 开发者倾向于从哪里学习？
• 你对在这里工作最满意的地方是？
• 最不满意的呢？
• 如果可以的话，你想改变哪里？
• 团队最老的成员在这里多久了？
• 在小团队中，有没有出现成员性格互相冲突的情况？最后是如何解决的？

公司 ​

• 公司为什么在招人？（产品发展 / 新产品 / 波动...)
• 有没有会议 / 旅行预算？使用的规定是什么？
• 晋升流程是怎样的？要求 / 预期是怎样沟通的？
• 绩效评估流程是怎样的？
• 技术和管理两条职业路径是分开的吗？
• 对于多元化招聘的现状或者观点是什么？
• 有公司级别的学习资源吗？比如电子书订阅或者在线课程？
• 有获取证书的预算吗？
• 公司的成熟度如何？（早期寻找方向 / 有内容的工作 / 维护中 / ...)
• 我可以为开源项目做贡献吗？是否需要审批？
• 你认为公司未来五年或者十年会发展成什么样子？
• 公司的大多数员工是如何看待整洁代码的？
• 你上次注意到有人成长是什么时候？他们在哪方面成长了？
• 在这里成功的定义是什么？如何衡量成功？
• 有体育活动或者团建么？
• 有内部的黑客马拉松活动吗？
• 公司支持开源项目吗？
• 有竞业限制或者保密协议需要签吗？
• 你们认为公司文化中的空白是什么？
• 能够跟我说一公司处于不良情况，以及如何处理的故事吗？
• 您在这工作了多久了？您觉得体验如何？(zh)
• 大家为什么会喜欢这里？(zh)
• 公司的调薪制度是如何的？(zh)

社会问题 ​

• 你们关于多元化招聘什么看法？
• 你们的公司文化如何？你认为有什么空白么？
• 这里的工作生活平衡地怎么样？
• 公司对气候变化有什么态度吗？

冲突 ​

• 不同的意见如何处理？
• 如果被退回了会怎样？（“这个在预计的时间内做不完”）
• 当团队有压力并且在超负荷工作的时候怎么处理？
• 如果有人注意到了在流程或者技术等其他方面又改进的地方，怎么办？
• 当管理层的预期和工程师的绩效之间有差距的时候如何处理？
• 能给我讲一个公司深处有毒环境以及如何处理的故事吗？
• 如果在公司内你的同事因涉嫌性侵犯他人而被调查，请问你会如何处理？
• 假设我自己很不幸是在公司内被性侵的受害者，在公司内部有没有争取合法权益的渠道？

商业 ​

• 你们现在盈利吗？
• 如果没有的话，还需要多久？
• 公司的资金来源是什么？谁影响或者制定高层计划或方向？
• 你们如何挣钱？
• 什么阻止了你们挣更多的钱？
• 公司未来一年的增长计划怎样？五年呢？
• 你们认为什么是你们的竞争优势？
• 你们的竞争优势是什么？
• 公司未来的商业规划是怎样的？有上市的计划吗？(zh)

远程工作 ​

• 远程工作和办公室工作的比例是多少？
• 公司提供硬件吗？更新计划如何？
• 使用自己的硬件办公可以吗？现在有政策吗？
• 额外的附件和家具可以通过公司购买吗？这方面是否有预算？
• 有共享办公或者上网的预算吗？
• 多久需要去一次办公室？
• 公司的会议室是否一直是视频会议就绪的？

办公室布局 ​

• 办公室的布局如何？（开放的 / 小隔间 / 独立办公室）
• 有没有支持 / 市场 / 或者其他需要大量打电话的团队在我的团队旁边办公？

终极问题 ​

• 该职位为何会空缺？
• 公司如何保证人才不流失？
• 这份工作 / 团队 / 公司最好和最坏的方面是？
• 你最开始为什么选择了这家公司？
• 你为什么留在这家公司？

待遇 ​

• 如果有奖金计划的话，奖金如何分配？
• 如果有奖金计划的话，过去的几年里通常会发百分之多少的奖金？
• 有五险一金(zh)/401k(us)或者其他退休养老金等福利吗？
• 五险一金中，补充公积金一般交多少比例？/401k一般交多少比例？我可以自己选择这一比例吗？
• 有什么医疗保险吗？如果有的话何时开始？
• 有额外商业保险吗？例如人寿保险和额外的养老/医疗保险？
• 更换工作地点，公司付费吗？

休假 ​

• 带薪休假时间有多久？
• 病假和事假是分开的还是一起算？
• 我可以提前使用假期时间吗？也就是说应休假期是负的？
• 假期的更新策略是什么样的？也就是说未休的假期能否滚入下一周期
• 照顾小孩的政策如何？
• 无薪休假政策是什么样的？
• 学术性休假政策是怎么样的？

其他资源 ​

Find more inspiration for questions in:

• The Joel Test: 12 Steps to Better Code by Joel Spolsky
• Questions I'm asking in interviews by Julia Evans

License ​

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.