我的秋招实习之旅

记录面经，算是给自己的大学留下一点东西吧

wxg 游戏实习

一面

总结：面试官人很好，整个面试过程中就像是聊天一样，全程演示项目，中间穿插了一点八股

• 蓝桥杯是什么
• 问简历上的项目是实验室还是个人项目 面试官说都会把比赛项目给放到前面，所以以为这也是实验室作品。然后我就拿了挑战杯写的前端页面简单说了一下

以下基本都是项目细节：

• Mod 开发组与你是什么关系（甲乙方？）
• 为什么分了开源核心 + 后台仓库（后台仓库代码不安全，需要审查）
• 编辑人员提交流程（后台编辑 + 管理员提交 -> gitee pr + 审查后合并 + webhook 触发 cicd 同步到 oss）
• Astro 是什么，SSG SSR 是什么（说了一下基于 vite 进行驱动与支持 ssg + ssr，然后说了一下 ssr 的动态拼接字符串；然后面试官说了什么 jeklly？）
• 选了他的原因是什么（博客落地实践过，知道一些底层原理，内容驱动生成网站，符合 wiki 定位要求）
• 框架可以插入 react 或者 vue 组件吗（可以，且可以一起使用）
• 有试过放在一起吗（没有，提了一下 vite 放在过一起导致开发声明报错，其次是两个应用相互独立，通过各自的 app 创建函数来渲染页面，只要他们副作用不会相互影响我觉得问题都不算大，不过现在看来感觉还得想一想 vue react 底层，他们的更新机制不一样，会不会一个框架的占用线程太久导致了另一个框架更新不及时）
• 编译器和 polyfill 的关系，知不知道每一个 es 版本的区别（不会）
• 整个项目内核升级是什么意思（说了用插件将所有的逻辑进行封装，最后进行复用，要求展示了一下除了简历还有哪个网站复用了）
• VSCode 插件展示一下，具体在 VSCode 做了什么，用途（mdx 转 ast 语法树，对节点进行分析，并读取工作目录下的资源进行查错；给一些编外的词条编辑人员使用）？
• 网页插件展示一下？（没实现，说了一下对每一个用户都要开一个专用检查进程的原因）
• 看一下你的分析器和 mdx 官方分析器的关系（完全独立，没来得及说存在的优化部分） 本来要进笔试了，然后说了一下 yjs 是核心之一
• 在线平台演示效果
• yjs 是什么（协同编辑中编辑冲突的一个库）
• 协同主要问题（说了并发冲突和 YATA 算法的作用，面试官似乎没做过这个领域）

笔试：

// 写一个类似迅雷的下载管理器，用户可以不停往里面push url，管理器需要保证同一时间最多只有3个请求在并发下载。
class Downloader {
  urls = []
  push(url) { }
}

// 每个url均需要被传入以下fakeAxiosWrapper函数。你可以把这个函数当做一个封装好的axios函数，作用是请求远程api，不要改动这个函数。
async function fakeAxiosWrapper(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(`download ${url} done`)
      resolve()
    }, 3000);
  })
}

// 验证代码
const downloader = new Downloader()
downloader.push(`url1`)
downloader.push(`url2`)
downloader.push(`url3`)
downloader.push(`url4`)
downloader.push(`url5`)
// 等待3s后，同时输出
// download url1 done
// download url2 done
// download url3 done


// 再等待3s后，同时输出
// download url4 done
// download url5 done

没写出来很可惜，因为以前写过一个类似的并发下载控制，结果这里没写好。面试官换了个节流，问了一下为什么 setInterval 可以用来证明你这个函数是节流的（宏任务队列首部）

反问：

• 工作时间（上午十点到晚上八点半）
• 地点（深圳总部）
• 实习时长（越久越好）
• 技术栈（挺多跨端技术的，感觉进去又要开始上手新东西了）
• 有没有什么可以改进的地方
• 下一面几天后（最晚一周后）

整体下来感觉最大的问题还是信息差与沟通点没到位，项目核心部分展示的内容不是很多，然后还浪费了一些时间，只能说很可惜，下一次对于不会的内容就应该直接说不会（恼）。

另附：

在处理前端开发中遇到的浏览器兼容问题时，理解JavaScript编译和Polyfill的概念是至关重要的。以下将深入探讨编译器（如Vite依赖的esbuild）和Polyfill的作用以及它们在解决兼容性问题中的区别。

编译器（如esbuild）的主要职责是将现代JavaScript代码转换为兼容不同浏览器版本的代码，它专注于处理JavaScript的语法特性，而非API。例如，??操作符的使用，height ?? 100将转换为(height !== undefined && height !== null) ? height : 100，这就是语法处理的一个例子。然而，对于浏览器不支持的API，如replaceAll方法，编译器并不会自动处理，需要开发者自行引入Polyfill来弥补。

Polyfill则是补全缺失API的工具，可以确保现代JavaScript代码在旧版浏览器中正常运行。例如，针对replaceAll方法的缺失，开发者需要引入如core-js或polyfill.io等库来实现其功能。使用polyfill.io时，可以通过其提供的链接选择性地引入需要的polyfill，极大地简化了集成和维护过程。

理解这些概念的关键在于认识到编译器和Polyfill在解决兼容性问题上的不同角色。编译器专注于优化和转换代码语法，而Polyfill则专注于填补API的缺失，以确保代码在不同浏览器环境下的兼容性。在遇到特定的兼容性问题时，应当根据问题的性质，选择合适的工具来解决，以提高开发效率并确保代码在各种环境下的正常运行。

二面凉经

总结：需要回去复习计算机底层，还有浏览器的各个标准，拓宽视野，不能局限于信息茧房。面试不能失态啊

• 老家是哪里的，还有住在哪，学校在哪

• 说一下数据结构栈和队列，他们的区别，栈在哪里有应用场景，队列，然后假如队列发生了插入，那么此时这个队列变成了什么，具体应用场景有什么（这里应该是想考察操作系统层面的知识，FCFS对应队列先进先出，头部插队可以联想到SJF，毕竟是按运行时间最短，还有发生了任务队列插队的原因可能是任务优先级更高点，复盘时才想起来，哈哈。同理 LRU 采用一个队列结构去存储页的节点，首部 push 最新用到的页，底部为最近未使用的页，当队列内某个页被使用后将其取出并 push 入顶部，页空间不够了就将底部页面淘汰即可）

• 先说一下 localStorage 大小（上来就没答对，然后告诉我这个是错的，并且要求远程桌面演示如何验证，首先 mdn 吧，然后百度，然后一大堆，面试官一直没听到自己想要的答案，最后给我一个网站，这个网站就是通过不断填入 localStorage 字符测出上限）

• 然后引导到操作系统页置换算法，要求写一个按字节数大小计算的 LRU 缓存，问了一下时间复杂度，有没有什么可以优化的地方（虽然 LRU 本身好像都没写对）

• 计算机网络（七层模型，常用的四层），每一层帧封装的格式，知道的越多越好。到传输层后问了一下 udp 的校验和是怎么做的（忘了），应用层有哪些协议（http，ftp，就记得这两个）

• 说一下项目大概的情况（此时心态已经崩了）

• 看一下你项目的架构图（4月份画的，很简单，没看到面试官表情）

• 你的项目最终为了解决什么问题，相比其他 wiki 第三方平台有哪些优势（但是当时哥们纯出于兴趣，就研究了一下 wiki 基本的功能，现在想想一个是调研组内需求，对比当前市面上的框架有什么不足，现有框架是否能够满足开发需求，其次是满足开发需求后付出的时间成本怎么样，哪一个方式效益最高，我们自研后是否还能产生额外效益）

• 看你 wiki 用 astro，性能是不是很好，跑个 lighthouse 看看（第一次不给力，才89，第二次才满分），那么就结果来说你能信任 lighthouse 吗，最好的收集用户数据手段是什么（埋点），埋点的话你会怎么解决（就目前个人能力可能会找 google analysis，现在想想应该回答一下如果能接受就找一些第三方埋点包，评估并进行引入）

