普通面经(上)

12,701 阅读12分钟

闲聊

先介绍一下背景和闲聊一下,base重庆,非大厂(能力不够)面试,决定跑路了,这两个星期一直在面试,大概面了10几家,也不准备面了。

还是那句话,你爱看看不看算了,大家都是做技术的,你对我撒气不如去怼那些培训班是吧,提高面试门槛又不是我造成的。况且面经是为了帮助大家,你觉得你不会就自己去学去看去卷,哪来这么多抱怨,大不了转行是把,前端已死真是太好了,这样不就提高门槛,重新洗牌,慎重入行了嘛(呜!竞争少了真是开心)。

开始

这里的话,就不写公司名字,就直接以序号代替了,就挑5个写把,多的都是重复问题了,保护隐私嘛,我也害怕啊。

然后的话,其实我的项目面对大家没啥参考意义,都是一些类似于编译时插件开发、优化,脚手架,业务难点,组件库,sdk之类的东西。因为项目面真的太灵活了没撤,真得自己做,不然深挖一碰就碎

就其实面试现在问得比较多的是项目,大家自己的项目就把项目每个细节搞清楚,包括:市面方案的横向比较(其实这里很关键的,就是比如在你的视野里组件库无非就是把组件打个包在项目里用,但如果你可能去了解一些社区优秀方案,有很多技术实现可以问的,menorepo,pnpm,handless,版本管理,适配,无障碍,ide,测试等,还有一些开放性问题就像组件库臃肿,迭代频率高,多实例之类的,样式系统,dts。),标准(这个也挺多的,多扩宽下视野把),项目细节(怎么去实现一个具体的地方,然后不断的挖),可以大概想一想面试官会问什么准备一下。

一面

这家是那种模式,一面同事面,二面是外协面(就是那种职业面试)就不会说问得过于深。

1、工程化的目录划分?

“(啊?工程化还有目录划分吗...)您是指的脚手架生成的目录还是什么?”

就比如像项目里src这些。

“(我竟然第一个想到的竟然是Menorepo项目,这该咋说啊),我的话对于我们一个正常的单包项目来说,src下有router、views...emmm我感觉其实把就是一个每个目录做每个目录该做的事情,比如view下面是页面,每个页面下包含路由、hooks、数据源处理大概就是分为逻辑、样式、数据源、类型(其实我当时很蒙蔽,我不清楚面试官想问什么)”

2、create-react-app使用过吗?

“使用过,但是很久没用了,感觉它有点古老不是很好用”

那你说说他有哪些弊端

回答得不是很好,当时直接说的它慢,用的是create-umi

引用一下群友的答案:

只适用于单一项目开发,不利于团队开发,过于轻量级,能做的抽象和封装非常有限,也不支持一些流行的工具。

3、讲一下react的虚拟dom?

“其实现在很多框架都有虚拟dom了,他只是一个描述dom结构的对象,真实DOM身上挂载的属性和方法非常多,使用虚拟DOM的方式去描述DOM节点树会显得更轻便,网上说什么代价昂贵其实感觉并不那么正确,你像svelte不也一样直接操纵吗还更快,他对于react来说更像是提供了中间的缓冲数据层便于diff和做一些处理,同理fiber-dom也是。”

3-1、追问fiber?

“它的诞生原因 本质是因为在视图更新时,双缓存的树的机制,内存树太大了,diff时间太长,长期占用了主线程计算导致渲染线程无法去更新,交互无法响应。”

“它的解决方案的话,那就让diff去小段比较和打断,也就是时间分片和可打断机制。”

“对于怎么解决的,是记录了父子兄弟,打断后恢复未处理,引入调度时间分片等”

3-2、追问react内部如何管理任务?

我当时从入口讲到commit一大堆,然后.....

最小二叉堆

4、你如何做一个项目的架构?

“说了一大堆从产品到部署。但很显然我没说到点子上。”

引用一下面试后群友的回答:

群友1: 所为的架构师,说白了就是对技术栈的深度和广度都要有涉及,让后根据不同业务需求结合自己的技能储备找到一条最优的解决方案。

群友2: 给出抽象的设计方案,形如使用什么设计模式,整体系统大致走向流程,划分模块降低系统内部各功能耦合。

群友三: 架构从字面意思看就是给项目搭个架子,建个流程, 软件工程嘛,工程肯定要有模型啦 架构就是决策这个模型是什么样的,并且使其契合团队

我: 降低复杂度。

5、你的xxx项目在做什么?

就随便说了一下做了啥事,解决了啥问题,做了哪些优化,有啥难点,然后就是讨论环节。

二面

1、介绍你的项目、背景、技术栈。

略过。

2、HOC的几种模式?

说了一下强化props,渲染控制,增加生命周期,继承,代理,转发之类的,但说得很乱,就不丢人了,掘金有文章总结。

2-1、追问业务场景如何使用?

“如果是一些通用组件我可能forwardRef会用得多一点。

这样把,比如我想让一个非路由组件,也能通过props里的路由实现功能,但我觉得这时候如何一层层绑定props会很恶心,我就可以通过HOC把,把上下文中的路由对象混入Props中,其实也就是withRouter

本质上其实Hoc就是解决一个代码复用、逻辑复用的问题,可能我对他是属于什么模式有时候没有一个清晰的概念,但用的时候自然就用到了。”

3、hooks的出现解决了什么?

"在hooks出现之前,虽然react保持一个数据的不可变性,但在class里this是可变的,所以它解决了this指向问题,过于多的生命周期,为函数式组件提供状态。其实我感觉就是放弃面对对象拥抱函数式编程(其实这里我很烦,因为有家面试是后端架构面,然后我们就在一直争论对于复杂的功能为什么不去用面向对象)”

3-1、追问业务场景。

