【面经】前端一年半经验社招4家大厂面经(已拿offer)

799 阅读15分钟

博主毕业后在一家创业公司做前端,感觉项目没啥难点而且方向没啥前途,所以打算出来找机会。面了在深圳的想去的4家公司,最近有求职想法的同学们可以自查一下。部分写了回答部分简单或者答案较长的没写。

腾讯

一面(60min)

  1. 共享桌面做了两道题:最小栈单词距离。15分钟做出来,然后问我思路
  2. 项目中做了什么亮眼的?项目中某个功能的具体实现?
  3. 为什么要用typescript?有什么好处?
  4. 对React中类组件和函数组件的看法?有封装过hook吗?
  5. 讲一下let和const?
  6. ES6的Map实现原理?数组和链表。对象也可以实现类似功能,为啥要Map?对象键名只能是字符串,对象类型会调用toString,一般会变成[Object object]
  7. ES6为什么要引入Promise?还有啥异步编写代码的方式?generator和async\await
  8. http报文组成形式?一定会有content-length吗?定长请求才有content-length,不定长请求会有transfer-encoding:chunked头,不包含content-length
  9. 讲一讲跨域?怎么防止跨域?反向代理或CORS头部
  10. 服务端怎么判断请求跨域?判断origin请求头
  11. 跨域怎么带cookie?前端ajax要设置withCredentials:true,后端要设置Access-Control-Allow-Credentials:true。且在Access-Control-Allow-Origin为通配符'*'的情况下只能设置cookie:secure开启https才能携带cookie
  12. 讲一下网络安全?给他讲了xss和csrf以及对应的预防方法
  13. 讲一下https握手过程?
  14. 手写二叉搜索树,用ES6语法,只实现插入和查找方法?最差情况下查找时间复杂度度?退化成一条链形式,O(n)。如何优化?在插入的过程中判断子树高度进行旋转。

二面(40min)

二面好像是业务leader,对项目考察比较多

  1. 讲一下项目业务?日均访问量?讲完业务流程之后跟我说我做的项目难点都在后端,前端涉及不到,这个我不知道怎么回答。。。
  2. 讲一下大数据量下的列表渲染优化?讲了只保留必要字段,减小请求体积,并且用虚拟列表做渲染优化,面试官说我就只是用了别人的长列表库没什么难点,我听完愣住了不知道怎么回答。。。
  3. 怎么定位到项目中的一个性能问题?通过chrome控制面板的火焰图观察到频繁触发垃圾回收。火焰图看得到垃圾回收吗?看得到。
  4. 讲一下V8的垃圾回收机制?
  5. 项目细节
  6. 为什么选Redux-Saga?为什么选择Redux?讲项目状态管理的需求和Redux的好处,面试官不太满意。
  7. 为什么引入Typescript?讲了静态类型增加项目可维护性等等。要是你同事不写类型你怎么办?跟同事讲ts的好处并推广。推广完还是不写怎么办?不知道怎么回答了。。。
  8. 项目技术选型,为什么选React?React好维护,中后台应用没有SEO需求,并且公司同事们技术栈都是React。面试官也不满意
  9. nginx不是后端的东西吗,为什么写前端技术栈里?做反向代理用的。那不是后端做吗?回答跨域是浏览器概念所以我理解是前端做。引入了nginx万一挂了怎么办?挂了就重启啊,而且不用nginx起服务怎么获取前端资源。面试官也不满意我的回答。。。。
  10. 讲一下React用Fiber前后的区别?requestIdleCallback的执行时机是?UI渲染后有空闲时间调用传给requestIdleCallback的回调。所以你觉得requestIdleCallback是在UI渲染后执行是吗?是的。(有点蒙蔽我觉得我没回答错)
  11. 你觉得自己这个年限(1.5年)投腾讯自己有什么优势吗?答善于沟通善于学习。他说这个不是优势。