• 反问（彻底崩溃，想着也许无缘了，顺便就问问一些项目上改进的地方）

• 我需要改进的地方（浏览器基础和计算机基础不太好）

• 这次实习是有考虑提供转正的吗（有，所以筛人很严格）

• 如何提升项目积极性（问了我 wiki 的访问量，很少，于是就说这个就是问题，一个是正反馈，还有就是当你的代码面对千万级用户时你该怎么办）

• 聊了一下跟踪脚本，现场出一个场景题，假如要拦截该怎么办（用户隐私模式？找运维拦截域名？路由器搞个过滤？最后回去让我自己查(document.referrer，以及相关文档：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Referrer-Policy 应对措施是使用 meta 标签开启整个文档的限制)）

• 看一下你的项目文档（一开始才看到 800 行就笑了，然后看到 2w 字就说还行，看到我快崩溃了就稍微夸了一下，我也知道这是给点面子（逃））

• 以为这一面会继续拷打项目，为什么没有深入细节（说一面已经看到项目诚意了，二面看看其他方面）

• 平时怎么学前端的（先从实验室的路线开始，然后逐渐发展成从文档上手，顺便聊到了自己博客，当时刚好看到 content collection，虽然是全新 api，只有英文文档，但是借着热情把文档硬啃了下来并进行了实践；其实有准备好一些回答，但是我现在觉得临场发挥的这个也可以，因为在研究它时是真的有种动力在支撑自己做）

• 一面是主管吗（这次的面试官才是主管，问我为啥看不出来，我说一面聊了一下技术栈，看做了不少跨端的，且提到王者直播间优化也是他们做的时候，我回去找同学看了一下效果，优化是顶级的，几乎融入到 app 里面了，就觉得很厉害，结果这一次面试全在深入底层，才后知后觉都是高手口牙）

• 有因为学历而考虑考研吗（没有，不想被拉去造学术垃圾）

我也许需要休息一下，回去好好反思自己真的是热爱计算机吗，虽然从大学三年来说我可以说是肯定的，但是我也许仅关心前端的开发方向，有时候为了项目看的太远而脱离了依赖的本质，又或者当我踏入校实验室大门那一刻，我就把目光局限在了实验室内？最简单的东西往往也是最难的，如同哥德巴赫猜想一样，欧拉直到去世也无法证明它；对底层的东西并不够上心，操作系统学了，mit 实验也做了，编译原理学了，好好写了 LL1， SLR1 文法，但也许因为不够聪明，记忆不够深刻。还有被学校各种乱七八糟的事情磨平了棱角和热情，还有最干扰自己的也是自己，担心前途，担心学历，当背负着这两样东西开始学习的时候就是开始内耗了

下一面是字节，假如这也不过的话正好能给自己提出一个理由休息，这大学因为课程上的破事真的让自己过的太憋屈了，正好假期可以好好放松自己，找对方向后再准备。

其次顺便说说为什么要反思是否真的热爱，这是 lz 在大一 ctf 比赛的时候真正体会到了乐趣，校内赛 web 6 题有 5 题都通过自己查资料和积极思考得出了答案，其中包括但不限于反序列化，cve 漏洞注入，php 等。虽然最后因为别的方向的队友做出的题太少，但是 ctf 本身就很好玩。还有一些零碎的就不说了，相比于真正热爱计算机的人，我的思想可能差一些 level？因为 lz 有一个群，群里大部分都是非科班的同学，但他们因为对计算机的兴趣而聚在了一起，他们时不时就会开始聊起 riscv，会自研一套指令集，并互相评价和优化，会研究 rust 底层编译，了解在编译器层面上的黑魔法，以及不同工具链的编译结果对比，以及中断程序的处理，该放在整个主存中的哪个位置，还有讨论最优的置换策略，ffmpeg 针对某些领域实现的高速优化。

站在他们面前时我总是在扪心自问：我真的是计算机学生吗；其次，我在反思：实验室的培养路线真的是在培养计算机学生吗，还是说只是单纯培养一个会写业务的同学罢了？

道阻且长，行则将至，行而不辍，未来可期。

按字节计算的 LRU

自己写了一份，简单测了一下，似乎没问题:

可以继续优化吗？也许

class ListNode {
  constructor(key, value, left = null, right = null) {
    this.key = key
    this.value = value
    this.left = left
    this.right = right
  }
}

class LRUCache {
  constructor(maxBytes = 5) {
    this.maxBytes = maxBytes
    this.currentUsed = 0
    this.dummy = new ListNode(null)
    this.dummy.left = this.dummy
    this.dummy.right = this.dummy
    this.nodeMap = new Map()
  }
  #getNode(key) {
    const node = this.nodeMap.get(key)
    if (!node) return
    this.#removeNode(node)
    this.#putToHead(node)

    return node
  }
  // 最坏情况需要遍历所有节点
  #cleanSpace(expect) {
    let newSize = this.currentUsed + expect
    while (newSize > this.maxBytes) {
      const { key, value } = this.#removeTail()
      newSize -= value.length
      this.currentUsed -= value.length
      this.nodeMap.delete(key)
    }
  }
  // O1
  get(key) {
    return this.#getNode(key)?.value ?? -1
  }
  // On, 遍历已有节点删除
  put(key, val) {
    if (val.length > this.maxBytes) throw new Error()

    // 更新时移动到顶部
    let node = this.#getNode(key)
    if (node) {
      const expect = val.length - node.value.length
      this.#cleanSpace(expect)
      this.currentUsed += expect
      node.value = val
      return
    }
    this.#cleanSpace(val.length)
    node = new ListNode(key, val)
    this.#putToHead(node)
    this.nodeMap.set(key, node)
  }

  #removeNode(node) {
    node.left.right = node.right
    node.right.left = node.left
    this.currentUsed -= node.value.length
  }

  #removeTail() {
    const tail = this.dummy.left
    this.#removeNode(tail)

    return tail
  }

  #putToHead(node) {
    this.currentUsed += node.value.length
    node.left = this.dummy
    node.right = this.dummy.right

    node.right.left = node
    node.left.right = node
  }
}

字节跳动前端搜索方向

一面

先上正文，文末贴复盘以及可以改进的地方

表现得很差，但是1小时后通知选2面时间，许愿下次自己能自信点，好好讲解项目

自我介绍

• 蓝桥杯是什么
• 问两个开源项目：
  • Threejs 那个怎么说（2年前的项目了，根本不记得多少，扯了一下新版实现，模型优化，看了一下源码解决bug）
  • 某音乐网站嵌入 tauri 二次开发（扯了一下写的 vite 插件，实现了把外部网站嵌入到脚手架内实现的直接开发，还有重写部分热重载代码，以及代理后端，实现内容覆盖与整个网站的控制权，以及扯了一下这种跨平台开发要注意的是什么，然后就扯了一下ipc通信与序列化的性能）
    • 做了这些插件最终的意义？（提升开发体验与效率）
  • 这些是自己做的还是实验室做的（第一个跟隔壁实验室哥们一起做的，第二个是自己做的，2023年7月 -> 2024年8月，有GitHub提交可查）
• 说一下你对前端工程化的理解（尽可能地实现非业务部分过程自动化，使得开发者可以专注开发）
• 用过webpack吗，没有，直接 vite 上手
• 说一下你对 vite 的认知，越多越好，尽可能地说（esbuild 开发环境，rollup 生产环境，vite 在加速方面做了哪些努力（esbuild 构建开发环境js，预构建依赖，对源码更新采用链失活处理（仅概念）））
• esm cjs（同步与异步导入，import 静态分析）
• url 到页面呈现（合法判断，cache，dns，tcp，dom树，cssom，js 阻塞，render tree，绘制，部分 css 送入 gpu 处理）
• 说一下用 Astro 的原因（vite 作为底层驱动支持，内容驱动静态网站生成，支持SSG，SSR）
• 除了 SSG，SSR 还有什么渲染，区别是什么（ISR，CSR，增量静态生成）
• Astro SSR 还有哪些应用场景（扯了一下官网文档的电商平台，用户可以先看到页面商品内容，具有交互性质的按钮可以在后续注水激活）
• 说一下 yjs 是干什么的（以CRTD为核心思想的并发冲突解决库）
• 在线演示平台，平台有多少人在用（不多，给内部人员编辑使用）
• 做这个遇到最难的地方是什么（服务端崩溃上下文丢失后内容恢复，说了目前的实现与未来最好实现）
• VSCode 插件看一下效果（演示了一下并说了转 ast 做处理的简单流程）

