年终汇总，2023年全年面试记录（中小厂 + 国企）

2020年的年终总结，就两个字 -- 面试。先说下本人情况，base成都，2020年毕业，双非本，土建学院的，自学前端。找工作主要投的是3~5年工作经验，中高级或高级前端开发工程师。至于为啥一整年都在面试找工作，后续有时间我会写写自己的经历，以下是2023年全年我亲身经历的觉得有价值的面试记录

2023年-01-14，周六， 某科技公司，做区块链（前端react方向），线下面试

基础

1. css选择器有哪些，伪类和伪元素有哪些

2. 如何实现水平垂直居中

3. grid布局

4. 如何美化单选框样式，单选框是什么标签，可以直接修改该标签的css属性吗

5. promise原理，手写promise需要哪些步骤

6. JS事件循环系统

7. typeof判断数据类型有几种返回值，如何判断目标是否是一个error

框架

1. vue和react的区别

2. react hooks模拟class组件生命周期，react+hooks如何实现类似componentShouldUpdate的作用

TypeScript

1. TS中有哪些数据类型是JS中没有的（any, viod, never...）

2. 声明一个空数组时没有显示的定义类型，该数组是什么类型的

3. TS中有哪些常用的内置类型（readonly, require....）

4. 如何从一个类型中抽取部分属性组成一个新的类型，比如某个类型接口有name、age、id、等多个属性，现在需要从中提取出一个只有name 和 age 的类型接口，如何做（pick）

2023-02-07，某大型国企，14：00 ~ 15：00，线下

项目组一（云平台开发方向）

1. 有一个树状结构的对象，如下代码块所示，现需要将整个obj展开放到一个数组里面，手写一个函数（当时面试官拿了笔和草稿纸递过来，真就手写）

objTree :{
    name:'xxx',
    id:1,
    children:[
       {
        name:'aaa',
        id:2
       },
       {
        name:'bbb',
        id:3,
        children:[
            name:'ccc',
            id: 4
        ]
    }
    ]
 }

1. 整个项目开发流程，从需求设计到项目上线有哪些步骤？其中有哪些git操作

2. 比如现在git提交了三个历史A、B、C，现在处于C阶段，想要丢弃B的修改，直接和A合并，如何操作

3. git rebase什么时候可以用，有什么作用

4. git 代码冲突怎么解决

5. 熟悉网络协议吗，网络分层分为几层？如果现在是五层架构，比如第一层是HTTPS协议，第二层不能校验 HTTPS协议，需要跳过检查，第三层能正常通过协议，如何做？（Nginx就可以转发，直接跳过第二层，由五层架构变成四层）

项目组二（业务方向，拓扑结构）

1. CSS3有哪些新增的属性

2. 如何用css画一个三角形

3. 一个矩形，如何设置颜色从左到右渐变

4. 一个对象数组，如何合并去重，对象可能比较大，数组也可能比较大

5. git如何查看某个文件的提交记录，如何查看某个文件什么时候首次创建的

6. 一个number数组，如何查找到最大值

7. 一个number数组，如何求平均值

8. http状态码有哪些，表示什么意思

9. 如何让网站更利于seo

10. xss攻击是什么，有哪些防御方式

11. git多人协作开发，怎样尽量避免代码冲突

12. 前端本地存储有哪些方式，有什么区别？如何设置和清除cookie？

13. 发送出去多个请求，其中有的请求不需要了，如何中断发送的其中部分请求

14. package-lock.json有什么作用？package.json中，库版本号前面的 ^ 符号的意义是什么？

15. vue组件通信方式有哪些

2023-02-07，某小型科技公司， 16：00~ 17：00 ，线上

很神奇，HR和技术负责人一起面的，先是HR了解情况（首先自我介绍，然后问想换工作原因，做过的印象深刻的项目，未来规划，期望薪资。。。），然后就是技术负责人面了