全程被嫌弃项目简单以及很多我回答得挺好的面试官都不满意,果不其然第二天收到了拒信。

阿里

一面(60min)

  1. 讲思路,不使用JS只用CSS实现一个tooltips组件,鼠标滑过时显示旗袍内容
  2. 看代码判断输出,具体内容是this指向的。顺便讲一下箭头函数和普通函数的不同
  3. new一个对象过程会发生什么
  4. 看代码判断输出,宏任务微任务相关的。
  5. 讲一下原型链?
  6. 讲一下Redux以及为什么选Redux?
  7. 另一个项目为什么不用Redux?数据流比较简单,没必要引入增加复杂度
  8. 为啥选Redux-Saga?
  9. 讲一下immer,讲一下immutable数据的好处,immer原理?
  10. setState是同步还是异步,原理?
  11. 讲一下React的虚拟dom及好处
  12. 讲一个React的diff策略及diff细节
  13. 算法题,leetcode原题:比较版本号
  14. 算法题,找出二叉树中两个节点的最短路径,树结点数据结构如下:
type Node = {
	left?:Node;
	right?:Node;
	parent?:Node;
	depth:number
}

二面(20min)

遭遇态度最差,时间最短的面试。。。全程很轻蔑,感觉问题也是随便问的,草草结束面试,让我对阿里印象特别差

  1. 讲一下项目的架构?
  2. 讲一下React-Router原理?讲了hash的hashChange和基于history的popstate两种实现,使用Route判断路由匹配是否渲染组件,以及Link对a链接不会触发popstate主动触发替换组件。
  3. 讲一下项目一个模块具体实现?
  4. 讲一下在项目中封装难度最高的两个组件?说了两个,不满意,说太简单了
  5. 讲一下React的性能优化?把React开发中会使用的性能优化方案都讲了一边

字节跳动

一面(60min)

  1. 看代码说输出,var全局污染相关的
  2. 看代码说输出,任务循环相关的,有Promise、async\await、settimeout很长一段哈哈看了两分钟才看完
  3. 实现一个memo函数?用闭包实现了。然后他说闭包内值一开始是undefined的话,计算结果也是undefiend就判断不出了,然后我就换了个symbol。他说要根据入参不同进行记忆?然后改成在闭包里搞个对象,键名是对入参处理过后的字符串。
  4. 手撕代码,写一个输入N,返回0到N-1的乱序数组,要完全乱序。写了shuffle洗牌算法。问复杂度?O(n)的。不能用sort(()=>Math.random()-0.5),因为V8实现sort在10元素以内用快排,10个以上用快排,所以不是完全乱序
  5. 手写深拷贝,只有基础类型、对象和数组。写了个递归版。为什么用map存对象引用?防止引用指向和原始对象不同。for of可以对哪些对象使用?有迭代器的,即有[Symbol.Iterator]属性的。迭代版讲一下思路?将了类似树的层序遍历执行过程那样拷贝。还有啥方式?JSON.parse(JSON.stringify(obj))
  6. 讲一下JSX?简化写React.createElement的过程,会经过babel编译。讲一下React.createElement的三个参数?type,props,children。讲一下第一个参数的类型?小写就是字符串那类型,大写就是引用类型
  7. 讲一下React事件?讲了React事件触发流程及实现一套事件机制的好处。有因为React事件遇到相关bug吗?父组件原生事件,子组件React事件时,父组件事件触发比子组件早,这也是React事件机制导致的。怎么解决?用React.createPortal把子组件挂载到父组件平级位置,这样子组件原生事件不会冒到父组件,但是子组件React事件正常冒到父组件。React17把挂载事件对象由document改成了root element,讲一下为何要这样做?我猜测应该是现在流行微服务之类的,多个React项目时都挂载到document会导致事件冲突,挂载到自己根节点就不会。

