关于前端:2021-年林一一同学的字节百度京东秋招记录

大家好，我是林一一。有一段时间没有写博客了，因为最近几个月的工夫都放在秋招下面了，想了良久，秋招的经验不晓得写还是不写。最近思路很乱，情绪也比拟塌实，想躺平一段时间，但总感觉有很多事件要做。上面的某些文字 (非面试局部) 删了又写，写了又删，从 1 号到当初始终断断续续的。这篇文章就算是给本人大学秋招的做一份记录，也是本人成长的一份记忆。

秋招后果简述如下：

百度 offer
京东 offer
爱奇艺 offer
有赞 offer
深服气 offer
字节(bushi😂)

秋招投了很多公司，包含字节，腾讯。。。

7 月是一个好月份，哈哈。学校也开始放暑假了，然而寒假图书馆也只能凋谢一楼，每天十几分钟带着电脑 跋山涉水 过去。我是往年 7 月份开始投递简历的，然而提前批我根本没有机会加入任何面试，因为简历过不了(😂苦笑.jpg)，加上有提前批的企业很少，所以整个七月根本都是感谢信😂。
工夫推到了八月份逐步开始了面试。上面的面经是秋招的一个记录，然而因为我技术能力和程度十分无限，可能这篇文章对大家不会有多大的帮忙。__而且工夫过的比拟久了，我并没有一一记录下所有的面试题。__

对于我写在文章最初吧，发发牢骚。😂

7 月提前批投简历，一投就挂简历，同学推来一个 HR 微信。我简历将塞到了一个 HR 手里，最初给了一次面试机会。

一面的面试官很亲切，先微笑的和我自我介绍一下本人。给人感觉特地不错，整个面试过程很难受，有说有笑。

自我介绍
JS 类型 -> symbol 的呈现起因，解决了什么问题 ->bigint 有什么作用 -> 类型查看有哪些 ->typeof 的原理（二进制）-> null 为什么会被判断成 object。
讲讲 0.1 + 0.2 != 0.3 的起因，编写一个函数解决这个问题。
typeof 和 instanceof 的区别。
写一个能够检测所有类型的办法。
for in 和 for of 的区别。
页面性能优化有哪些。(提到了服务端压缩，http 缓存，回流重绘等等，面试官就从这外面发问)
协商缓存的字段 Cache-Control 有哪些属性值，-> max-age 的属性值有哪些区别。为什么 http1.1 要新增 Cache-Control 这个字段？
图片懒加载你是怎么实现（我用的是 IntersectionObserver 来写）
transform 会导致重排和重绘吗？为什么(Recalculate Style -> Layout -> Paint Setup and Paint -> Composite Layers 因为，transform 位于复合层 Composite layer 层)
服务端的 Gzip 压缩和 deflate 压缩有什么区别，应用了什么算法。(LZ77，顺便答了 png 的应用算法)
晓得哪些网络攻击的形式？（提到了 csrf 和 xss）怎么做过滤和赛选的？
CSRF 攻打怎么进攻，origin 和 referrer 有什么毛病。
cookie 有哪些属性值？cookie 的 sameSite 属性值有什么作用，httpOnly 和什么有关系
浏览器怎么实现跨域，为什么会有跨域的问题？sessionStorage 能在同源不同页面下共享数据吗？（不能）
写一下 JSONP 的实现原理。postMessage 有理解吗？

说一下浏览器的事件循环？浏览器的事件循环和 node 的事件循环有区别吗？（node V10 之前有区别）

// 一道题
async function async1() {console.log('async1 start');
 await async2()
 console.log('async end');
}

async function async2() {return new Promise((resolve, reject) => {console.log('async2 start');
     resolve()}).then(res => {console.log('async2 end');
 })
}

async1()

new Promise(resolve => {console.log('Promise');
 resolve()}).then(res => {console.log('Promise end');
})

console.log('script end');

// async1 start   async2 start  Promise  script end  async2 end  Promise end  async end

requestAnimationFrame 有理解吗？在事件循环的哪一个阶段执行？
说一下 Promise。（这里同样问了好多 Promise 的问题）

实现一个 schedule 类

class Scheduler {add(promiseCreator) {/*...*/}
  // ...
}