1. 专业不对口，是怎么转前端开发的，过程中学过哪些课程

2. 上个问题说到了数据结构与算法，于是就问了几个数据结构的问题

   • 数组，链表，对象有什么区别

   • map，set集合有什么用，有什么区别

3. 虚拟dom是什么，vue和react的diff算法有什么区别

4. vue老版本的diff算法是采用递归的方式，新的算法有何改进，还是使用递归吗

5. 前端性能优化有哪些

6. 浏览器的线程模型是怎样的，单线程还是多线程

7. 具体如何用原生发送请求

8. 如何用原生HTML和JS在页面上写一个表格

2023-09-14 某中小型互联网公司， 15：00~15：40，线上

PS：该公司大小周，而且周一二四固定加班到晚九点，社保最低档缴，公积金工资全额的6%，年终奖1~3月。由于上班时间有点变态，我本不打算去的，之所以参加面试是因为很久没收到过面试了，就当是一次锻炼机会，找点面试的感觉。

1. 上来自我介绍

2. 项目中有没有做过什么有亮点的东西

3. 看你简历上写了解浏览器原理，说说从浏览器输入URL后发生的一系列事情吧，越详细越好

4. 上述过程中，你在渲染流程里说到分层和分块，浏览器是如何做的，什么情况下会单独分层分块，目的是什么

5. css的translate是什么，有什么用

6. 上个答案我回答偏移，继续追问，还有其它的偏移方式吗，和translate有什么区别

7. 一个场景题：有一个大数据几万条，是数组对象，对象里有很多属性，每条数据有唯一id，现在给定一个一万条数据的id数组，实现一个函数，入参为以上两个数组，需要根据id数组在对象数组种查找到对应的数据并返回一个新数组。

8. js中对象根据键获取值和数组通过数组下标获取值，哪个更快

9. react用过哪些hooks

10. 上个问题我说极端情况下会使用usecallback，继续追问为什么是极端情况，我的回答参考juejin.cn/post/725180…[1]

11. 项目中如何管理数据，组件通信，什么时候考虑使用redux

12. 有没有写过自定义hooks

13. useEffect会在浏览器的哪个阶段执行。

14. 反问，有什么需要了解的吗

2023-10-19 某国企银行（一面）， 10：30~11：40 ， 线上

1. 自我介绍

2. 做过的项目， 项目难点

3. 一个手写题，查找一个数组中第二大元素。我直接用sort排序取倒数第二个元素。

4. 追问sort库函数，底层用什么实现的，快排时间复杂度，如果不使用库函数，我应该怎么做上述问题

5. promise.all的工作原理？promise.all同时发出多个请求，其中某个请求失败了，其它请求会中断还是继续请求呢？

6. 手写一个map函数

7. 解释事件循环系统。什么是宏任务，什么是微任务？解释完后面试官提供了一段关于宏任务和微任务的打印顺序题，让说出打印顺序。

8. 解释react受控组件和非受控组件。官方推荐使用哪种。什么是react局部状态，什么情况下会出现局部状态

9. 解释什么是跨域，有哪些解决方式

10. cookie会跨域吗？设置cookie时可以通过domain，这样设置的cookie支持跨域吗

11. a.b.c.com和a.b.com的cookie算跨域吗

12. 了解webpack吗，entry，output，modules等是webpack的一级配置项吗。

13. rewrite和redirect有什么区别

14. 多入口和多出口打包怎么做，有什么应用场景

15. 了解Nginx吗

2023-11-02 某国企银行（二面）， 14：10 ~ 15：10， 线下

自我介绍（两个面试官，一个HR，一个技术人员）

1. 简历上写了熟悉vue和react，就问了用的哪个版本

2. 介绍一下hooks

3. hooks和class组件的生命周期对应关系

4. 有一个用于比较状态变更的hooks，是哪个，有没有用过

5. 操作dom如何影响性能

6. 介绍Promise，如何写同步代码执行异步操作，怎么理解同步异步