"(咋说嘛,到处都是)可能业务场景里到处都是,要不您举个hook把?"

说说useMemo把

"useMemo缓存值或者复杂的计算,其实profiler会告诉你什么该扔到memo里去做,假设后端扔你10000条数据让你排序,你可以在memo中做,或者说购物车,大概就是一些计算操作把"

4、setData?

就大概讲了一下原理,同步异步,批量更新,18之后这些,确实不想敲字了,网上太多了。

5、Suspense?

“和lazy 配合,实现异步加载组件。 能暂停当前组件的渲染, 当完成某件事以后再继续渲染,解决从 react 出生到现在都存在的「异步副作用」的问题,指定一个加载的动画或者界面,给用户等待的时候显示。

5-1、追问业务场景。

“就前面说到了, 就像你React.lazy + import()这种写法动态加载,然后包在Suspense里,在fallback加上你的文字动画之类的,这样在等待的时候就可以用loading转圈圈了”

那假设是处理多个请求使用suspense那?

“您指的是串行的请求还是并行的请求?”

并行把

“(想了一下,应该说的那种suspose嵌套的把)就是假设A、B请求是并行的,而在我的JSX中,外面的suspose对应的是A,里面的suspose对应的是B,B会等到A返回后显示,而A如果先返回就先显示,等B返回后显示

6、双向绑定原理(Vue)

问烂拉,我本来是想从响应式和源码说起的,然后面试官及时阻止了我,我就说了一下对于不同的情况绑定值和事件的不同。

7、computed、watch的使用场景?

又是经典的我想炫技,然后面试官阻止了我(可能是时间快到了),然后我说了一下购物车,算金额computed之类,watch监听路由。

行,今天的面试就到这里。

1、事件模型?

"事件模型是一种用于处理与用户交互的模型,包括捕获、冒泡等。用户操作(如鼠标点击,键盘输入)发生时,将触发浏览器事件,JavaScript可以捕获这些事件,并执行相应的代码。

JavaScript事件模型中包括三个阶段:捕获、目标、冒泡。捕获阶段从顶级元素开始,并逐级移动到目标元素,冒泡阶段则相反,从目标元素一直冒泡到顶级元素。在捕获和冒泡阶段,事件处理函数将自动执行,以响应用户操作。

而dom所有的事件操作,都在eventTarger这个接口里(提供者),主要提供addEventListener, removeEventListener, dispatchEvent三个实例方法。分别做xxxx"

1-1、追问dispatchEvent的自定义事件?

"dispatchEvent的第一个参数是Event实例嘛,我们可以通过new Event去自定义事件,返回一个True、false"

那你实际运用过他吗?

em没有,但应该在阻止默认事件的时候可以用上,因为它的返回值是根这有关系。

1-2、追问自定义事件?

就接受2个参数,一个事件名称,一个配置项,但可能平时用得比较少,对配置项不是很了解。

1-3、追问为什么React要劫持事件,和怎么去做的?

回答得不好,我就说一下为了磨平各端差异,然后说了一大堆源码东西,但面试官说不是想听这个。

引用下群友回答:

React 通过 SyntheticEvent 和事件处理程序来劫持事件。当用户触发 DOM 上的某个事件时,React 将在处理程序之前先捕获这个事件,然后将其封装在一个 SyntheticEvent 对象中,并将其传递给处理程序进行处理。SyntheticEvent 对象拥有和原生 Event 对象一样的 API,但它具有跨浏览器的兼容性,以防止不同浏览器之间出现差异。

1-4、追问如果是你如何处理浏览器事件兼容?

"可能是我就用userAgent判断不同的浏览器。然后对类似于addEventListener做一些不同的处理,可能具体要看差异是哪个事件然后自己去改把"

1-5、追问微信小程序PC端如何处理事件兼容?

它用的是不一样内核,可能我都是具体看事件里的返回值,就像有时候PC端的微信小程序输出差异和移动端对比去做这些。

2、类型判断?

“typeof instanceof”

2-1、追问什么场景用什么?

“typeof会返回一个变量的基本类型,instanceof返回的是一个布尔值

instanceof 可以准确地判断复杂引用数据类型,但是不能正确判断基础数据类型

而typeof 也存在弊端,它虽然可以判断基础数据类型(null 除外),但是引用数据类型中,除了function 类型以外,其他的也无法判断”

2-2、追问tostring.call?

"就返回一个OBJECT xxxx类型这样,它调用的是原型上重写的方法"

2-3、追问自己怎么写一个类型判断?

“通过proto往上查找,或者就上面提到的tostring方法”

3(场景题)、如何实现一个将编辑器里的代码实时反馈到页面共享多人协作上,并渲染?

“(我直接蒙了,这是飞书的协作文档吗),我答了个热更新,然后说了下热更新原理(就挺尴尬的)”

群友1:直接把在线文档的实现发了个出来看

群友2:web编辑 -web渲染 -webSocket广播给全用户- 用户监听msg,刷新页面

4、微前端用过哪些?

single-spa,qiankun。

4-1、qiankun样式隔离?

提了一下Iframe,讲了几种沙箱模式,SnapshotsSandbox、LegacySandbox,ProxySandbox,敲字太累,掘金有文章。

4-2、qiankun样式污染?

讲了一下污染原因,和qiankun现在的隔绝方案又会造成哪些问题。

4-3、如何解决样式污染?

我感觉我当时脑子抽筋了,我当时一直回答的是改掉冲突的类名就行了,反问我如果是来自外部的样式冲突那?不知道。

你可以在打包的时候加上命名空间

结束

问题实在太多了,分成3篇写吧,我在想要不要加上项目的内容,看你们自己评论区说把,需要的话后面加上,然后大伙要一起学习加群的话可以看看沸点