前情可以浏览《面试第二家公司》这篇日记,这篇文章只做技术相关的面筋记录吧。

问答内容

大概讲讲你项目用的技术栈

👦🏻:脚手架 Vite、组件库 Antd、图表 G2Plot、状态管理 Mobx 和 Redux

你上家用的是 Vue 2 全家桶是吧,那 Vue 3 你了解过吗,他们之间有什么区别

👦🏻:了解过但还没实际用过,可以考虑自学。区别主要是模板编写方面不一样(❌ 其实应该扯扯性能方面有提升

你觉得 Vue 3 和 React 有啥相似的地方?

👦🏻:模板语法方面有些更贴切了,Vue 3 也可以用 JSX 语法来写了(❌ 也许应该回答别的

Vue 和 React 你实际使用中感觉有什么差别

👦🏻:我现在肯定是写 React,毕竟项目经验更多(❌ 回答的不算太吻合,其实可以说说 React SetState 和 Vue 直接修改对象值这个问题

像 React 你有使用过别人的类似 CRA 这样的脚手架吗

👦🏻:我一开始就是用这个学习的,后面就改成了 Vite 自己搭的,自己组装路由、状态管理、接口请求一类的

React 你常用的是 Antd 是吧

👦🏻:其他组件库调研过,感觉还是 Antd 的业务场景涵盖最好

你使用哪个状态管理,为什么要使用状态管理,它解决了什么问题

👦🏻:目前个人偏向使用 Mobx,简单的会用 useReducer。跨组件穿参,复杂数据状态调整(未答出),以及类全局的用户登录状态一类的数据托管

React 16 开始才会有 Hooks 的哈,你觉得 Hooks 解决了什么问题

👦🏻:主要是多个组件相同业务逻辑的提取,减少重复代码的编写

如果不用 Hooks 的话你会怎么处理呢

👦🏻:class 写法的话那就可能会有些重复了,我现在都会偏向于用 Hooks 写(❌ 其实算没答出来,正确回答应该是 HOC 高阶组件,多个组件包装一个这个

TS 看你会写,那 TS 和 JS 有什么区别?

👦🏻:我也是在公司写的第一个项目开始用的 TS,入坑之后一发不可收拾,TS 主要还是类型检查为主(代入了我之前 博文 提到的组件参数混乱,用途不明的问题

ES6 有哪些新的语法特性有了解吗?

👦🏻:也就是给对象扩展了一些语法糖方法像 map reducer 那些吧,还是有了解的,总比用 for while 要好吧(其实还可以补充下 Promise、Async)

let、var 和 const 的区别有哪些?

👦🏻:const 的话就是不可修改(对象还可以)letvar 涉及到变量提升的问题,当然大多数都是用 letconst 写的。

变量提升你能举个例子?

👦🏻:写函数的时候一般情况都会把声明放在最前面,如果是 var 的话就会有提升,用 let 的话就必须先定义再使用(其实还可以说 var 的话允许声明多次,就难以发现可能存在的问题

Promise 你怎么使用的?

👦🏻:主要是解决异步场景为主,例如可以实现多张图片按顺序依次上传

await 出现异常你会怎么处理?

❌ 没答好,其实就是 trycatch,但自认为这种形式没有用 Promise 的 catch 更优雅一些

你写过原生 JS 吧,原生的构造函数这些怎么写的?

👦🏻:ES5 的话就是一个函数然后 new XXXX 这样子,方法的话里面写 this.XXXX
🧔🏻:可能你们新的是那样写,新的还有 constructor 这样子,我们以前老一点的还有用 prototype
👦🏻:对的,这个是 ES6 的,prototype 就是原型链的一种写法

那原型链又是什么东西呢?

👦🏻:简单点其实就是对象基于什么东西构造的

JS 函数你怎么传参的,按值还是引用(其实没听懂,问的应该是指基本对象和引用对象

👦🏻:看你传了什么,如果是基本对象 string number 什么的就是它本身,如果是数组对象那就是个引用
🧔🏻:这只是你表面上看着这样子嘛,那你传参就是复制的,就是按值传递啊,复杂的就是传递的它的引用地址
👦🏻:对的,如果是完整复制一个的话,那就只能深拷贝一个了呀

那深拷贝浅拷贝区别是什么

👦🏻:最简单的办法就是 ... 扩展运算符这种,也就是对象最基本的复制,如果里面还有子对象的话就还是没复制出来(❌ 其实可以扯需要递归
🧔🏻:三个点那个是类似 Object.assign 这种吧
👦🏻:那个是浅拷贝吧
🧔🏻:那我也不记得了,很久没写了,但我知道有这样一个东西

你 CSS 写的多吗

👦🏻:我一开始其实就是 CSS 写的最多,写了很多静态页面,但是发现并没有什么用,公司还是对 JS 这块要求更多,写业务逻辑什么的
🧔🏻:我面过很多都是只会用框架,一些样式写的很少,组件那些基本都是用 Antd 这些样式这些
👦🏻:对,但有时候可能会遇到些很奇怪的问题,我在上家发现 Antd 日期的移动端上有问题把页面撑开了,这种情况就得魔改下样式让它换行

我看你提到了 Float、Flex、Grid 这些布局,讲讲它们之间的区别?

👦🏻:Float 历史最悠久,但其实是围绕文章排版设计的,感觉是比较 Hack 的方式用来布局了,它的话有个致命问题就是高度没法统一控制,可能会有错乱和塌陷的情况
👦🏻:Flex 相较于 Float 更灵活,是按行的方式设计的,可以随便让子元素上下左右对齐,更自由,写个 100% 的高就能让每个块都一样高度更美观

HTTP 请求你有了解么,包括一些常用的请求头?

👦🏻:请求头的话主要还是 CORS 跨域这个场景用的多吧,客户端和服务端都要有个约定,不然会被阻止,解决办法一个是反向代理,或者服务端设置具体域名或 *
🧔🏻:跨域你们很常见吗
👦🏻:我公司项目有两种,一个是前后端 2 个域名,这种就会跨域,还有一种就是 Nginx 反代前后端就没有了
🧔🏻:那你这样配置不就好了
👦🏻:那后端有些可能不太乐意啊,那我就只能看别人心情了

那还有其他你常用的请求头?

👦🏻:那就是 Token 或者缓存控制这些了

缓存控制方式有多少种?

👦🏻:我自己比较熟悉的有 ExpireCache-Control 两种,但现在貌似都是 Cache-Control 更多一些
🧔🏻:一个是强制缓存,一个是协商缓存,强制缓存有个固定的时间,协商缓存就是后端返回给前端进行约定和协商

那你对页面优化方面还有哪些建议?

👦🏻:就我个人经验的话,其实也就是图片一类的资源占比较大,图片这块不考虑兼容性就用 webp,兼容性高的话就自己选择 jpg pnggif 比较差,用视频做替代。然后用压缩工具提高压缩比,降低分辨率就行。除此之外的话工程化项目里面就还是代码分割,动态加载这样子。页面多的情况下分割出来,按需加载。不分割的话首屏会比较久,打包的文件也大。

一些补充

感谢 @Mather 提出的,对以上面试内容的一些补充:

  • 关于 ES6 有什么新的内容,面试官可能想问你,关于 JS 语言的规范和新语法
  • Promise 那题,确实是可以说用来解决异步问题,但其实是问你懂不懂函数回调 Callback 的坑(就是回调陷阱,改善这种反复嵌套的代码写法,这点确实没答出来有点可惜)
  • jQuery 有个叫 Deferred Object 的实现,就是早期解决这种问题的一种(涨姿势了,没听过的 API)
  • 下次聊到 Promise,可以顺着 Callback 函数是什么,JQ 里头的实现。甚至 NodeJS 在服务端使用异步的编程方式,这几种说法去聊
  • 有异步那么又会有同步 await,大概率会让你举例子,实现一个 await sleep(3000) 这种就基本 OK(其实就 Promise 里面一个 setTimeout
  • 如果要求手写代码,可能会出冒泡一类的题,八股文会几条总会更吃香的
  • 接下来还可能会有业务的考察,就算答对了所有,也未见得其他能力有多好
  • 我最近总结出来的,还是个人的项目、时间管理能力、沟通能力是最重要的,技术可以用时间来弥补,但管理和沟通能力,决定了你在团队中能发挥多少效益(是产品经理的感觉,膜拜大佬)

总结

经过两场实际面试后,感觉网上虚拟面试的水平都略微超标了,没问的这么复杂。甚至还会要求你手写代码的,就更是苛刻了。不过很常见的是手写一个冒泡排序一类的,这也是我需要好好熟悉的地方。

经过了这两次面试,我感觉不仅仅是技术水平能力的考察,更是对自己平时积累的一种验证,以及表达能力的体现,这些都是至关重要的,还好我整体情况良好,没有出现过度的紧张(反倒是面试前会有些压力,像此前驾考什么的一样,还是短时间内难于克服下来)

整体来看,有不少问题感觉我当时答的都不算特别好,我在整理这篇面筋的时候也有对它们重新做了些思考,如果内容有些许不足或错误的认识,也欢迎你在评论区进行更正!

面试结果

以下内容均在 7 月 8 日做补充:

这边公司暂时招到合适的人了,谢谢你的关注,后期有机会的话我们再合作 🤝

不排除是上班通勤问题或是技术面试的问题,毕竟当时面试 HR 问过我意愿,而我给的回答是“五五开”。

也不排除是公司反向面试,了解目前就业市场行情什么的。(不过能和我聊上一小时,也不太应该吧)