笔试第一题：

对url中的query参数中将title提取出来：https://aaaaa/?aaa=bbbb&title=dddd 创建一个 box，长 100px 宽 50px，插入到整个页面中，要求水平垂直居中 针对 box 写一个动画： 500ms 后长宽变成 100px 700ms 后移动到右上角

笔试第二题：

function get() {}

const obj = {
  layer1: {
    layer2: {
      val: 1
    }
  },
  target: [1,2,{ok:1}]
}

get(obj, 'layer1.layer2.val', 'target[0]', 'target[2].ok')

笔试第三题

有一个树：

1 |
2 3 |
4 5

现请你遍历该树，并在到达叶子节点时将其前方所有的值拼接为数字，对于本树就是: 124 + 125 + 13 = 262

本来要反问了，感觉节奏不对，继续跟面试官扯完了简历上的后两点：

• 页面预览实现？ 成本有点高，目前思路是转发脚手架页面

  曾经做过的努力：

  • 用 astro 的编译器看看能不能 build 一些组件并拼接完整页面（不能，必须依赖 node 环境或在浏览器实现需要的 api）
  • 用 SSR （审查了 astro 部分源码发现对于 markdown 编译逻辑都是写在 vite 插件内，打包时是直接把 markdown 编译成 js，SSR执行时直接静态出字符串，没有运行时编译过程）
  • 11月14号新出的 content layer api，去官方文档看了里程碑，不把运行时编译 markdown 放在目标内，与 astro 的 baseline 与解决问题场景不一致

• jsx 编写通用组件？ 曾经做过的努力：

  • 调研 tinyMVC，在示例仓库里发现他针对各个框架都写了一套 renderless 逻辑，还为此写了一个专门抹平框架差异的函数
  • taro，基于编译器实现，背后有编译团队，运行时团队，小程序团队和跨平台团队支持，对于小团队开发成本太高了

反问：

• base 北京上海
• 二面什么时候（已约下周三）
• 主要业务？负责抖音头条等搜索处理
• 需要改进的地方？（把项目重点总结好）

总结：

• 这次面的状态真的很差，比上次腾讯的还差，不清楚是什么原因，但最后不到残血又不会玩，可能我真的需要休息一下吧
• 不够自信，项目都是自己做的，但是一问就只能答出想到的点，后面复盘的时候一下子联想到了很多
  • 桌面播放器能扯的非常多：rust 过程宏生成 ts 声明辅助开发；dll 打包内联，怎么同时放下 nodejs 脚本，网页注入脚本，还有 rust 自身大小优化；组件库用 storybook 实现预览；针对本地音频文件采用流式传输；为什么用户手动安装node，在这之前有做过什么努力吗（pkg，deno，node dll 预制插件打包）；热重载代码为什么不影响原网站（原网站采用 SSR 水合，自己的部分是渲染）；离线访问（包爬虫 + rust 三方库内联到程序内）；具体参考我的博客吧：https://blog.shiinafan.top/posts/%E5%A1%9E%E5%A3%AC%E5%94%B1%E7%89%87%E6%A1%8C%E9%9D%A2%E7%89%88%E6%8A%80%E6%9C%AF%E5%88%86%E6%9E%90/
• 笔试表现很差，把简单问题复杂化
• 八股文同理，每次一问就进入了意识狭隘的通道，复盘才想起来还有好多可以回答
• 没有总结好重点，其次是没有引导面试官到自己熟悉的领域

我想我可能需要休息一下，想清楚和搞好状态再继续，先写这么多吧