首页Interview Records

# 一、前言

先吐槽一下古茗这个团队的一些事情。

实际上在这次面试之前，古茗的前端团队 leader 给我打过一次电话，跟我说明了一些他们前端技术团队的一些状况。

经常有逛掘金的同学应该有经常性的看到过古茗前端团队写的一些技术性的文章，或是一些技术经验的总结，或是对于新技术的研究与探索。它们的整个前端团队是以 学术氛围浓厚 而著称的。据 leader 介绍，他们对于一门技术的研究采用类似于 研究生课题 的模式，也就是针对一门选题，从各个维度去分析这门技术的某个方面的实现原理、使用场景等等，最终由 leader 汇总成一门报告的形式，再进行加工就成了一篇篇的文章。

简而言之，技术氛围浓厚、学术探讨性强。 这一点和很多其他的大厂是相对来说不一样的，除了业务以外，他们更多的是能够去接触一些前沿的新技术。 并且他们是把实习生当作正式员工进行培养的。

不过我一面就挂了，哈哈哈

另外吐槽一下，面试官全程没开摄像头，并且预期非常不耐烦，我回答完了也不给评价。让我对其面试官的印象特别差。

# 二、题目列表

  1. 上来对面没开摄像头，让我自我介绍 + 项目介绍。

    我在项目介绍的时候想把我做过的最得意的项目的细节稍微讲一下，让其至少能够明白我负责了什么内容，实际又达成了什么样的效果；但是我一而再再而三的被打断然后插了一句莫名其妙根本就不是属于这个项目所需要考虑的范畴的问题，让我感觉很难绷。

  2. 讲一下 flex: 1 是哪三个属性的复合属性，这三个属性又分别有什么样的含义，用于设置什么的？

    flex: 1 是 flex-grow 、 flex-shrink 和 flex-basis 三个属性的复合属性。

    1. flex-grow：该属性定义了项目的放大比例，默认为 0，即如果存在剩余空间，也不放大。当所有项目的 flex-grow 属性都为 1 时，它们将等分剩余空间。如果一个项目的 flex-grow 属性为 2，而其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
    2. flex-shrink：该属性定义了项目的缩小比例，默认为 1，即如果空间不足，项目将缩小。如果一个项目的 flex-shrink 属性为 0，其他项目都为 1，则空间不足时，前者不缩小。
    3. flex-basis：该属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为 auto ，即项目的本来大小。

    因此， flex: 1 等同于 flex: 1 1 0 ，表示项目将等分剩余空间，允许缩小，并且初始大小为 0。通常情况下，我们使用 flex: 1 来让项目自动填充剩余空间，实现弹性布局。

  3. 讲一下 flex 布局中的 align-content 属性是用于设置什么的？

    在 Flex 布局中， align-content 属性用于设置多根轴线的对齐方式，当项目在交叉轴上排列成多行（即 flex-wrap: wrap ）或多列（即 flex-direction: column 且 flex-wrap: wrap ）时生效。它影响的是多根轴线的对齐方式，而不是单个轴线的对齐方式。

    align-content 属性有以下几个可能的取值：

    1. flex-start：多根轴线与交叉轴的起始位置对齐。
    2. flex-end：多根轴线与交叉轴的结束位置对齐。
    3. center：多根轴线在交叉轴居中对齐。
    4. space-between：多根轴线均匀分布在交叉轴上，首尾两根轴线分别与交叉轴的起始位置和结束位置对齐，轴线之间的间隔相等。
    5. space-around：多根轴线均匀分布在交叉轴上，轴线两侧的间隔与轴线之间的间隔相等。
    6. stretch：默认值。多根轴线占满交叉轴，如果有剩余空间，会被轴线拉伸。

    align-content 的具体表现取决于 flex-wrap 的值以及项目在交叉轴上的尺寸。当 flex-wrap 设置为 nowrap 时， align-content 不起作用。通常情况下，我们会在使用 Flex 布局时结合 align-items 和 align-content 来控制项目在交叉轴上的对齐方式。

  4. 讲一下 React Fiber 架构，为什么会产生 Fiber 架构呢？是为了解决什么问题？（我对 React 只是会用，还没有到看过源码的程度）

    React Fiber 架构是 React v16 中引入的一种新的 reconciler 架构，它的目的是改善 React 的渲染性能和用户体验。Fiber 架构的主要目标是实现增量式的、可中断的渲染，使得 React 能够更好地处理大型、复杂的应用，提高用户界面的流畅度和响应性。

    产生 Fiber 架构的原因主要有以下几点：

    1. 更好的控制渲染优先级：在传统的 stack reconciler 中，渲染过程是同步的，一旦开始渲染，就会一直执行到渲染结束，这可能会导致渲染过程长时间阻塞主线程，影响用户体验。而 Fiber 架构将渲染过程拆分为多个可中断的小任务（Fiber），并且通过优先级调度器来决定任务的执行顺序，从而更好地控制渲染优先级，提高了渲染的灵活性和性能。

    2. 更好的支持动画和用户交互：由于 Fiber 架构的可中断性，React 在进行渲染时能够及时响应用户交互事件和动画效果，保证页面的流畅度和响应性。

    3. 更好的支持异步渲染：Fiber 架构的可中断性为 React 提供了实现异步渲染的基础，使得 React 应用可以更好地适应异步数据加载和复杂的应用逻辑。

    4. 更好的支持服务端渲染和 React Native：Fiber 架构的引入使得 React 更容易在不同平台上实现一致的渲染行为，为服务端渲染和 React Native 等领域的发展提供了更好的支持。

    React Fiber 架构的出现是为了解决传统 reconciler 在处理大型、复杂应用时性能不佳、交互体验不佳等问题，从而使得 React 能够更好地适应现代 Web 应用的需求。

  5. Vue3 相较于 Vue2 有很多性能上的优化，你具体知道有哪些方面吗？（说实话，这是我第一次被问到 性能 上的区别，一般都是直接问的区别是什么）

  6. 解释一下 Vue3 当中响应式机制的原理。

  7. 反问阶段，问我想要一个什么样的实习。

# 三、后记

整场面试总共进行了 40min，时间也不长。对我来说，我还是得去补习一下 CSS 相关的知识，这方面的掌握还是比较能看得出来一个人的前端基本功。

另外，一个态度差的面试官很可能会直接影响一个人的面试发挥（除非事先知道会是压力面）。这方面的心态也还是得做好调整。

唯一庆幸的一点就是没有问算法，逃过一劫 owo