年前因为一些原因离开原公司，本来想着可以过个毕业以来唯一的一个安稳年，但是没想到在家的日子并没有那么有趣，而且在家也没办法学习，所以年后就匆匆忙忙的回来复习了，整体复习了一周，本来预计面试两到三周，事实也是如此，确实两周基本技术面试结束，第三周属于谈薪阶段，下面是一些面经，有些小公司可能没有记录，因为更偏项目，整体参考意义不大。

1、自如家装

一面

• 说一下position属性及用法
• promise和async区别
• promise.all用法
• npm和yarn区别
• 移动端适配方案，移动端1px
• flex属性及用法
• js时间循环
• vue生命周期
• js深拷贝和浅拷贝
• js类型，基本类型和复杂类型区别
• 如何判断js类型
• 数组去重
• js有哪些循环方法，foreach和map区别
• 项目中的跨域如何解决
• 说一下项目难点及解决方案
• 学习渠道及学过什么
• ...可能还有几个，忘了 面试时间大概40分钟左右，视频面试，比较基础。所有问题都答上来了，甚至还有扩展，不知道为啥就没有消息了，咱也不知道，hr也没有消息...

2、翼欧科技

一面

• 说一下最满意的一个项目，针对项目具体问了一下
• webpack优化做了哪些工作
• 有没有看过具体的loader、plugin源码
• webpack如何把.less文件转换到html
• 断点续传怎么实现
• 说一下你对DDD的理解，以及如何在项目中使用
• react组件通信
• event bus的once怎么实现
• react class component 和function component区别
• 如何在function component中实现shouldComponentUpdate
• 如何实现一个redux中间件
• 微前端qiankun和signleSpa区别，以及为什么使用微前端
• 反问... 面试体验不错，面试题目也算是很好

二面（现场）

就不记录题目了，因为大部分问的是项目管理，和一些框架东西，比较散，也有深度。主要说一下面试感受，本来现场面试有点不想去的，推迟了一次，不过最后还是去了，说真的有点超出预料，体验很好，面试官很耐斯，一个是给你感觉很有深度，知识很广，另一个是给你感觉很尊重你，整个过程像是在“交流”，真的交流而不是简单的问答，说到有意思的事情，人家也会笑，但是给你感觉是很真诚的，不像某个公司面试官一样，感觉像是在嘲讽你...只能说给我的体验很好，也让我学到很多，不管说最后的结果是怎样，至少我能有学习，有思考，很好，点赞！

茄子科技

一面

• 自我介绍
• vue双向绑定原理
• vue如何实现一个v-model
• react优化
• react diff原理
• 微前端，qiankun和singleSpa区别，qiankun做了哪些优化
• h5和PC区别，h5做了什么 30分钟，没了，面试体验不错

二面

• 自我介绍
• webpack优化，做了什么
• 微前端方案及为什么选用
• 微前端的通信方案和redux、vuex有什么区别
• 如何实现开发一个组件，以及规范边界有哪些
• 如何实现统筹一个抽奖组件，包含多转盘，金蛋等
• DDD如何应用
• 项目的权限怎么实现的
• 如何实现一个多图表页面的优化
• 还有些根据项目深入问的问题

度小满

一面

• 自我介绍
• 微前端方案
• 组件复用方案
• webpack优化及项目优化
• 执行作用域说结果

var a = 1;
a = 2;
window.a = 3;
function Test() {
   let a = 4;
   this.a = 5;
   setTimeout(function () {
       console.log(a); // 3 
   }, 10);
   setTimeout(function () {
       console.log(this.a); //3
   }, 20);
   setTimeout(() => {
       console.log(a); //5
   }, 30);
   setTimeout(() => {
       console.log(this.a); //5
   }, 40);
}
new Test();

var x = 1, y = 2;
var z = function () {
   var x = 2;
   return {
       x: x,
       y: function (a, b) {
           x = a + b;
       },
       z: function () {
           return x;
       }
   }
};
 
var a = z();
a.y(x, y);
console.log(a.z(), a.x, x); // 

• 给定两个数字字符串，求和
• 离职原因

58-人人车

一面（面试官开摄像头）

• 自我介绍
• css移动端适配方案
• 实现BFC的方案
• 重绘和回流
• async 和 promise错误捕获
• 浏览器缓存，先命中那个缓存
• localStroage、sessionStroage、cookies
• 如何实现跨域
• new一个对象发生了什么
• instanceof 实现原理
• 箭头函数和普通函数区别
• 响应状态码含义301.302.304，401，403
• 响应被重定向后在哪里获取html
• Event Loop
• webpack做了哪些优化
• vue router实现原理
• vue route 和 router区别
• 实现一个观察者模式

二面