7. 一道开放解答题：看视频时的弹幕，怎么做

8. 如何判断一个页面是否有性能问题，如果一个页面有性能问题，如何找出

然后HR问了几个问题

1. 简历上写的第一份工作是九月份，毕业是6月份，中间3个月空档期咋回事

2. 第一家公司只做了几个月，为什么离职

3. 第二家公司为什么离职

4. 现在所在公司薪资多少，从入职到现在有没有晋升

5. 期望薪资多少

2023-12-13 某国企研究所（一面）， 14：00 ~ 14：40，线上

（总共只有一面，有三个面试官，应该是一个HR和两位技术面试官）

1. 自我介绍

2. 简历上写了做过数据大屏，怎么做的屏幕适配

3. vue和react的异同点

4. 印象最深刻的项目，项目重难点

5. 有没有做过权限控制，怎么做的？比如页面按钮的权限，具体怎么做？

6. 对于大量数据，你怎么处理，怎么保证性能

7. async/await的实现原理

8. 你介绍时说自己熟悉浏览器原理和http网络协议，介绍一下你最熟悉的点

9. 介绍下浏览器的重绘和回流

2023-12-26 某中小型科技公司（一面），15：00~16：00， 线上

很神奇的一次面试，第一次碰到这种，上来让我自我介绍，然后就开始共享屏幕手写代码题，总共五道，限时一个小时，写完面试就结束了

1. 比较版本号，比如 (1.001, 1,0, 1.0.1, 1.2.0.1)

2. 查找两个数组交集，并返回交集元素在第一个数组中的下标

3. 实现一个promise.all（或实现一个sleep函数）

4. 查找一个数组中的最大的数，倒数第二大数

5. 限制一个函数的执行次数，比如 limit(3, fn)，多次调用limit， fn最多只会执行3次

2023-12-27 某中小型科技公司（二面），19：30~20：30， 线上

1. 自我介绍

2. 代码题：爬楼梯（斐波拉西数列）

3. 代码题：数组转树

4. 代码题：判断输入字符串中的括号是否匹配

5. 印象最深的项目，难点

6. 介绍事件循环系统

7. vue2/vue3的区别，有哪些升级

8. v-model 的实现原理

9. Object.defineProperty 和 Proxy有什么区别，性能有差异吗

10. 介绍一下flex布局

11. justify-content有哪些值，有什么用，space-around所有子元素的间距都相等吗

12. flex: 1， 是哪些属性的缩写

13. 说说浏览器缓存？和缓存相关的请求头有哪些，有什么作用？

14. 如果一个页面卡顿，怎么找原因，怎么修复

15. 说说有哪些性能优化的方式

16. 当前薪资，期望薪资

17. 有什么想问的吗

2023-12-29 某大型科技教育公司（一面）， 11：00~11：30，线下

1. 先做个自我介绍

2. position有哪些属性，分别有什么作用

3. 移动端如何做适配

4. 场景题：一张图片下方有按钮，按钮和图片重叠，但是要展示图片，不展示按钮，且按钮和图片非父子节点关系，如何能点击到按钮

5. 浏览器页面显示的过程

6. package.json 的 dependencies 和 devDependencies有啥区别，devDependencies 中的配置可以放到dependencies 中吗

7. webpack 的 loader 有什么作用

8. 简历中有提到项目重构，怎么操作的

9. 说一下vue双向绑定的原理

10. vue对数组的响应式是如何处理的

11. 如果现在有个一千个元素的数组，如何让vue不去监听它

12. react hooks可以放到条件语句中吗，为什么

13. react为什么要用fiber架构

14. 场景题：有个input框，每次输入会请求接口返回相应的计算值，但是请求可能有延迟，有可能拿到的值不是最后一次输入请求的，如何处理

15. 有了解过一次编码，多端应用的框架吗

16. 有什么想问的吗

作者-自驱