const timeout = (time) =>
  new Promise((resolve) => {setTimeout(resolve, time)
  })

const scheduler = new Scheduler()

const addTask = (time, order) => {scheduler.add(() => timeout(time)).then(() => console.log(order))
}

addTask(1000, '1')
addTask(500, '2')
addTask(300, '3')
addTask(400, '4')

// output: 2 3 1 4
// 一开始，1，2 两个工作进入队列
// 500ms 时，2 实现，输入 2，3 进入执行队列
// 800ms 时，3 实现，输入 3，4 进入执行队列
// 1000ms 时，1 实现，输入 1
// 1200ms 时，4 实现，输入 4

实现一个 Promise.all
有什么想问我的

这一面工夫比拟长 1 小时多点，面试官说过了。面试官最初通知我，简历上学校不好，然而 Blog 写的还能够这也是一个亮点，所以给了面试的机会。很感激面试官的激励。过后还想给他当小弟来着，但心愿就完结在二面了

被彻底碾压的一面。

问了一下我的项目。
mixin 的原理和优先级，mixin 存在的毛病（优先级问题），怎么解决。
写过 vue 的插件吗？vue 的插件中 install 实现原理，比方 vueRouter 中的 install 有什么作用。
vue 中一个数据批改屡次，一万次，vue 是怎么解决的，一次渲染一遍吗？（讲了 vue 异步更新的原理，他不称心）
具体讲讲 dep 和 watcher。
你是计算机专业的吗？有学过计算机网络吗？（不是）就问问了 OSi 七层协定，哪些层用了哪些协定。

箭头函数能够应用 new 的吗，有 this 吗？new 关键字背地实现了什么 -> 在应用 new 关键字的构造函数外面 return 一个 object 或根本类型会怎么。

// 一道题
var a = 0;
function Parent() {
  this.a = 1;
  return this;
}

Parent.a = 2;
Parent.prototype = {
  a: 3,
  setA: function (value) {
 this.a = value; 
 return this;
  }
}

console.log(new Parent().a); 
console.log(Parent().a); 
console.log(new Parent().setA(4).a); 
console.log(a); 
console.log(Parent().setA(5).a);

面试官不停的在督促答案是什么😅

CSS 实现动画好还是 JS 实现动画好，为什么？
cookie 能够跨域吗？domain 属性被批改了会有成果吗？
具体说说 url 到页面显示的过程。
页面是先进行渲染还是先 tcp 挥手（我说了不同状况。面试官不称心，让我回去写一个 node 服务器，而后向客户端发送一个个 chunk 就晓得了）
写过小程序吗，小程序的 url 地址看不见，不必域名可不可以间接应用 IP。这样就省略了 dns 的解析不是更好吗？为什么？
说说跨域，jsonp 怎么解决多个组件须要调用的办法名字雷同，抵触了怎么办？
设置了 Access-Control-Allow-Credentials 和 witheCredentials 为什么 cookie 还是没能胜利跨域；
反转链表，多层数组反转（[1, [2, [3, [4, [5, ‘null’]]]]] => [5, [4, [3, [2, [1, ‘null’]]]]]）；

从前面开始，笑嘻嘻了。。。

一天面完

上来就是两道算法题

在一个排序的链表中，存在反复的结点，请删除该链表中反复的结点，反复的结点不保留，返回链表头指针。例如，链表 1->2->3->3->4->4->5 解决后为 1->2->5。
给出一个整数数组 A 和有序的整数数组 B，请将数组 B 合并到数组 A 中，变成一个有序的升序数组
```
function merge(A, m, B, n) {// ...}
```
留神：1. 保障 A 数组有足够的空间寄存 B 数组的元素，A 和 B 中初始的元素数目别离为 m 和 n，A 的数组空间大小为 m+n。2. 不要返回合并的数组，将数组 B 的数据合并到 A 外面就好了。3. A 数组在 [0,m-1] 的范畴也是有序的

阐明：A 数组为[4,5,6]，B 数组为[1,2,3]，后台程序会事后将 A 扩容为[4,5,6,0,0,0]，B 还是为[1,2,3]，m=3，n=3，传入到函数 merge 外面，而后请同学实现 merge 函数，将 B 的数据合并 A 外面，最初后台程序输入 A 数组

