【建议收藏】石墨文档前端三轮面试面经(文末有福利) - 文章详情

1.背景

由于所在行业受政策的影响，公司考虑转型，而且为了节省成本，进行了裁员，我不幸在此次的优化名单中。

虽然拿到了裁员的赔偿，在休息几天后，我还是拿起了书本，开始复习找工作。

网上五花八门的面试题很多，大部分都仿佛还是几年的题库。再想想这几年的新技术点，发现自己的知识体系还是有很多遗漏的。

于是按照找工作的习惯，从原型链开始，函数继承，页面渲染流程，页面性能优化，Promise，ES6，CSS，前端常见手写实现，把常见的知识点简单过了一遍。之后就是开始面试找状态。

石墨是我面试的第三家公司，前两家公司的请查看历史文章。

2.一面

['10', '10', '10', '10', '10'].map(parseInt) 的输出值是什么？

你们现在的技术栈是什么？为什么要使用ts？

ts中的 any、unknown 有什么区别？

setTimeout的执行过程（事件循环，同步、异步）

对Promise的理解，与async、await的区别，async、await是怎么实现的

解释 requestAnimationFrame/requestIdleCallback，分别有什么用？

react性能优化

说说对flex的理解

回流、重绘是什么？如何减少回流和重绘？

判断一个对象是数组的方法

怎么寻找react页面卡顿的原因

编程题：实现一个对象的 flatten 方法，如下：

const obj = {  a: {    b: 1,    c: 2,    d: {      e: 5    }  },  b: [1, 3, {a: 2, b: 3}],  c: 3}

flatten(obj){} 结果返回如下

// {//   'a.b': 1,//   'a.c': 2,//   'a.d.e': 5,//   'b[0]': 1,//   'b[1]': 3,//   'b[2].a': 2,//   'b[2].b': 3//    c: 3// }

一面比较基础，面试官也很nice，对于我回答中不足的地方进行了提醒。

3.二面

说说对web worker的理解

service worker和强缓存相比，有哪些优势？

说说对堆栈溢出的理解

position中的sticky是什么，还有哪些其他的？

ts中，any和unknown分别是什么意思？泛型怎么使用？

bind有什么用？连续多个bind，最后this指向是什么？

webpack的plugin怎么实现？

编程题：

现已知一个字符串是由正整数和加减乘除四个运算符(+ - * /)组成。
例如存在字符串 const str = '11+2-3*4+5/2*4+10/5'，现在需要将高优先级运算，用小括号包裹起来，例如结果为 '11+2-(3*4)+(5/2*4)+(10/5)'。注意可能会出现连续的乘除运算，需要包裹到一起。
请用 javascript 实现这一过程

上面是我能记录下来的二面知识点，整体来说，问的比一面更深。而且让人比较意外的是，二面中对于一面没有回答好的题目又重新进行了提问，对于面试过程中没有回答好的题目，还是得自己在面试结束后进行复盘。

4.三面

手写题：使用TypeScript 实现一个 get 函数来获取它的属性值

const data = { name: 'tom', age: 18， address: xxx}

这儿直接贴下答案：

function get<T extends object, K extends keyof T>(o: T, name: K): T[K] {  return o[name]}

ts中的 any 、 unknown 的区别

有用过ts中的 keyof 吗？

for in/for of的区别

Promise值穿透

【编程题】基于二面中的表达式包裹编程题，实现计算表达式的值

最后的一道编程题因为个人状态原因（面试节奏很紧凑），没能写出来，觉得有点遗憾。三面中ts方面的知识点较多，也问了不少其他方向的问题，比如项目相关，以及投石墨的原因，和自己的职业规划。

5.福利

很多年后的如今,我终于醒悟过来,那些年的你把我宠成了如今生活无法自理的状态

有橙子的季节,你总会细细的剥皮,分瓣,放上牙签端放到我的左手边,那时候我盯着电脑coding着,却还嫌弃你的碍手碍脚

我从爱媛橙吃到赣南脐橙到褚橙

后来你离开了,再也没人好好剥橙子给我吃,我也没再好好吃橙子

这款20年老树赣南脐橙,有记忆里橙子的香味,也有记忆里的你的味,甜到忧伤

码农滞销的赣南脐橙已上架,顺丰包邮,果园直采,坏果包赔,如果你也有一些遗憾的人,或者有想说而不敢明说的话要对某人说,不妨送她一箱赣南脐橙吧,心意全在橙子里,酸也是你,甜也是你,何况它那么甜:

如果你吃过赣南脐橙,你自然懂得,赣南脐橙YYDS

如果只是放个商店二维码,那叫什么福利,前端面试题宝典粉丝专享优惠券奉上: