阅读 809

11月社招前端面经分享【字节跳动、富途、有赞等】

背景

本人4年多前端工作经验。从今年4月份开始准备面试,准备了7个月,就为了实现大厂目标,从进入11月开始就给自己定下目标:开始面试,冲击大厂! 从11月2号开始面试,记录我的面试过程,并定下最终目标:字节跳动、腾讯。前期打算先面其他公司热热身,热身完毕了开始冲击。

2020-11-09更新:

由于面试太频繁,没啥时间复盘和总结,而且全部面试只挂了珍爱网,基础大体是没啥问题的,于是决定推掉所有面试,专心复盘一周,然后开始面试字节跳动。

2020-11-26更新

终于收到了字节跳动的正式offer!从13号开始第一轮面试到正式收到offer刚好13天的时间,这13天也是煎熬的13天,回顾自己这7个月的学习,感觉到真的是一分耕耘一分收获,在学习过程中学到很多很深入的知识,虽然在面试中不一定有机会让你说出来,但是也算是加深了自己对于某些知识点的理解,以前的我准备面试都是只刷面试题。


谈谈学习方法

由于在很久之前曾经面过两次腾讯,一次是刚工作一年的时候,第二次是工作两年多的时候,两次都被虐的很惨,是问啥啥不会的那种,因为那时候也不知道怎么准备面试和怎么学习,只知道埋头背知识点。

吸取的之前失败的教训,在4月份的时候就开始着手准备学习的事情,首先是询问了一下在腾讯工作的前同事该准备哪些,在这我是十分感谢他,他是我刚进现在公司时候的导师,不过他后来去腾讯了。他告诉我网络和JavaScript要重点学习,其次是Vue或者React要深入了解,最后Node也要有一定了解,例如深入理解其中几个核心模块。

然后我开始列出学习计划:以一个月为周期,一个周期内只学习一个知识,例如一个月只学网络,下个月只学js。最后我的排序是:网络、JavaScript、浏览器、Vue、webpack、Node、刷面经和面试题

后来我发现网络和浏览器连在一起学习效果会更好,可是那时候我已经在学习Vue了,就只能把这个经验分享给别人。

谈谈面试答题技巧

我觉得在面试准备的时候要多练话术,特别是对于一些常考的问题一定要精练话术,并且要足够深入。例如事件循环,我在面试的时候会按照这些关键点回答:宏任务和微任务、浏览器事件循环、Node事件循环、Chrome最新架构如何实现事件循环、Vue的nextTick原理。再例如问作用域链,我会回答这些关键点:作用域链是什么、静态作用域、ECMAScript最新规范中怎么描述的、引出闭包的实现。

对于项目描述,我认为一定要对项目非常 非常 非常熟悉,这里的熟悉是指:项目整体框架的实现、运用的技术的原理、细节的实现、可优化的点、怎么优化、优化方案能想到的细节处理等等。对于性能优化一定要有自己的理解和一定的深入,最好自己做点项目实践一下,demo类型的项目也可以,因为问的实在是太频繁了,而且还会深挖。


以下是我的面试记录,有些有答案有些没答案,有答案的题目是面试后总结的,不代表面试时回答的答案。

珍爱网(小程序开发)

一面,现场面(挂)

1. vue-router两种模式的优缺点

hash模式: hash是利用修改url中#后面内容触发无刷新页面更新url,一般配合onhashchange。hash的修改不会触发页面重新请求,更改后页面还是url还是本身。兼容性好 history模式:利用html5提供的history.pushstate和history.replacestate进行url的更改,路由更改后会触发页面重新请求,更改后的url会发送到后端。兼容性没hash,而且需要服务端支持。

2. seo怎么做

没做过……强行回答,应该直接说没做过不太了解

3. ssr原理

把在客户端渲染dom的任务放到服务端,让服务端构造出最终的html代码并返回给前端

4. computed和watch的区别

computed是计算属性,一般用于计算复杂的逻辑并将结果保存在computed中。 watch是监听某个data的变化,并执行回调函数。 在原理的实现上,vue初始化时会为computed创建一个watcher实例和dep实例,当template引用到该计算属性时会触发该计算属性的依赖收集以及计算该计算属性的结果。在计算结果的过程中computed作为active watcher又会被其依赖的data属性所收集。当data更新时,会触发其收集的computed watcher重新计算,当计算结果发生改变时才会触发computed收集的渲染watcher重新渲染。 watch内部会调用$watch方法,同样创建了一个watcher,并通过直接访问监听的data的方式触发data的依赖收集,因此data的改变会执行对应的回调。

