两个部门，六轮面试，终与字节无缘
两个部门，六轮面试，终与字节无缘
这个面试机会来的挺意外的，先在 Boss 投递的简历，后再牛客网看到了内推人的微信，加了微信问了下进度，挂了，内推人给我打电话根据简历简单询问了一下情况(内推人很谦逊，毕业于一所 211 大学，和我说他的学历也很一般)，然后和 hr 沟通捞了我一下，才有的这个面试机会，太感谢了。
一面
6 月 9 日 16：00
自我介绍
怪异盒模型和标准盒模型的区别
给了一段代码说两个盒子背景为蓝色的区域
两个盒子分别设置了 box-sizing: border-box, box-sizing: content-box
如何触发 BFC
给一段代码问效果是什么样的
会有一个外边距合并的问题，怎么解决这个问题
垂直水平居中
你了解得数组遍历方式有哪些，你觉得那个性能最优那
this 指向谁，如何更改 this 的指向
// 非原题 非原题 非原题 const o1 = { text: 'o1', fn: function() { return this.text; } } const o2 = { text: 'o2', fn: o1.fn } console.log(o2.fn());
你常用的 React Hooks 有哪些，描述功能
- 打出来
服务端渲染了解吗 和 SPA(单页面应用) 的区别
Commonjs 和 ES6 Module 得区别
- 还了解过其他的吗，不了解(AMD、CMD、UMD...)
算法题
题不难，但是思路跑偏了
先用的递归O(n ^ 2)
可以优化一下吗？
改成了循环可以提前终止
面试官: 其实你思路跑偏了，O(n)的复杂度就可以，用栈(瞬间顿悟)，不过解出来就好
反问
大概 45 分钟吧
说一面就给我过了，等会 17:00 二面
二面
讲讲项目，说说你的亮点
亮点，性能优化吧，怎么测量的，怎么优化的，优化前后的对比
Network, Lighthouse, Performace, Memory, Webpack、网络
面试官也会提出一些问题，问我怎么优化，原理是什么
有写过 webpack 的 plugins 吗
- 没有
看代码，css 选择器权重
算法：二叉树
考点递归回溯，非原题
有这么一个数据结构: const data = [ { "id": "1", "sub": [ { "id": "2", "sub": [ { "id": "3", "sub": null }, { "id": "4", "sub": [ { "id": "6", "sub": null } ] }, { "id": "5", "sub": null } ] } ] }, { "id": "7", "sub": [ { "id": "8", "sub": [ { "id": "9", "sub": null } ] } ] }, { "id": "10", "sub": null } ] 现在给定一个id，要求实现一个函数 findPath(data, id) { } 返回给定id在 data 里的路径 示例: id = "1" => ["1"] id = "9" => ["7", "8", "9"] id = "100"=> [] PS: id 全局唯一，无序
说下 EventLoop
看代码
- 非原题
async function async1() { console.log('async1 start'); await async2(); console.log('async1 end'); } async function async2() { console.log('async2'); // 注意：这里如果返回 Promise 的话执行顺序就不一样了 } console.log('script start'); setTimeout(function() { console.log('setTimeout'); }, 0) async1(); new Promise(function(resolve) { console.log('promise1'); resolve(); }).then(function() { console.log('promise2'); }); console.log('script end');
- 非原题
大概 40 分钟吧，等会 18:00 三面
三面
自我介绍
几几年的
哪里人啊
高考是出现了什么状况吗
这个学历对你产生了多少影响
还是聊聊技术吧，给一个场景，二分查找
写出来了
你还能在优化一下吗
额，时间复杂度O(logn), 空间复杂度 O(1)，这挺优的啊(有点懵)
不，这个优化不止是时间和空间复杂度，可以从工程化的角度出发
还是有点懵
提点了我一下(l 和 r 为什么要定义在外面)
哦哦，关联太多，所以耦合就高，您是指的这个吗(没回复)
// 当时用的 js，用 ts 只是为了表达的更清晰一点 interface Barrage { time: Number; barrage: String; } const binarySearch = (arr: Barrage[], time: number) => { let l = 0; let r = arr.length - 1; while (l <= r) { const mid = (l + r) / 2; if (arr[mid].time === time) { return arr[mid].barrage; } else if (arr[mid].time < time) { l = mid + 1; } else { r = mid - 1; } } return null; }那数组的边界
我就在那看，看了大概十几秒吧，会越界吗...
面试官：好吧，那我们先下一题
一个异步任务调度器，最多同时执行两个异步任务
有思路吗？
用个数组先存起来，判断执行的数量，需要就取出来，
好，那你写吧
结果写了好久，半个小时起步，还没写出个结果
执行逻辑大概写出来了，但返回的逻辑没写出来
提点我一下，我改了一下
又提点我一下，我又改了一下
逻辑上离成功就差一步了(还差一个异步)，但我傻呵呵的对着 C++ 的控制台打了半天 js 代码，给的是类我还少打了好几个 this，唉...
时间问题打断了，确实写的太久了
为什么学前端
一个用户活跃度几千万的网站你会做哪些优化
- 有点懵，说实话我对几千万和几十个人没什么概念，说了些关于首屏，用户体验的优化，减少请求...
反问
学习建议
做题之前先想清楚，不要错在一些不该错的地方
每轮面试官问的问题都很开放，引导你自己说，再根据你所说的东西再去问一些问题 连着三面，因为三面比较惨所以对其他两面问题印象不是很深
复盘
异步任务调度器
这个异步任务调度器调用机制实际和 Proimse 的 reslove 触发 then 方法是相同的，reslove 内的执行逻辑需异步触发，等待 then 方法中的内容执行完(存储好)再触发，只是方法内部执行逻辑有细微的差异而已。
二分查找
// 这除出来可有可能是个分数啊 const mid = (l + r) / 2; // Math.floor((l + r) / 2);
这心一下就哇凉哇凉的，之前的 Promise 白手写了，索引还不取整，脑袋跟进了水一样，灌得满满的那种。
第二天下午，hr 和我说面试通过，但因学历 offer 审批有些困难，会努力帮我争取。很感谢，说实话能得到这个认可，我已经很开心了。三月一开始投递简历到现在，大专不要，必须本科，学历不符，BOSS 上投递大多回复都没有，大多的公司面试机会都没有，学历问题的我也早已经习惯了。
6月15日，收到 hr 通知，最终还是不行...
不过 hr 在他们的群里发了一下，我被另一个部门又捞起来了
互娱研发一面
6 月 17 日
自我介绍
亮点
- 当然还是说的性能优化，这下可惨了
那给一个网站 SEO 怎么优化
通过 Lighthouse 进行测量，根据 Lighthouse 给出的建议 进行优化
title, keywords, description，语义化，img 的 alt，a 的 href
知道 SEO 什么什么(不记得面试官说的什么了)？
不知道
如果不用 Lighthouse，Lighthouse 那不就只是能在谷歌上测吗(大概是这么个问题)
WebPageTest 不过我用的比较少，没深挖
Lighthouse 也可以通过 npm 进行下载使用
SSR 了解吗
不了解，就跑过 next 的案例
我当时可能理解错了，应该是说下概念就行
dns 预解析的怎么实现的?
- dns 解析的过程？
为什么要用 http2
多路复用
那说下 http1.1 和 http2 区别？
头部压缩，多路复用，别的没啥印象(可以设置请求的优先级，服务器推送(Server Push))
Server Push 了解过吗？
啥，我咋没听过(我是智障，我是智障，我是智障...)
session 了解吗?
登录鉴权就聊到 token
JWT 了解吗？
不太了解，只知道 T 是 token
CSRF 攻击了解吗？
怎么预防那？还有其他办法吗?
如果不通过 img 或者 script 标签，或者说用户不通过点击第三方连接怎么造成 CSRF 攻击吗？
不知道啊，然后面试官给我讲了一些关于 dns 劫持
http 和 https
http 的缺点 明文不加密，内容可能被窃听；不验证通信方身份，可能遭遇伪装，无法证明报文的完整性，可能被篡改。https 就是披着 SSL 外壳的 HTTP，SSL 会建立安全通信线路，查明对手证书...
知道 http 的内容是如何窃听的?
不知道，不过可以一些抓包工具抓
浏览器怎么验证证书的?
说了对称加密和非对称加密，具体不清楚
那你说下 https 握手过程？
不知道啊
那对称加密和非对称加密怎么之间选择？
说下 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 的区别
plugins 作用于 webpack 那个生命周期?
啊，不知道啊(plugins 对打包过程和结果进行干预)， 说了下 webpack 构建流程
你所知道的白屏原因
- 怎么优化
三列布局
flex: 1; 是复合属性，说下其他属性？
扩展比例，缩放比列，基准大小（x轴覆盖宽度，y 轴覆盖高度）
ES6 新增的类型
Symbol, BigInt
Symbol 有用过吗？
手写 bind 的时候用过，防止覆盖掉对象上的原有属性
ES6 新增的类
Promise
WeakMap 和 Map 了解吗? 说下他们的区别？
WeakMap 的键必须是对象
有用过吗？
深拷贝判断是否有重复引用的时候用过
面试官：WeakMap 是和垃圾回收有一些关系...
MDN: 原生weakmap持有对关键对象的“弱”引用。由于这样的原生weakmap不阻止垃圾收集，从而最终删除对键对象的引用。“弱”引用还避免了对映射中的值进行垃圾收集。当将键映射到只有在键未被垃圾收集时才有价值的键的信息时，weakmap是特别有用的构造。
1 小时零 5 分(还有其他的想不起来了)
看代码，变量提升，块级作用域
算法：回文字符串(这个问题好常见)，判断一个字符串最多只删1个字符，是否能成为一个回文字符串
先说思路再写，还是先写在说思路
额，先说思路吧。
判断是否为回文字符串的话，我可以这个字符串反转过来，判断是否原字符串相同，然后将每种情况都试一下
暴力破解呗，是可以实现，但是这个复杂度就是 O(n^2) 的了啊，能不能在优化优化
设置两个索引前后对比，两边字母相同向内靠拢，不同，呀，不同咋办(卡住了)...
let str = "ABCDABA" let l = 0; let r = str.length - 1;
要不要我提示你一下？
那您提示一下吧。
思路是没错的，不同的时候你判断删除那个字符是不是回文字符串
const reverse = (str) => {
let temp = '';
for(let i = 0; i < str.length; i++) {
temp += str[i];
}
return temp === str;
}
const isSymmetry = (str) => {
let l = 0;
let r = str.legnth - 1;
while(l <= r) {
if(str[l] === str[r]) {
l++;
r--;
} else {
if(!reverse(str.substring(l, r)) && !reverse(str.substring(l + 1, r + 1))) {
return false;
}
}
}
return true;
}
面试结束复盘
当时没有测试用例，少测试了一种情况，当删除一个字母就是回文子串的情况，没有终止条件，这个代码死循环了，而且我既然想到用索引的方式判断是否为回文字符串，那么我就不应该再用反转再去判断，而的这个逻辑 isSymmetry 中就是，我也不应该再去重复写一个一样逻辑的函数。
const isSymmetry = (str, flag = false) => {
let l = 0;
let r = str.length - 1;
while (l <= r) {
if (str[l] === str[r]) {
l++;
r--;
} else {
if (flag) {
return false;
}
if (
!isSymmetry(str.substring(l, r), true) &&
!isSymmetry(str.substring(l + 1, r + 1), true)
) {
return false;
}
return true;
}
}
return true;
};
这是我说不知道最多的一场面试，被虐的很惨，发现自己很多不足，接下来就是要弥补这些不足，去精读浏览器工作原理于实践这个专栏，按照之前的效率，应该是凉了...
互娱研发二面
6 月 22 日
0.1 + 0.2 !== 0.3 为什么
什么什么的几种(计算机组成原理相关的)算法？
- 不会，这个，计算机基础确实比较薄弱，之前没重视到
TCP 拥塞控制？
不知道，只了解丢包阻塞的情况，(网络的知识就看过图解HTTP和面经, 唉...)...
TCP 和 UDP 的区别
三次挥手四次握手
泛型的理解
webpack 和一面差不多吧
devServe 做了哪些优化了解吗
热模块更新
其他的那
不知道了
React Fibler
实现一个自定义 hook, 刚开始案例是 useState，我没问明白一直以为实现一个 useState，后来才发现是实现自定义 hook...
讲讲常用的 hook 打出来
用正则表达式获取 url 中 query 参数
可以不用正则吗，我不熟
split 功能记错了，以为只能分割成两个数组，还打算自己封装一个...中间面试官打了个哈欠，写了不到 10 分种，被打断了
这么简单的题，我当时做的好像一个脑残，我要是面试官我也不想面了
let str = "[https://juejin.cn?name=zhangsan&age=18&id=123](https://juejin.cn?name=zhangsan&age=18&id=123)"; function getUrlParams = ()=> { let obj = {}; for (let i = 0; i < splitStr.length; i++) { let temp = splitStr[i].split("="); obj[temp[0]] = temp[1]; } return obj; } console.log(obj);
你总结一下这场面试
计算机基础之前确实没重视到，之后也打算系统学习一下，但是说实话我对自己的编码能力挺自信的，虽然我不爱背 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 现在吃大亏了，一面剪切字符串刚开始就是自己封装的，现在又不长记性，唉，当时心都凉了，周五三面...
互娱研发三面
6月25
自我介绍
先写一道题吧两数之和
const twoSum = (arr, target) => {
const obj = {};
for(let i = 0; i < arr.length; i++) {
if (obj[arr[i]] != null) {
return [obj[arr[i]], i];
} else {
obj[target - arr[i]] = i;
}
}
return [];
};
- 返回所有的情况
const twoSum = (arr, target) => {
const res = [];
for(let i = 0; i < arr.length - 1; i++) {
for(let j = i + 1; j < arr.length; j++) {
if(arr[i] + arr[j] === target) {
res.push([i, j]);
}
}
}
return res;
}
twoSum([2,7,11, 7], 9); // 打印个这个 0, 1, 0, 3
牛客把我的数组给展开了, 我当时就有点懵, 这是啥, 有检查一遍代码, 没问题啊, 您好我可以打开控制台调试一下吗
- 分析一下时间复杂度, 能不能在优化一下
再上一个问题开始的时候, 我就一直再想怎么优化, 毕竟面试了好几次了, O(n^2)一定会让我去优化的
const twoSum = (arr, target) => {
let obj = {};
let res = [];
for(let i = 0; i < arr.length; i++) {
if(obj[arr[i]] != null) {
let temp = obj[arr[i]];
for(let j = 0; j < temp.length; j++) {
res.push([temp[j], i]); // res.push([temp[j], i); 当时这里少打一个 ]
}
} else {
let temp = target - arr[i];
obj[temp] = obj[temp] ? [...obj[temp], i] : [i];
}
}
return res;
}
牛客这个报错信息, 不知道是面试官给的条件不一样还是怎么回事, 每次报错信息都不太一样, 最开始视频架构部门面试打错了, 提示的挺详细啊, 又看一遍代码逻辑没错啊, 然后我就申请打开控制台了
然后开始解释思路, 抬头看下时间已经 25 分钟, 写的有点久了啊
学前端多久了
怎么学前端的
聊聊项目亮点
- 我在说性能上做的一些优化, 面试官没追问我, 说到 http2, TCP 丢包阻塞问题, 问我有没有什么办法能解决这个丢包阻塞问题, 这好像解决不了或者很困难, 因为 http3 弃用了 TCP 直接采用的 UDP, UDP 有哪些特性
闭包数据怎么检查
实现一个搜索推荐组件会考虑哪些
我组件库里有这个组件有链接, 防抖
怎么监听数据变化
input 的值吗, React 中是 onChange,
比如我先输入一个 a, 然后我在输入一个 b, a 请求后返回你怎么办
想了想说, 后端将我请求值带回来, 我做一个判断是否更新推荐列表
那不通过后端那
额, 没什么想法(请求可以取消...)
webpack 了解多少
- 之前面试有问过，主要还是再使用层面，原理没深入了解过
最大的优点和缺点(好像问的不是性格, 而是技术相关的)
我看你面试过其他部门, 什么原因
学历
啊!(感觉面试官有点惊讶)
我大专吗, 然后 offer 审批不通过
哦
反问
学习和技术上的建议
我觉得你学习还可以，技术上吗，还是先多打基础吧，看一些教科书类的书籍
48 分钟
接着复盘
// 我当时觉得最差的情况是这个 twoSum([2, 2, 2, 7], 9); // n + n - 1 // 但一半一半才最差, twoSum([2, 2, 7, 7], 9); // (n / 2) + (n/2) * (n/2) // 而且我还忽略了一种情况, 这个 else 不应该加 twoSum([2, 7, 2, 7], 9);
const twoSum = (arr, target) => {
let obj = {};
let res = [];
for(let i = 0; i < arr.length; i++) {
if(obj[arr[i]] != null) {
let temp = obj[arr[i]];
for(let j = 0; j < temp.length; j++) {
res.push([temp[j], i]);
}
}
let temp = target - arr[i];
// obj[temp] = obj[temp] ? [...obj[temp], i] : [i];
// 用 push 更好一点
obj[temp] ? obj[temp].push(i) : obj[temp] = [i];
}
return res;
}
这场面试题写完之后, 后面也不那么紧张了, 但感觉题写的有点久了, 而且后面面试官也没问什么问题, 好像我也没什么值得他问的了, 这感觉比之前都慌...
最终还是不通过...
#面经##字节跳动##实习##前端工程师#
老哥加油
查看15道真题和解析
