作者：小零子

链接：https://www.nowcoder.com/discuss/201256

来源：牛客网

一面

一个小时20分钟（三轮技术面都是视频面试）

面试官哥哥很好

先自我介绍（个人信息加项目）

怎么看待前端这个职务

为什么会选择前端这个学习方向（巴拉巴拉 说了好多嘻嘻嘻）

平时是怎么学习前端的

Vue和jQuery的看法和区别 （我是从数据和业务分离，数据驱动视图两个角度展开讲）

讲讲Vue的插槽slot 和scope slot

Vue的双向数据绑定原理

（订阅-发布者模式，数据劫持：Object.defineProperty(), 巴拉巴拉巴拉...)

扩展：Object. defineProperty()这个方法有哪些缺点？

Vue3.0 开始不用Object.defineProperty, 用Proxy, 用代理相比起来有什么改善和优点 ）

订阅发布者模式和观察者模式的区别

this的优先级

（出了一道题 讲清楚四个绑定 及其优先级 以及为什么）

扩展到 object.create() 原理 ，讲清楚其原理，手写模拟实现它

再说到 new 的实现原理，手写模拟实现它

原型链，原型链原理，手写实现一个

闭包是什么？你怎么理解的？举个栗子

扩展：

闭包的机制是怎么实现的 我往作用域方面答

接着问 怎么实现函数内部可以访问函数外部，但是函数外部不能访问函数内部？

当时答不出，小哥哥说是关联到内部函数的VO活动对象的指向（这个不会 没怎么了解过）

（推荐了我去看汤姆大叔的博客 这里： https://www.cnblogs.com/TomXu/archive/2012/01/31/2330252.html）

计算机基础

UDP和TCP是什么？ 它们的区别

UDP在什么场景会用到？

进程和线程是什么?你是怎么理解的?

（存储资源的最小单位，程序的最小单位）

HTML

说说block元素和in-line元素？ 二者的不同点和特征有哪些?

扩展：img是行内元素吗？为什么可以设置宽高呢 （答：没了解过，估计是和img标签的src属性有关，小哥哥说的确和src属性有关，建议后续可以深入了解一下）

CSS 3

怎么实现0.5px的线 移动端

（scale方法）

scale(0.5) scale(2) scale(1) 分别是怎么样的 ，那scale(-1)呢

【scale(x) 当x为负值时，整个是颠倒过来的】

flex方法有用过吗（说有用过，就没细问了）

说一下float和position

清除浮动的多种方法

最后问了有什么需要问的吗？

我就问了公司里线上代码报错时是怎么调试的？（的确一直对这个很好奇）

我个人是试着玩了一下Fidder软件 把线上文件映射到本地文件。

还有字节跳动内部是用的什么框架

也请教了SCSS的用处

然后也聊了20多分钟（嘻嘻嘻O(∩_∩)O哈哈~）

整个过程还是挺愉快的~~

大家都加油！

二面

40多分钟

面试官说是前端架构师 可以体会的出 很神奇的是问了我专业知识（说是考虑到我还没工作，自然也考下我自己的专业知识）

栈和队列是什么？区别是什么？

大学课程有什么？（软硬件皆有：软件：C语言，数据结构与算法，安卓，基础java 硬件：通信........）

讲下模电里与门，非门，异或门的原理和实现（哈哈哈 知道我是物联网方向的电子专业，就问了下这个）

说下快速排序的思想，并手写代码

说下C语言中pointer的理解

模式设计--发布订阅模式

（本来都打算打代码了，不过只让我说清楚就好了。这里有个小插曲，一开始听错题目了，说的是创建对象的几种模式工厂模式，原型模式，构造函数模式那些 ）

对webpack的理解；webpack实现打包压缩的机理 ；（我提到了rollup.js ，这里还小小探讨了下rollup.js 和webpack 也算是被指教了webpack的重要性 ）

对称加密和非对称加密的区别

通信里模拟信号和数字信号是什么？区别？

时分多地址 & 码分多址 & 频分多址

然后聊了一大堆我学习前端的历程

还有问了下成绩 (答 班里第一第二）

最后again：你有什么想问的？

就进一步再探讨了调试代码（第一面面试官只是清点带过，让我问后面的面试官们 ）

还推荐了我学习了一些技术栈（超级好！一直聊的很愉快，还主动加了我微信~~ 超级开心的）

三面

50多分钟

二面完 对接的hr小姐姐通知我接下来有空的话 继续第三轮面试 所以又很快开始了三面了

这个面试官一上来就给人感觉就是一个项目中的带头人的那种，气势足，但是面试过程没有给我心理压迫

手写实现反向链表，给出的节点是对象

手写实现树的前序遍历 ，给出的节点是对象

写完讲解整个思路（其实我算法不太强 但是面试官完全没有催，很耐心的等我写完）

实现点击页面中连接的时候，拦截页面的跳转，出来一个弹出框，有半透明的遮罩层，水平垂直居中，思路，整个流程或代码

（只写了最主要的一部分代码而已

WD思路：

页面代理拦截；取消a链接的默认事件（跳转）；水平居中：flex三代代码即搞定；遮罩层：利用z-index; 弹出框的出现，一开始隐藏，后来点击链接即显示 ）

如果一个页面卡顿，那可能是什么原因？（典型的来了，最好是有思路的将下去）

如果想要图片懒加载，怎么实现？代码怎么写？

webpack是基于什么来工作的？（又是webpack，真的难）

怎么到接触前端的 （巴拉巴拉...）

平时怎么学习前端的 （巴拉巴拉...）

聊项目：

讲下你的这些项目，项目的分工是什么样的？你负责什么部分

你这个项目你们是怎么一个开发思想呢？ （巴拉巴拉...）

看到里面说组件化开发，那是怎么组件化的呢 为什么用组件化。(巴拉巴拉，这里说了超多，我还配上手势 想更形象说来着）

你这个项目里写到路由导航，那是怎么实现的呢？ 答vue-router 那是怎么配置的呢 (巴拉巴拉...）

整个过程也很愉快，本来面试官没笑的，后来在探讨框架的时候被我逗笑了，气氛就一直很愉快了~

（嘻嘻 我说 前面在写那个弹出框的时候我一直头脑中想的是用vue的话就超级简单啦，然后被教育了如果有一天这些框架都没法用了怎么办）

四面 HR面

半个小时

面完三面 本来紧接着是晚上要继续面的，但是通知说面试官有事情，改到第二天了

四面的时候我一直还在担心会不会继续是技术面，所以还是不敢懈怠，继续在准备。

结果视频一出来，是个可爱的小姐姐，知道是HR面了，心立即定了很多。

HR面就只问非技术的问题，你个人的各种情况啦，就是通过聊天了解下你的多方面。整个聊天很愉快结束了

总结：

我很渣的，嘻嘻 我感觉我的性格也是给我加分的一项吧

大家要加油~~ 对自己自信的同时要一直保持一颗谦虚的心一直学习。

还有，知识就怕不深入，了解很多API背后的实现原理也是很重要的呢~

我从当时的一个面试只能聊20多分钟的人，到这四次面试也是慢慢进步过来的~

觉得没什么可聊的话，多学习就是了，多看书就是了~ fighting~

与作者交流：https://www.nowcoder.com/discuss/201256

更多笔经面经：https://www.nowcoder.com/discuss?order=0&type=2