过了很久的二面，就不记了，感觉58的流程很差，没有hr推进，整体好像是hr推给面试官，剩下的都靠面试官负责，约面什么的都是，没有邮件、没有短信，全靠口头君子协议，面试官迟到了，我都不知道怎么联系，全靠等。而且都是通过微信视频通话...整体感觉特别不好，再加上一些其他原因，所以这次面试有点情绪吧，不太想说话，挺不应该的，估计也挂了，不过也没啥，希望后面能优化优化面试流程吧。

字节跳动

一面

• 自我介绍
• react 16和15区别，fiber是如何实现异步调用的。
• 实现一个Promise异步并发
• redux和Dva的差异
• Promise原理
• webpack和vite区别
• 说一下noform
• 说一下复杂的项目及如何解决
• 算法，链表删除倒数第n个节点
• 算法，求遍历树形路径和 面试感觉不错，面试官会做相关引导

二面

• 自我介绍
• 按着项目深耕..深耕
• webpack优化
• 写一个最近的组件

三面

• 自我介绍
• 技术难度最高的项目，参与度最高的项目
• 技术难度最高的项目，整体流程，如果我是新入职的，你如何给我介绍让我最快上手，
• 未来方向
• ...还有些其他的，更多是内容上的，跟技术无关，可以理解为对项目的了解程度

网易-有道

一面

• 自我介绍
• 父子关系两个div，子元素设置margin-top：100px，整体表现如何
• 给定一个width为200px的元素，padding为50px，background设置red，求红色面积
• 图片懒加载，各种实现方案
• pdfjs优化
• react calss组件和function组件区别
• qiankun方案，如何共享组件，扩展monorepo
• keep-alive相关，扩展
• react construct中this指向，vue中created设置一个setTimeout，function和箭头函数的this指向

蓝湖

一面

• react class组件和function组件区别
• react16做了哪些优化 fiber特性，RAF 和 RIC的功能
• 项目中如何使用DDD
• 项目规范有哪些，分别有什么用
• vue和react区别
• ts的泛型
• redux或者flux的思想
• 项目中的动画及拖拽是如何实现的及所遇到的问题
• 算法题

const input = [
  {
      id: 'task1',
      deps: [],
      runTask: (cb) => {setTimeout(() => {cb(null, 3)}, 1000)},
  },
  {
      id: 'task2',
      deps: ['task1','task3'],
      runTask: (res1, res3) => 1 + res1 + res3,
  },
  {
      id: 'task3',
      deps: ['task1'],
      runTask: (res1) => 5 + res1,
  },
  {
      id: 'task4',
      deps: ['task1', 'task2'],
      runTask: (res1, res2) => 3 + res1 + res2,
  },
];
function runAllTask(input,cb){}

任务之间相互依赖，实现一个方法，最后输出所有的值

蚂蚁金服

一面

• 直接手撕代码30分钟，5道题，能写多少是多少，完事开始说题

1、实现深度优先和广度优先遍历
2、实现一个深拷贝
3、给定一个无序数组，返回其最长连续数组
4、实现一个柯里化函数
5、给定一个数组，实现list转tree

• 说一下所做项目及技术难度
• 说一下vue如何patch
• vue如何实现一个dialog.show()，dialog是一个组件
• qiankun是如何实现的，以及js是如何做到隔离的
• vue的动态路由加载是如何实现的，webpack的动态引入如何实现的
• webpack原理
• webpack有哪些优化方案
• webpack....一顿输出，很深
• 说一下fiber架构
• 实现布局方案
• rem和em区别
• css动画有哪些有点

搜狐

一面

• 自我介绍
• vite解决了webpack哪些缺点，能在生产环境用吗
• webpack优化有哪些
• vue双向绑定原理如何实现
• https用了什么原理
• http2.0和1.0有什么区别
• react hooks为什么不能放在if里
• 1px如何解决
• flex的参数及作用
• 移动端适配方案
• 说一下ts的泛型
• 说一下ts的重载
• meta标签作用
• less和sass的特性，用过哪些
• git rebase stash作用
• 实现一个防抖或者节流函数
• 实现一个url解析参数函数
• promise常用API，顺序发送请求算法或并行发送请求（选一种写）

二面

不想写了，基本没问啥，上来手写算法，写的不太理想，是我的原因。但是面试过程中面试官各种小动作、消息提示音，最让我不适的是不明白为啥会笑，咱也不理解啥意思，但是就是给你感觉很不舒服，第一次面试这么无语，面到没有想说的欲望

小红书

一面

• 根据项目技术做具体的询问
• webpack和vite区别
• 微前端
• webpack原理
• 给定一个二叉树，输出每一层和的数组
• 手写promiseAll
• 使用flex实现竖向对齐
• 事件循环，判断输出
• react hooks注意事项
• fiber原理

