前端面试题宝典

三个部门，九轮面试，终与字节无缘（二）

简介：这是“三个部门，九轮面试，终与字节无缘”的第二篇。
可前往公众号查看原文：前端面试，关注公众号，查看最新面经和技术文章哦~

在上一篇 《三个部门，九轮面试，终与字节无缘（一）》中，介绍了这位同学在字节的第一个部门的面试经历，今天接着来看他的面试经历。

由于篇幅的关系，我们将这位同学的面试经历分成了3篇，今天给大家带来第二篇。

以下是原文：

第一个部门的面试结束后，hr 在他们的群里发了一下，我被另一个部门又捞起来了。

互娱研发

一面 - 6 月 17 日

  • 自我介绍

  • 亮点

  • 怎么给一个网站做 SEO 优化？

  • 如果不用 Lighthouse，Lighthouse 那不就只是能在谷歌上测吗(大概是这么个问题)

    • WebPageTest 不过我用的比较少，没深挖

    • Lighthouse 也可以通过 npm 进行下载使用

  • SSR 了解吗

    • 不了解，就跑过 next 的案例

    • 我当时可能理解错了，应该是说下概念就行

  • dns 预解析的怎么实现的?

    • dns 解析的过程？

  • 为什么要用 http2

    • 多路复用

    • 那说下 http1.1 和 http2 区别？

    • 头部压缩，多路复用，别的没啥印象(可以设置请求的优先级，服务器推送(Server Push))

    • Server Push 了解过吗？

    • 啥，我咋没听过(我是智障，我是智障，我是智障...)

  • session 了解吗?

  • CSRF 攻击了解吗？

    • 怎么预防呢？还有其他办法吗?

    • 如果不通过 img 或者 script 标签，或者说用户不通过点击第三方连接怎么造成 CSRF 攻击吗？

    • 不知道啊，然后面试官给我讲了一些关于 dns 劫持

  • http 和 https

    • 说了对称加密和非对称加密，具体不清楚

    • 那你说下 https 握手过程？

    • 不知道啊

    • http 的缺点 明文不加密，内容可能被窃听；不验证通信方身份，可能遭遇伪装，无法证明报文的完整性，可能被篡改。https 就是披着 SSL 外壳的 HTTP，SSL 会建立安全通信线路，查明对手证书...

    • 知道 http 的内容是如何窃听的?

    • 不知道，不过可以一些抓包工具抓

    • 浏览器怎么验证证书的?

    • 那对称加密和非对称加密怎么之间选择？

  • 说下 cdn 缓存？

    • 不了解，说HTTP 缓存可以吗

    • 也行

    • Cache-Control、Expires(因为效验问题，被 Cache-Control 替代)、Last-Modified、Etag

    • 说下请求头？

    • If-Modified-Since，Cache-Control 是看 max-age，(想不起来了If-None-Match) 因为上次一面让我写出来，这次我也就习惯性把这些都打出来了，结果后面才知道面试看不到...

    • 那为什么会考虑用强缓存呢？

    • 一个文件比较大，且不经常更新就会考虑用强缓存

    • 那文件要变了怎么办？

    • 啊，用 no-cache，让服务器处理

    • 那为什么不用协商缓存？

    • 额，我也在想

    • 面试官：用 hash ...

  • 热模块替换的原理了解吗？

    • 那他是怎么保留之前更改的状态那？

    • 不知道

  • webpack 怎么实现的知道吗？

    • 不知道

  • loader 和 plugins 的区别

  • 你所知道的白屏原因

    • 怎么优化

  • 三列布局

    • flex: 1; 是复合属性，说下其他属性？

    • 扩展比例，缩放比列，基准大小（x轴覆盖宽度，y 轴覆盖高度）

  • ES6 新增的类型

    • Symbol, BigInt

    • Symbol 有用过吗？

    • 手写 bind 的时候用过，防止覆盖掉对象上的原有属性

  • ES6 新增的类

    • Promise

    • WeakMap 和 Map 了解吗? 说下他们的区别？

    • WeakMap 的键必须是对象

    • 有用过吗？

    • 深拷贝判断是否有重复引用的时候用过

    • 面试官：WeakMap 是和垃圾回收有一些关系...

    • MDN: 原生weakmap持有对关键对象的“弱”引用。由于这样的原生weakmap不阻止垃圾收集，从而最终删除对键对象的引用。“弱”引用还避免了对映射中的值进行垃圾收集。当将键映射到只有在键未被垃圾收集时才有价值的键的信息时，weakmap是特别有用的构造。

  • 看代码，变量提升，块级作用域

  • 算法：回文字符串，判断一个字符串最多只删1个字符，是否能成为一个回文字符串

这是我说不知道最多的一场面试，被虐的很惨，发现自己很多不足，接下来就是要弥补这些不足，去精读浏览器工作原理于实践这个专栏，按照之前的效率，应该是凉了...

互娱研发二面 6 月 22 日

  • 为什么 0.1 + 0.2 !== 0.3 

  • 几种(计算机组成原理相关的)算法

    • 不会，这个，计算机基础确实比较薄弱，之前没重视到

  • TCP 拥塞控制？

  • TypeScript 高级用法， Pick 和 Omit

  • 泛型的理解

  • webpack 和一面差不多吧

    • devServe 做了哪些优化了解吗

    • 热模块更新

    • 其他的呢

    • 不知道了

  • React Fiber是什么？

  • 实现一个自定义 hook, 刚开始案例是 useState，我没问明白一直以为实现一个 useState，后来才发现是实现自定义 hook...

  • 讲讲常用的 hook

  • 用正则表达式获取 url 中 query 参数

  • 你总结一下这场面试

    • 计算机基础之前确实没重视到，之后也打算系统学习一下，但是说实话我对自己的编码能力挺自信的，虽然我不爱背 API

    • 前端基础其实还可以，就是你有点急，一急就什么都想不起来（您都打哈欠了，我能不急吗，本来就慌，这一下，心都凉了），那我再给你出道题

  • n 叉树层序遍历

    const levelOrder = (root) => {
      while (root.length) {
        const temp = root.shift();
        console.log(temp.val);
        for (let i = 0; i < temp.children.length; i++) {
          root.push(temp.children[i]);
        }
      }
    };
     const root = [
      {
        val: 1,
        children: [
          {
            val: 3,
            children: [],
          },
        ],
      },
      {
        val: 2,
        children: [
          {
            val: 4,
            children: [],
          },
        ],
      },
    ];

全程一共 1 个小时 10 分。

计算机基础很重要，后期一定要系统学一下，正则表达式用的太少了，参加比赛用的都是 C 语言，所以一直不爱背 API 现在吃大亏了，一面剪切字符串刚开始就是自己封装的，现在又不长记性，唉，当时心都凉了，晚上 hr 说通过了，周五三面...

互娱研发三面

6月25日

  • 自我介绍

  • 先写一道题：两数之和

  • 分析一下时间复杂度, 能不能优化？

  • 学前端多久了

  • 怎么学前端的

  • 聊聊项目亮点

    • 我在说性能上做的一些优化, 面试官没追问我, 说到 http2, TCP 丢包阻塞问题, 问我有没有什么办法能解决这个丢包阻塞问题, 这好像解决不了或者很困难, 因为 http3 弃用了 TCP 直接采用的 UDP, UDP 有哪些特性

  • 闭包数据怎么检查

  • 实现一个搜索推荐组件会考虑哪些

    • 我组件库里有这个组件有链接, 防抖

    • 怎么监听数据变化

    • input 的值吗, React 中是 onChange,

    • 比如我先输入一个 a, 然后我在输入一个 b, a 请求后返回你怎么办

    • 想了想说, 后端将我请求值带回来, 我做一个判断是否更新推荐列表

    • 那不通过后端那

    • 额, 没什么想法(请求可以取消...)

  • webpack 了解多少

    • 之前面试有问过，主要还是在使用层面，原理没深入了解过，我主要还是想

  • 个人最大的优点和缺点

  • 我看你面试过其他部门，什么原因

    • 学历，我大专，然后 offer 审批不通过

  • 反问

    • 学习和技术上的建议

    • 我觉得你学习还可以，技术上吗，实习还是先多打基础吧，看一些教科书类的书籍

第三轮面试一共48 分钟。

这场面试题写完算法题，后面也不那么紧张了。但感觉题写了20多分钟，有点太久了，而且后面面试官也没问什么问题。

6月28日，三天了，没消息，问下 hr，果然，没有通过。

面试官点评

这位同学在第二个部门的面试经历，相比之前考察的范围更大，难度也高一些。

这三轮涉及到了SEO优化、SSR、DNS解析、HTTP2、HTTPS、CSRF、CDN、Webpack、CSS布局、ES6、TCP、TS、算法、项目等等。

大家也可以看到，每一轮的面试官侧重点、风格都不太一样，但是三面一般比较喜欢出情景题，考察面试者的综合能力。

最后

7月初，大厂秋招的提前批已经开始了。祝应届的同学们都能在秋招中，收获让自己满意的offer。

这儿也打个广告，《前端面试题宝典》经过一年多的迭代，现已推出 小程序 和 电脑版刷题网站 （https://fe.ecool.fun/），欢迎大家使用~

同时，我们还推出了面试辅导的增值服务，可以为大家提供 “简历指导” 和 “模拟面试” 服务，感兴趣的同学可以联系小助手（微信号：interview-fe）进行报名。