字节面试官：虐你如呼吸

作者：我真的很困

前言：

在高铁站接到字节HR打来的电话时，我整个人都是蒙的，我当时的想法是：我？字节？我吗？HR小姐姐略带高冷的声音很快把我拉回了现实，问我什么时候可以面试，我回了个下周，于是面试就定在了周一。当时心想：一周的复习时间，应该差不多够了吧？抱着这种莫名自信的想法，和看了一周的面经以及基础八股（因为大家都说大厂考基础），我很快就迎来了自己的“挨打”时间。

（技术大厂，前后端测试捞人，感兴趣来）

正文：

视频会议接通的那一刻，我仿佛一下子就回到了当年的高考考场，真是紧张又刺激。反反复复念叨了好几次的自我介绍也说得磕磕巴巴。面试官的第一个问题是：从输入URL到出现页面都发生了什么？越详细越好。这个问题要是只有前半句的话，那简直就是往枪口上撞，妥妥的送分题，可以说是正中我的下怀。我之前写过一篇文章就是介绍这个大家有兴趣可以看看：总的来说就几个步骤：

1. 检验URL是否合法
2. 查看本地是否有该页面的缓存，有的话就不发送请求，否则发送（说这个纯属给我自己挖坑）
3. Dns解析ip地址
4. Tcp三次握手建立tcp链接
5. 发送http请求
6. 服务器响应数据
7. 浏览器渲染页面
8. Tcp四次挥手断开连接

第一步没啥好说的，第二步纯属是八股文看来的，结果面试官一细问，我立马被按在地上摩擦。

面试官：你说会查看本地是否会有该页面的缓存，那请问页面的缓存是缓存在什么地方？

我： 呃...这个...这个没有详细了解过，所以...所以不是非常了解。

（面试官微微一笑）

正确答案：页面的缓存有以下三种情况：

1. 浏览器缓存
2. 代理服务器缓存
3. CDN（内容分发网络）缓存

通常情况下，第一种是用的最多的也是最常见的情况。浏览器缓存是最直接的一种缓存形式，浏览器会在用户的设备上（通常是硬盘或SSD）保存最近访问过的网页的部分或全部内容，包括HTML、CSS、JavaScript文件以及图片等资源。浏览器使用缓存可以显著提高加载速度，并减轻服务器的负担。

当浏览器需要确定是否使用缓存时，它会根据HTTP响应头中的缓存控制信息（如Cache-Control和Expires头）来决定缓存的有效期。如果缓存有效，浏览器将直接使用缓存的内容；如果缓存过期或者没有缓存，则会向服务器发送新的请求。这涉及到浏览器的强缓存与弱缓存的机制，我会单独出一篇文章详细给各位读者姥爷讲一讲。

需要注意的是，浏览器缓存并不是永久性的，它会根据设置的缓存策略自动更新或清除。此外，用户也可以手动清理浏览器缓存。

到这里，面试官的下马威算是给到了，如果说刚刚我还是个刚上战场的菜鸟新兵的话，那么此时此刻我已经被吓破胆的败军了。

面试官：那你详细讲一下session和cookie的区别吧

我：（说好的面试不会一直问不会的吗？这真不是在追着我打？）

其实说实话，这部分内容我是看过的，但可惜时间有点久远，而且还没复习，加上紧张得一批，脑子一团浆糊，各种debuff算是叠满了。慌不择路的我竟答成了sessionStorage和cookie的区别，但也只是擦到点边，完全没说明白关键点。不仅如此，这个问题在后来盛趣游戏的面试中也遇到了，所以我认为很有必要给各位看官讲清楚。

Session (服务器端)

定义：Session是一种服务器端技术，用于跟踪用户的会话状态。当用户与Web应用程序交互时，服务器会创建一个唯一的会话ID，并将其存储在服务器上。这个会话ID通常通过cookie发送给客户端，以便后续请求能够识别用户。

作用：维护用户的登录状态、购物车内容等信息。

生命周期：通常在一个用户会话期间持续有效，直到用户关闭浏览器或服务器端会话超时。

2. sessionStorage (客户端)

定义：sessionStorage是Web Storage API的一部分，用于在浏览器的一个会话（即从打开浏览器到关闭浏览器的期间）内存储数据。

1. 作用：存储临时数据，如表单数据、用户偏好设置等。
2. 应用场景：表单数据暂存：当用户填写表单时，可以暂时保存数据以防意外丢失。用户界面状态：保存用户界面的状态，如折叠菜单、滚动位置等。游戏进度：在单个会话中保存游戏进度或分数。
3. 生命周期：数据只在同一个窗口或标签页内共享，并且在窗口或标签页关闭后会被清除。

3. localStorage (客户端)

1. 定义：localStorage同样是Web Storage API的一部分，用于持久性地存储数据。
2. 作用：存储长期数据，如应用配置、用户设置等。
3. 应用场景：用户偏好设置：存储用户的偏好设置，如主题选择、字体大小等。离线应用数据：对于离线可用的应用程序，可以将必要的数据存储在localStorage中。缓存数据：缓存经常使用的数据，减少服务器请求，提高性能。
4. 生命周期：除非被主动删除，否则会一直保留。

4. Cookies (客户端)