美团

一面

• 说输出

const [obj, update] = useState({
  a: 0,
  b: 0,
})
update({
  a: obj.a + 1,
  b: obj.b,
});
update({
  a: obj.a,
  b: obj.b + 1,
})
console.log(obj);
setTimeout({} => {
  console.log(obj);
}, 1000);

• 上题如何修改可以实现两次更新后的结果为 {a: 1, b: 1}
• 页面有两个按钮A、B，点击后都会请求接口获取全国城市，并输出城市数据。希望：实现请求接口数据函数，实现缓存逻辑（关键点：发送一次接口后，再也不发送）
• 微前端方案各种深挖
• sortablejs如何实现拖拽
• 如何自己实现一个table头吸顶或者列固定
• 自己实现过的最复杂的组件

猿辅导

一面

• 如何设计一个类似百度搜索框的组件
• 手写一个如上的组件，实现模糊搜索
• react和vue区别，及相关新特性
• http有哪些版本，分别有什么特性
• https如何实现的，
• 虚拟列表如何实现
• chrome有哪些线程和API
• webpack有哪些优化
• 项目分配情况
• 如何实现canvas 压缩图片
• 如何实现大文件上传
• 如何抽离组件，有哪些注意的点
• 移动端适配方案
• 浏览器缓存

小米移动

一面

• 有没有配置过webpack，有没有写过loader，plugin
• 手写红绿灯交替执行
• 手写jsonp
• 移动端适配方案，有没有用过tailwindcss
• react fiber原理
• url输入发生了什么

二面

• 项目介绍
• js作用域说输出
• promise事件循环说输出
• 算法，求字符串的有效性，匹配括号
• css如何实现一行元素居中，多行元素靠左，纯css
• 实现js深拷贝
• 防抖节流应用场景
• 组件通信方式
• 用过哪些hooks,如何在hooks中实现类似class 的shouldComponentUpdate
• setState是同步还是异步
• setState说输出
• http缓存

boss直聘

一面

• 项目问题
• react，useEffect和useState混合调用及多次调用问题。
• 微前端方案原理
• vue如何实现双向绑定
• 如何实现v-model
• 移动端适配及问题处理
• webpack和vite区别
• vite如何适配commonjs及umd
• pdfjs
• react优化有哪些
• 表单方案，以及解决了什么
• canvas如何压缩图片
• 离职原因
• 薪资情况及预期涨幅（不知道为啥技术面会问，奇奇怪怪....）

二面

• 介绍项目
• 项目权限如何实现
• n个图片如何实现进度条loading加载，刷新了还会展示吗
• 继上题，前端如何清除浏览器缓存，
• 浏览器安全，如何防范
• node部署如何设置多实例
• 活动页面如何设置下载选项，关闭后不进行展示，下次进入还会进行展示
• react 的setState设置一个一样的值，会不会render
• canvas绘制图片，不同设备上展示效果不同，会有模糊，为什么，怎么处理
• 微信小程序包过大，如何优化，如何原生的设置全局共享状态
• 前端监控如何实现，能监控哪些东西
• webpack的优化
• 浏览器缓存
• 又问了薪资，预期涨幅... 二面整体偏深偏难，很多东西确实没有接触过，只能按着自己想法说，会有提示和引导，不过有些东西不会确实是不会，也没办法...继续看吧。也算一个成长

三面

• 说项目
• css实现左边定宽，右边变化
• js实现关闭元素选项
• 正则匹配

京东（京东物流、京东农场？）

一面

• 有没有用过地图相关的
• 项目管理相关
• 组件拆分相关
• 上线流程相关
• 没了，反问，30分钟 ，后端面试？？？

二面

电话面试，说了写基本的东西，没具体记录，忘记了。

牛客网

一面

• 项目相关
• 微前端方案及优点
• EventLoop
• vue双向绑定
• webpack优化方案
• 手写SetInterval
• 手写防抖和节流
• 手写观察者模式

二面

• 项目相关
• 实现一个ts类型，要求对象类型，任意参数，任意长度
• 给定html用flex实现一个方块靠右，剩下两个居左
• flex三个参数
• axios怎么用的
• vue和react区别
• 闭包理解，应用
• 如何学习，发展方向

三面

• 说项目
• 说vue和react区别，有做过哪些vue优化
• 说一下你做的最难的项目
• 团队情况，如何实现okr
• ....

白龙马

一面