二面(50min)

  1. 讲一下项目渲染优化怎么做?从网络、js执行、结点渲染3个方面讲了。
  2. 大数据量存在前端刷新从内存中读,如果后台数据发生变化怎么办?弄个websocket在数据发生变化时通知前端重新获取。还有更好的方法吗?暂时没想到
  3. 项目中一个渲染耗时我觉得还有优化空间,如果让你继续优化,你会从哪方面入手?做需求的时候产品和客户都觉得渲染速度满意了所以没进一步优化,可能会看源码看哪里耗时多。
  4. V8引擎怎么执行js的?说了词法分析、语法分析、生成抽象语法树、解释生成执行字节码、热点代码编译成机器码等,字节码节省内存之类的。V8执行过程中有什么优化?变量提升之类的。面试官说V8会根据CPU之类的资源做特定优化,把变量放到最优位置,这也是即时编译的好处。
  5. 问项目亮点
  6. 大文件分片上传原理?用File.prototype.slice。web worker和主线程传递的类型?序列化成字符串传递,项目中传递文件blob类型通过线程间加锁共享数据的方式避免大数据的复制。
  7. 在线协作场景题,如何解决冲突?没了解过这种场景,答得很不好
  8. 算法题:股票买卖一次

三面(55min)

  1. 算法题:接雨水。思路对了,边界老是出问题,在面试官提示下做出来了。
  2. 看你引入了eslint代码检测,原理是?对代码生成抽象语法树,进行语法检测。抽象语法树还有别的地方用到过吗?Babel里会对编写的高版本JS代码或者TS代码进行转译,生成低版本的js代码,才能在浏览器上运行
  3. 项目难点亮点?讲了大文件分片上传,计算MD5交给web worker避免长时间占用JS线程造成卡顿。资源分片下载了解过吗?通过Range或者If-Range两个http请求头。状态码是?If-Range如果标识没过期的话返回206和对应字节范围内容,否则返回200及所有数据
  4. 平时怎么学习?根据业务学习,平时逛掘进、知乎、medium等
  5. 最近看的东西?单页多个svg在http1.1下会闪动,打成雪碧图并且把引入雪碧图的代码单独拆包。
  6. 最近为啥看机会?工作内容比较简单且想换方向
  7. 为什么毕业没进大厂?大学贪玩,没好好学习所以没面过
  8. 有什么想展示自己的部分吗?做过一个项目前端负责人,独立负责前端项目选型及项目0-1的项目的声明周期。
  9. 讲一下项目的技术选型?其实就React全家桶
  10. 如何给同事分配工作?

四面(55min)

  1. 疯狂扣项目细节,把简历上的问了个遍
  2. 内存泄漏问题怎么定位?通过performance面板和memory面板定位
  3. 讲一下简历上gitlab-CICD优化?讲了如何将前端项目接入gitlab-CICD及流水线优化,并且接入公司的容器管理平台
  4. 讲一下网络、渲染和JS执行优化?大数据量有没有考虑过分批渲染?比如放在web-worker里处理完再交给主线程?没考虑过,因为对结点分批加载会闪动,和需求里一致性展示要求不匹配。
  5. 讲一下https握手,css及csrf的原理和防范
  6. 对在线文档的了解?刚好前面被问过解决冲突的场景,被难倒了,所以面完有了解过,就讲了几种解决冲突的diff算法
  7. 最近在学什么?

五面(60min)

  1. 聊项目业务
  2. 手写简历上一个模块的设计过程,敲到一半面试官说大概了解了。
  3. 手撕代码:
['a','b','c','aaa','a','c','aaa','aaa'],将数组中出现的次数加在对应字符的后面,出现一次的不用变
输出['a1','b','c1','aaa1','a2','c2','aaa2','aaa3']
然后写了个时间复杂度和空间复杂度都是O(n)的
  1. 讲一下虚拟列表原理
  2. 了解React新特性吗?讲了concurrentMode。那讲一下React-fiber如何实现concurrent?讲了以链表结点为执行单位可中断配合requestIdleCallback和浏览器交换执行权。
  3. 场景题,在应用A中进行微信扫码登录,讲一下A页面、A服务器、微信APP、微信服务器的交互过程。
  4. 最近学了啥?
  5. 在当前团队的作用,如何和团队一起进步?