示例：输出 [4,5,6],[1,2,3] 输入[1,2,3,4,5,6]。

输出
[1,2,3],[2,5,6]
输入
[1,2,2,3,5,6]

强缓存、协商缓存，这里问了好多，波及到具体字段的设计、优缺点等（我的项目做过的缓存策略，缓存的根据）
Node 事件循环和浏览器有什么区别？有输入输出题
vue 的响应式原理。这里讲了好多，顺带提及了 nextTick 为什么能够在渲染 Watcher 的前面能够拿到新的 DOM 数据
nextTick 实现原理（兼容性的 4 级降级解决）
闭包，闭包会存在什么问题，随后问怎么检测内存泄露的问题，什么状况会导致内存泄露。怎么解决(performance 面板和 memory 快照)
浏览器的渲染原理，GUI 线程是怎么解决页面不同资源的。波及到 async 和 defer 区别。DOMContentLoaded 和 load 区别
怎么优化页面的性能，从哪里动手剖析，剖析了 performance 和 network 面板的参数。
怎么计算首屏工夫 FCP，白屏工夫。
TCP 队头阻塞，TCP 拥塞管制。（讲了拥塞管制的原理和实现算法）
TCP 的流量管制，滑动窗口实现原理。
HTTP3.0 解决了什么问题，和 HTTP2 区别，具体介绍多路复用，多路复用存在什么缺点。
。。。

面试体验不错。还有一些题目不记得了，题目的程序不太一样。几分钟后二面

二面的面试官比拟庄重。气氛比拟冷。同样上来还是算法题

二叉树的相干问题，题目没有记录了，写出递归和非递归的两种写法，(哦，这里还有工夫复杂度的要求)
一道链表有环和统计环的长度问题
过程和线程的区别（管道，共享内存，socket 套接字。。。，这里拉扯了一下浏览器的沙箱机制）
浏览器页面渲染过程，这里讲了良久。问的也深
HTTPS。
SSL 的握手过程，握手的最终后果拿到的密钥是对称密钥还是非对称密钥？（这里解析了一波对称密钥和非对称密钥的加密原理）
理解哪些对称密钥的加密算法（讲了 DES，3DES，RSA）
SSL 每次都须要来一次握手过程吗？（握手后有一个 key 存在了 sessionID 中，验证 sessionID 就行）
浏览器是怎么验证 CA 证书的有效性的。（摘要算法的数字签名）
理解 webpack 吗？怎么编写一个 loader 和 plugins？你有做过哪些性能上的优化。（提及了 plugins 中的使用函数 apply 和接管参数的 complier 和 compilation）
HMR 原理（要害是 Websocket）。
有理解过哪些新的技术。
有哪些想问我的。
。。。

还有些问题记不太分明了，完结后，叫我等会三面。

三面聊了很久，和面试官聊的比拟欢快，很亲切。

html 语义化的标签和意义？
h5 的新个性有哪些？
css3 的新个性？css3 的动画有哪些？
Animation 和 transition 具体的区别？
怎么捕捉动画最初一帧？
物理像素和逻辑像素区别？为什么存在挪动端 1px 的问题，怎么解决
盒子模型，规范和被规范盒子模型有哪个属性决定？
border-box 和 content-box 之间的区别。
css 有哪些选择器，优先级关系

上面的 div 标签显示什么色彩

.blue {color: blue;}
.green {color: green;}
.red {color: red;}
<div class="red green blue"> 色彩 </div>

变量晋升问题

var foo = 'jd';
(function(f){console.log(foo);
 var foo = f || 'hello';
 console.log(foo)
})(foo);
console.log(foo)

不是这道题，然而相似。

原型和原型链？模仿实现一个 instanceof
闭包？出了一道题。
类型检测有哪些？typeof 检测的机制是什么？0.1 + 0.2 == 0.3 吗？为什么不等？
this 指向问题，js 中有哪些办法能够扭转 this 的指向，出了几道题。
浏览器的渲染原理，回流和重绘啥的
算法题：
1）跳台阶。相似 lettcode
这道题须要写出两种不同的解法，要求一种应用动静布局