• 项目相关
• 项目中遇见最难的事情，如何解决
• 微前端做了哪些工作
• 如何设计一个模块，支持commonjs，es6modules, umd...
• 渲染一个html发生了什么
• 事件循环，promise输出
• 遇见空指针怎么解决，如何实现一个监控系统...
• vue的双向绑定，如何做事件监听 感觉很懵，上来一顿输出，很多确实没遇见过，结束了复盘想想感觉更像是偏向node，整体面试体验很差，第一次面试感觉双方都很尴尬。每次问完问题都有很长时间空白，幸好是开摄像头的，如果没开，我都没法分辨是在线还是网卡了

欧科云链

一面（面试官开摄像头）

• 项目相关
• 微前端如何做组件、数据复用
• 事件循环
• promise介绍，async await介绍，说输出
• js作用域问题，说输出
• webpack优化
• 为什么webpack的chunk要用hash标识
• 哪些代码会被tree-shaking
• 说一下http缓存
• css-loader、style-loader作用是什么
• 如何做项目优化，首屏优化
• 如何学习，搭建一个博客要注意什么，博客SEO重要吗
• 说一下flex
• css定位

二面

• 项目相关
• qiankun实现原理
• css选择器
• flex 1是什么意思
• 给定一个div,包含1、2、3、4、5 5个item，如何用flex实现5、4、3、2、1排序
• 如何实现移动端适配，rem如何用，meta如何设置
• new String('a') === 'a'?
• seo方案
• 防抖和节流区别，手写防抖

网易-有道高中方向

一面

• 说一下hooks使用及注意
• 手写判断链表是否有环
• 手写红绿灯循环执行
• 两个promise结果，一个作用域题
• 大文件上传，如何是实现时间分片，如何整合，如何实现上传进度
• react fibler
• pdf的预览
• 为什么用微前端
• webpack配置优化，loader和plugin区别，有没有写过loader
• 如何解决1px
• css动画有哪些，有什么区别，什么情况能是translation失效 也不知道上一次为啥挂了，反正我感觉我说的没什么问题，，，

二面

• 说项目
• 为什么用qiankun，优势是什么
• rem是怎么计算的，em是怎么算的
• 移动端适配做了什么
• webpack做了什么，loader 和plugin区别
• css-loader style-loader less-loader顺序及作用
• pdf做了什么优化
• 如何通过canvas实现图片压缩
• 表单方案如何实现，做了什么优化
• 组件共享方案，权限如何控制
• vite和webpack区别
• 有哪些鼠标事件，分别什么意思

高德

一面

• 说项目
• 微前端
• 项目中遇见最难的如何解决
• 说下vue双向绑定原理
• 说下盒模型，什么情况用怪异盒模型
• 说下事件循环
• 为什么js是单线程
• 单线程和多线程区别，多线程如果共同访问同一个地址会发生什么，怎么解决
• http方法，有没有用到options方法
• post和get区别，两个参数放在那里
• 最近有没有学习新的东西
• 项目优化有哪些
• 说下require和import区别
• 小程序原理
• 说一下未来计划
• 说下个人有点缺点

二面

• 说项目
• 微前端
• 最难的项目
• 项目存在哪些优化
• 1px如何解决
• 小程序原理
• 自己不足
• ...项目理解上比较多

总结

这次面试感受颇多，有对公司层面的，也有对自己的认知。先看公司层面的吧，我的感受是，中小公司更加需要定向人才，尤其是有些业务特殊的公司，他们需要的是历史经历有业务相关人，缺少人才培养时间，其实也可以理解，毕竟时间就是金钱，最快上手可以减少成本，所以也算给大家一个参考建议吧。对于大公司来说，相对规范一些，整个面试过程层层递进，基础->基础加深->项目理解，历史经验->思想扩展，可能总结不对或者不同公司不同部门也不相同，不过大体是这么个意思。

对于自己的其实就是整个规划和历史工作上的，首当其冲的就是算法，其实前端的算法并没有特别难，整体上校招笔试题可能会有各种算法，不过社招面试的算法还是以基础为主，很少说上来先整个动态规划玩玩的情况，总结一下基本都是二叉树、遍历、字符串相关的东西，剩下的大部分是手撕源码，类似手写Promise、防抖节流等等的。另外其他的基础就看自己的情况了，js作用域、原型链等等都是跑不了的东西，看自己的复习。另外从项目角度看，做过的项目一定要有亮点，这里给到的建议就是大家要学会总结，学会发现。从自己的角度看，后面一定要有自己的专精部分，不管是某一个方面，这是个人特色，不至于只有业务，没有特点。

面试第一周确实有点不熟悉，挂了很多，随着面试往后，整体感觉就会好很多，不管是面试感觉和技术上的。一个建议是，很多时候有点想法一定要说，因为很可能就打开了一扇门。面试周期中心态要好，中期尤其是有些公司反馈不太好的时候容易心态崩溃，一定要稳住，记住会越往后越好的。

以上只是自我感受和面试记录，仅供参考哈！