1. 定义：Cookies是一种小型文本文件，用于在客户端和服务器之间传递信息。
2. 作用：用于跟踪用户状态、实现身份验证等功能。
3. 应用场景：用户身份验证：保存用户的登录状态，例如记住用户名和密码。会话管理：存储会话ID，用于服务器端跟踪用户会话。个性化设置：保存用户的偏好设置，如主题选择、语言偏好等。跟踪统计：收集用户行为数据，用于分析和改进网站。
4. 生命周期：可以设置为会话级别（默认）或具有明确的过期时间。
5. 大小限制：每个域名下的cookies总大小通常限制在4KB左右。

5. IndexedDB (客户端)****

1. 定义：IndexedDB是一个低级API，提供了客户端侧的数据存储功能，支持复杂的结构化数据和事务处理。
2. 作用：适用于需要更复杂数据结构的应用程序，如离线应用或需要大量数据存储的应用。
3. 应用场景：离线应用：存储大量数据，使得应用能够在离线状态下继续运行。大型数据集：存储大量结构化的数据，如用户上传的照片、视频等。实时应用：对于需要实时更新的应用程序，如聊天应用或协作编辑工具，可以利用IndexedDB来存储和同步数据。
4. 生命周期：持久性存储，除非被显式删除。

在此之后，又问了一些类似于“webpack的loader和plugin的区别”，“为什么相比于webpack，vite的打包速度更快”“如果没有koa的cors，你该如何处理跨域问题”和“vue响应式原理”等问题。这部分的内容我会单独写，尽可能去讲清楚。

算法

大数字相加

问题：

大家都知道在js中数字的最大值不能超过2^53，但是某些情况下可能不得不去进行一些操作导致数字大于这个值，请问在这种情况下该怎么将他们相加（不允许使用bigInt类型）

解答：

这道题能做的前提是给出的参数必须是字符串类型，否则哪怕就是读取也会出错。之后的解题思路是先把短的数字补0，直到和长数字一样长，这样做的目的是为了方便后续的遍历。

之后就是从尾到头遍历两个字符串，并相加，把结果拼成字符串并返回。需要注意的是返回前检查进位是否还有数字，有的话需要加上去，我当时就忘了，多亏面试官提醒

function addLargeNumbers(num1, num2) {
  let carry = 0; // 进位
  let result = ""; // 结果字符串

  // 获取最长的字符串长度
  const maxLength = Math.max(num1.length, num2.length);

  // 补零，确保两个数字字符串长度相同
  num1 = num1.padStart(maxLength, "0");
  num2 = num2.padStart(maxLength, "0");

  // 从最低位开始逐位相加
  for (let i = maxLength - 1; i >= 0; i--) {
    let sum = parseInt(num1[i], 10) + parseInt(num2[i], 10) + carry;
    carry = Math.floor(sum / 10); // 更新进位
    result = (sum % 10) + result; // 添加到结果字符串
  }

  // 如果最后还有进位，需要添加到结果字符串开头
  if (carry > 0) {
    result = carry + result;
  }

  return result;
}

版本号排序

问题：

给你一个数组，每个元素都是字符串类型的版本号，需要把版本号从小到大排序后返回。需要注意的是，“1.45”指的是第一代的第45版，所以“1.8”要比“1.45”小（这么说来13.11确实比13.8更大了）。

解答：

这题的解题思路应该是有挺多的，我提供一个我使用的比较简单的方法，首先遍历给的数组，把每个元素拆分成一个数组，暂且称之为子数组，子数组的每个元素都是版本号的一位数，如图：

然后拿着父数组遍历。其实面试的时候只给了两个元素，但其实只需要把函数作为参数传给sort就可以对整个数组实现排序了，这里我给出一份完整的代码

function versionSort(arr) {
  // 自定义比较函数
  function compareVersions(a, b) {
    const partsA = a.split(".").map(Number);
    const partsB = b.split(".").map(Number);

    // 比较每个部分
    for (let i = 0; i < partsA.length; i++) {
      if (partsA[i] !== partsB[i]) {
        return partsA[i] - partsB[i];
      }
    }

    // 如果所有部分都相等，则认为版本号相等
    return 0;
  }

  // 使用自定义比较函数对数组进行排序
  return arr.sort(compareVersions);
}

总结：

虽然此次面试肯定是没戏唱了，但也从中收获到了很多东西，最重要的一点就是让我看清了自己和一线大厂之间的差距，面试官说：“其实你的表现还是可以的，反应很快，但是你太紧张了，而且很多东西都只是用过，而不清楚具体的原理，这对于我们来说是不够的，在工作中，你用到的框架可能就是我或者某个同事做的，我们希望的是能够了解原理，理解这个地方为什么要这样写，这样你才能去把框架的功能完全发挥出来。而不仅仅是‘我用过’，我们更希望你能知其所以然”。

我相信有很多和我一样平时只在意coding的技能，xx功能怎么用代码实现，或则xx算法通过什么代码才能更快解出来，而对于浏览器，工程化等问题不屑一顾，甚至觉得这不过是旁门左道，面试的时候或许不会问，但是实际上大厂对于网络，浏览器，工程化等内容有着极高的要求。反而对于一些代码方面的考的比较少，就算是考察这部分内容也会更倾向于框架源码或者“手撕promise”等问题。至少在我的大厂面试经历中没有遇到过诸如于“如何把字符串变数组”或者“怎么让元素垂直水平居中”之类的问题。或许当我在高铁站接到面试通知电话的那一刻，已经默认我完全掌握了这部分内容了。

希望大家能够从我的面试经历中汲取经验，也祝愿大家早日上岸！