2）第二道题遗记了，如同 easy 或是 mid 难度的题。

几分钟后发来二面链接。

vue 源码相干的问题(因为一面面试官没有问，所以二面问了)：
vue 的响应式原理
nextTick 的实现原理，（这里拉扯到了 Vue 更新的异步原理）
vuex 原理和作用，vueRouter 的原理(路由中 install 办法的原理) 和生命周期啥的
计算机网络的一些问题。
http 的某一些字段作用和场景和状态码啥的。
tcp/utp（记得这比照了 HTTP3 的 QUIC 协定）
webpack 打包工具理解多少，这里问了好多。
场景题
1）实现一个 9 宫格，起码能够应用多少个 div？(一开始答复错了，面试官说了 3 个就行，我愣了一下，说了一句重叠吗？他哈哈笑起来，说我可没有说过不能重叠。而后两个人又开始笑了起来😂)

2）vue 中的 vueRouter 怎么实现路由权限校验（写了伪代码）

算法题：只有一道忘了。

有一些记得不太分明了。这里就不写上了

hr 面很多是布局，兴趣爱好啥的。

同样再次跪在二面，面完二面人都恍惚了。。。二面全程写题，题目并不能说难，只是比拟绕。

爱奇艺面试流程很长差不多两个月。。。。3 论技术 + 1 轮 HR 面，流程太久了题目很多不记得了，只记住几道算法题

交易股票的最佳时机 II
大数相加
无反复字符的最长子串
链表相干
实现深拷贝
编写 vue 路由的测验
怎么编写一个 vue 的指令（讲了外部的回调函数实现）

真感觉有赞的技术不错，开源的 vantUI 很有名气。面试的过程中和面试官很聊得来。有赞的面试很多也不太记得了，就不写了，大家须要的能够去牛客看看。

感激秋招一路过去帮忙过我的各位前辈。

晓天大佬掘金 github
天天大佬掘金
呆呆大佬掘金
三元大佬掘金

真的很感激晓天和天天大佬领导的简历批改，同时也很感激掘金的各位前辈输入的优良文章。

一个矫情的人写着不文艺的文字，看起来有些 emo，哈哈。有很多时候致力付出却没有回报的事件真的很多，像心心念念的 offer，像难得遇到喜爱的人，本来认为致力变的优良事件会朝好的方向走，本来认为拿到好点的 offer 能有点扭转，但事件并没有呈现本人意料的走向，只能嘻嘻了。越想要的越得不到，这话很无奈，很丧气。最近在掘金沸点看到很多前辈们的情情爱爱，最初仿佛并没有胜利的，大抵是这种感觉吧。很惋惜。承受要承受的，扭转能扭转的。这是成年人世界的失落和无奈。然而不管怎样，菜就去变强，有余就去补救，这总不会错。

整个秋招的情绪就像坐过山车一样，迷茫，徘徊，失落，自信，再次失落，再次自信。每每感觉没有抉择的时候，老天像是和你开玩笑一样，再次向你脸上砸来一个机会。那时的我只想抓住他，无论怎样。秋招很强烈，很煎熬，过程很漫长。秋招伊始那个时候我还记得我曾和舍友说过可能找不到工作了，舍友掉以轻心的来了一句，“我在见证一个大佬（菜狗）的成长”（我菜狗一个）。

我曾盼望着秋招完结后，去投喂图书馆沿路的小猫们，看着一窝窝的小猫崽出世到长大还蛮乏味的，也想呆呆的坐在图书馆里做着想做的事，一边看看坐在我后面爱傻笑的女孩儿。你是十分可恶的人，真应该遇到最好的人，我也真心愿我就是。

大家加油，咱们都会上岸的(心愿舍友考研，考公都能上岸)，毕竟乾坤未定。

我是林一一，下次见。噢，如果感觉还能够的心愿 github star 啦

关于前端:2021-年林一一同学的字节百度京东秋招记录

原文首发

掘金

结尾

对于我

字节电商(提前批)

一面

二面

百度

一面

二面

三面

没有 HR 面

京东

一面：

二面：

hr 面

字节飞书正式批

爱奇艺

有赞

感激

对于我