虾皮

一面(55min)

  1. 看题说输出,任务队列相关的
  2. 看题说输出,var变量声明相关的
  3. 手写一个数组扁平化函数,写了递归和非递归版
  4. 如何改变this指向?call、apply、bind。那手写一个bind吧
  5. hook为什么不能放在条件判断里?因为hook是链表实现的,调用hook的时候移动链表到下一个节点取值。
  6. 将一下React-Fiber
  7. 讲一下受控组件和非受控组件
  8. 讲一下useCallback和useMemo,用useMemo可以实现useCallback吗?可以,返回函数就行
  9. 讲一下useEffect,useEffect知道自己是初次挂载吗?不知道,我一般用useRef存个值判断。
  10. 手写promise并发一次只能三个请求,尽可能快执行,返回一个promise,包含返回结果:
//arr是返回promise的函数组成的数组
function promiseAllCtrl(arr, limit=3) {
  let result = [];
  let running = [];
  let index = 0;
  function run() {
    if (index >= arr.length) {
      return Promise.resolve();
    }
    let p = arr[index++]();
    running.push(p);
    result.push(p);
    p.then(() => {
      running.splice(running.indexOf(p), 1);
    });
    if (running.length >= limit) {
      return Promise.race(running).then(run);
    } else {
      return Promise.resolve().then(run);
    }
  }
  return run().then(() => Promise.all(result));
}

二面(30min)

  1. 项目中遇到最难的事及如何解决
  2. 为啥用redux-sga?和redux-thunk之类的比起来对流程控制颗粒度较细,且编写起来以同步方式编写。redux-saga缺点?generator返回值是any,和ts结合不好
  3. redux有啥替换方案?useReducer用得好也差不多
  4. 如果让你重构你还会用Redux吗?我说暂时不考虑换redux,首先是同事们都习惯了,其实是redux开发工具调试比较舒服,redux-devtool好用。
  5. 平时怎么定位性能问题?通过react-devtool看组件渲染频率,及浏览器performance面板看渲染过程细节和memory面板看内存情况
  6. 如何定位白屏久的问题?看网络面板和performance面板,白屏久要么请求阻塞,要么同步代码阻塞,也可能是首屏js过大,可以通过webpack-bundle-analyze看分包情况,尽可能减少首屏加载js大小和数量,对组件懒加载,对大的第三方库单独拆包,以及用得少的库触发时再动态import
  7. 平时怎么学习的?
  8. 为啥想看新机会?

面后感

面试真的好累,面了差不多一个月左右,每天晚上面,或者有时候面试官晚上没空安排到白天就请假面。本来很向往腾讯和阿里的,结果好像运气不好在二面都遇到了不太友好的面试官,除了这两个面试官其他面试官都挺好的哈哈哈哈。

最后拿了字节和虾皮的offer,权衡之下决定去字节了。

建议

相信有很多人和我一样,毕业没进大厂,然后工作做的项目比较简单,没啥亮点的。这种情况下就需要自己对业务熟悉、对项目总结、主动做一些性能优化、以及知道如何定位问题并发现问题,以及如何对项目提效之类的。并且保持学习提升自己,做到给出场景就能想到最优解决方案。

还有就是基础,这是最重要的,看上面问题中会发现很多重复的问题,都是需要深入理解的,而不是背出来的,这样无论以什么方式问你,你都能答出来。网络和JS不用说必须牢牢掌握,比如我开发中都是使用React,那么不说深入看源码,起码对React的执行流程及实现原理要有一个大体的认识。

算法题的话把剑指offer和leetcode top200过一遍就够了,其实已经溢出了,因为不会问那么难,只是想考察你的解题思路,编码方式而已。

祝大家都能拿到心仪的offer~