5. 举几个webpack的钩子并说明其意义

entryoption 初始化entry后触发 afterplugin初始化插件后触发 beforeRun run方法调用前 compilation compilation实例创建后

总结

他们是做H5和小程序的,一直都是问我以前公司的经历,但我在目前公司没做过移动端,以前做移动端的经验都忘记的差不多了,大概是不太对口。有些问题之前没怎么准备过,例如seo、移动端的问题等等,因此这次面试体验也不是很好。

富途(基础架构web前端开发工程师)

一面,视频面(已通过)

1. 自我介绍

2. 有没有做过组件或者脚手架的开发

3. 讲下你的脚手架是怎么做的

4. 讲下你对组件库做过什么优化和开发

5. 你的组件具体怎么实现的

6. 你认为node适合用来做什么

7. 有没有做过node服务端开发

8. 讲下你是怎么做webpack优化的

9. 讲下你开发的插件

10. 你是怎么做首页性能优化的

11. 用户反馈页面很慢,你是怎么分析原因的

12. 说一下http缓存

13. Vue2如何做数组的监听

14. Vue3如何做数组的监听

15. JavaScript有什么方法判断变量是否为数组

16. web安全问题以及防范你知道多少,越多越好

17. 怎么验证CA证书

18. 有什么方法根据浏览器的兼容情况返回webp格式图片或者其他格式图片

总结

偏向组件库和脚手架等等的开发,所以问了很多相关的项目,主要围绕我的项目展开的。其余的基础问题不算难,基础问题尽量回答好,能拓展的拓展,能深入的深入。

二面,现场面(通过)

1. 逻辑题,有十个药瓶,每瓶有100个药片,其中9瓶一颗药10克,另外一瓶一颗药9克,怎么称一次可以确定哪瓶比较轻

2. 计算个人所得税,补充代码

3. 有两个桶,一个桶蓝色颜料,一个桶红色颜料。第一次从蓝色桶中兜一杯倒到红色桶中,第二次再从红色桶中兜一杯倒到蓝色桶中,A为红桶中红色颜料和蓝色颜料的比例,B为蓝桶中蓝色颜料和红色颜料的比例,问AB谁大

4. 算法题,给一个乱序的数组,请你找出符合比它前面的元素都大,比它后面的元素都小的元素,并返回它的下标,找不到返回-1,要求时间复杂度和空间复杂度都是O(n)

5. 设计一个抽奖接口的接口文档

6. 前端域名和实际页面内图片的域名不一样,是基于什么考虑

7. 讲一下你知道的设计模式和应用场景

8. 怎么做前端错误监控

总结

面试过程中有点怀疑人生,题目没见过,虽然看面经的时候略有耳闻,但是没有实际写过,编程题中除了第二题和第四题答对了,其他都回答的一般般,感觉凉凉。。。最后竟然过了,有点神奇,等3面吧。。

vivo(web前端开发,组长岗位)

一面,视频面(已通过)

1. 怎么分配工作

2. 怎么评估工作量

接下来问了一堆管理问题......

......

3. 讲下闭包及其用途

4. 讲下原型链

5. Webpack的构建流程

6. webpack中hash的种类及作用

7. 说下组件上的v-model

8. vue组件之间的传值

9. Vue.mixin的原理

10. vue-router的钩子以及用法

11. v-if和v-show有什么区别

12. v-if会不会触发组件重新创建

13. 你们公司的组件库的架构是怎样的

14. 给你一个空的项目,怎么设计它的架构

15. 介绍下你开发的组件

16. 怎么做的webpack优化

17. 介绍下你开发的插件

18. 有开发过loader么

总结

一开始问我管理问题,有点慌神,因为之前没准备过,而且我以为我投的是基础开发的岗位,谁知道竟然是组长的岗位。不过面试官主要是围绕我的项目展开提问,我认真准备过项目的描述,所以比较顺利。基础问题也不算很难,也是那个套路:尽量回答好。

二面 (通过)

几乎全部都是围绕项目提问

总结

有工作经验的同学项目一定要好好准备

美的(前端工程师)

一面,电话面(待通知)

1. 一堆项目问题.....

2. webpack构建流程

3. 说一下设计模式

4. 说一下对https的理解

5. 怎么验证ca证书

6. Koa和Express的区别

7. 讲一下快排的思路

8. 讲一下怎么实现一个Promise

9. 你的插件和脚手架有没有发布到npm

总结

其实面试题目不止这么少,问了大量的项目问题,也是围绕项目展开。之前努力准备的基础题有点没发挥上,扎心。基础题也很简单。

有赞(web前端开发工程师)

一面,电话面(已通过)

1. webpack构建流程

2. 讲一下Tapable的原理和理解

3. loader和plugin的区别

4. 事件循环

总结

只问了4个问题,现场约二面了。。这有点出乎我意料,在面试前我还特地看了掘金关于有赞的面经,都有很多基础题,不过可能是因为回答的比较全面和深入吧。

平安

一面,电话面

1. 自我介绍

2. 介绍项目

3. 针对项目展开提问

4. 说一下this

5. 说一下原型链

6. 说一下闭包

总结

感觉自己项目讲太多了。。。基础问题没时间问了,就问了3个。。。

字节跳动

一面(视频面,通过)

1. vue怎么实现数据劫持

可以从new Vue()开始描述,描述new Vue()的过程,然后再说Vue2的observe方法怎么劫持数据,例如defineReactive方法内部调用Object.defineProperty劫持每个属性的get和set,同时还实例化dep对象负责收集依赖和派发更新。(最好再说一下Vue3劫持数据的过程,越详细越好)

2. Vue怎么监听数组变化

3. 宏任务和微任务

4. document.ready和window.onload区别

5. script 的async 和defer区别

6. __proto__和prototype区别

7. 实现一个instanceof

8. data有a b c三个属性,如果在created阶段调用api设置this.d,页面上会不会显示d。如果要显示d有什么方法

9. 移动端怎么做适配、有没有用过媒体查询

10. 怎么实现nodejs的热更新(拓展题)

11. 看代码说结果

window.name = 'ByteDance';
function A () {
  this.name = 123;
}
A.prototype.getA = function () {
  console.log(this)
  return this.name + 1
}
let a = new A()
let funcA = a.getA
funcA()
复制代码

12. Leetcode leetcode-cn.com/problems/va…

总结

一面题目不是很难,都比较基础,算法题也是LeetCode原题,就是面试前比较紧张。

二面(视频面,通过)

1. 讲下你做过你觉得有意思的项目

2. 根据项目提问

3. 讲下webpack构建流程

4. 讲下webpack钩子

5. 讲下vue指令怎么编译,如v if v show等等

6. 讲下ast

7. 有没有基于ast做过什么事情

8. 讲一下vue loader的原理

9. 讲下前端网络安全相关的认识,怎么防范

10. 有没有业务相关的项目,讲一下

11. 看代码说结果

function hello() {
  console.log(name)
  console.log(age)
  var name = 'lisan'
  let age = 18
}
hello()
复制代码

12. 算法题(二叉树相关,LeetCode无原题)

总结

围绕webpack问了蛮多问题,主要是我简历上写了了解webpack的原理,然后vue相关的问题也问了蛮多,还有就是项目相关的问题,项目和基础并重的一次面试。

三面(视频面,通过)

1. 讲下你做过的性能优化的项目

往我说的项目的细节提问还有深度提问,中间夹带一些基础知识的问题...

2. 讲下你的脚手架

继续往细往深提问,也会夹带基础知识...

3. 平时你是怎么学习的

4. 你有什么问题要问我

5. 算法题:无

总结

三面无算法题,而且基本都是先问你的项目,然后在你描述的基础上问一些细节还有一些原理的问题,不时还会穿插一些基础问题,同时也是我这么多次面试中最难的一次面试,面试完我以为已经挂了,没想到竟然过了。

最后

最后拿到了字节跳动的offer,其他就拿了一家vivo的offer,主要是因为其他公司的面试都推掉了,连腾讯的都推掉了。。。就只对准字节的面试,后来发现谈薪的时候太亏了,多那几家的offer,薪资才有可能谈的更高,不过最后也是很满意,希望同学们加油咯。

文章分类
阅读
文章标签