前端，通过面试去学习，综合（面试总结整理）

IronKee

已于 2024-01-10 15:51:21 修改

阅读量3.9k

点赞数 12

分类专栏： JavaScript 面试文章标签：面试前端职场和发展

于 2021-12-27 00:16:00 首次发布

本文链接：https://blog.csdn.net/IronKee/article/details/122163550

版权

JavaScript 同时被 2 个专栏收录

14 篇文章 2 订阅

订阅专栏

面试

10 篇文章 0 订阅

订阅专栏

前言

已经将近3年半没有出去面试了，近期在面试，对照着前端八股文准备的过程中，不禁感叹前端的东西实在是多，涉及的面太多，整个行业环境也比较卷，没办法…

在此过程中的提升确实要比平时做版本迭代需求来得快，不过因为短时间内学习补充的东西太多，不系统性整理的话会很乱，所以输出文档，形成自己的总结，方便整理和查看，加深记忆

接下来准备分类成几大块去更新面试方向笔记

1.基础，原型链、闭包、this指向、call/apply/bind、new过程、事件循环eventloop、深拷贝

2.优化，输入url到页面展示的过程、浏览器渲染、http/https/tcp/ip、缓存、前端性能优化、跨域

3.es6和typeScript，es6+的一些常用特性，模块化开发

4.框架，vue react reactHook 小程序

5.工程化，包括webpack、rollup、parcel、babel

6.css，面试中css问的不是很多，可能5年左右以上经验不太问css，更注重js吧

7.nodejs，我对nodejs一直不是很熟，借此机会学习了解一下

8.理论知识，面向对象、设计模式、模块化、组件化、算法、开关、灰度开关、前端埋点、前端异常处理、安全问题等

9.开放问题，比如个人对前端发展的理解、项目难点、亮点、最复杂的逻辑、团队协作冲突问题，以及和HR面的问题

几个面试要点

首先，自我介绍和项目介绍要准备好，主要介绍近2份工作或者最近这份工作的负责内容、项目内容、涉及的端和个人技术栈
其次，面试是需要积累面经的，自己模拟面试和真实的现场或者电话视频面试还是不一样，必须经过几次真实面试，才能把一些高频的面试题答好答得熟练，并且可以让自己越来越自如应对，逐步降低自己紧张的情绪
另外，一定会被问到的开放问题，比如项目中碰到的难点和事故以及如何解决的、项目的亮点、这几年开发中碰到的最复杂的逻辑（抛开业务，不要结合业务去讲），这几个一定要提前准备好，不然面试的时候临时想，要么一时半会想不出，要么讲的不太合适

面试初步总结

临近年底，建议如果是年底还是别想着跳槽了，面试机会很少，一方面过快年了，大家都在等年前年后的年终奖，都不跳槽，那么市场上坑位就少，缺乏流动性；另一方面，年底都在清点岗位，锁hc，甚至裁员；
所以我一开始投简历，流程很慢，面试很少，有些着急，后来就稳住心态，就当这段时间面试是积累经验，看下行情看看机会，不再抱着一定成行的心态，另外就是投一下其他城市，刷一下远程面试经验，趁这段时间多总结学习吧
最近约到面试的有泉峰、宝马诚迈、同城旅行、领悦数字、字节跳动、联通南京软件研究院，投了简历暂时没面试的有东方财富、满帮、鸿信、中国系统、荣耀、南瑞、shein（年后约我面试，但是我已经要入职了）、端点、吉利、三一重工，打招呼已读没回的有新奥数能、蔚来、理想汽车，米哈游简历筛选不通过，花旗金融因为需要跟global对接，需要英文沟通技术，直接被pass掉

面试记录，部分附答案链接或者答题点和思路，详细答案放在后面几篇笔记中分类整理更新

泉峰精密 2021年12月3日

电话面试，时长50分钟，面试官是服务端，进行的一场电话初面，聊的比较轻松，由于是初面主要是看一下个人意愿，加上面试官是服务端，所以开放问题较多

自我介绍，介绍项目，平时都开发哪些功能
项目中碰到过哪些难题，最近产生的事故
组件化开发怎么设计拆分组件，怎么选型，直接拿项目举例
vue react reactHook熟练度
开关是做在服务端还是？如何灰度放开如何针对放开
有没有做过PC管理系统
平时碰到哪些事故，原因，如何处理
服务端异常接口异常处理
埋点，有没有有用过第三方埋点，前端异常有没有统一处理方案
自动化了解多少，jenkins
如果前期设计10个组件模块，一期只上8个，剩下2个，你是预留组件空间，还是不做

现场面试，时长60分钟，两位技术面试官均是服务端（目前公司没有前端，工作由外包方完成，所以面试官是对着电脑问vue的题目），两位HR，4个人一起面试，时长60分钟，第一次出去面试，准备不够充分，有些题目比如性能优化、gis、压测回答的不好

自我介绍，项目介绍，讲一下项目功能点
项目从需求设计拆分都是怎么完成的
vue react哪个用的多
v-if v-show区别
说一下虚拟dom，有什么优缺点，和传统dom相比
虚拟dom怎么渲染到页面
vue的diff
vue生命周期，用法
动态绑定class style
跨域如何解决的
做过哪些性能优化（没有准备好，随便答了几个…）
有没有接触过gis（没有接触过…）
项目中碰到的技术难点
碰到问题如何解决，如果一个人如何解决
和后端，和视觉开发协作痛点矛盾点
平时如何提升
有没有自己搭建的项目
问我的SPA项目有没有跑过压测压测（这个我没有涉及，只是简单的答了一下，同事有跑过压测）
你们的一个开发流程，工作状态流程
你们的团队人数
你经常做的业务是购物车促销，如果换一个业务场景对你来说的影响
ios和安卓有想法了解吗，和web开发技术互通吗，人事问的…
你认为的机遇和风险是什么
未来的规划，转型
对做甲方乙方有什么考量

HR面（hr是和技术面混合在一起的，混合提问…）
目前是在职还是
为什么考虑换工作
考虑的公司类型，通勤距离能接受吗
目前是考虑如果有合适的会继续挑选还是入职
在南京定居了吗
后期考虑在南京长期发展吗
目前薪资期望薪资

宝马诚迈 2021年12月15日

总时长85分钟，一开始简历投递后是hr进行一个意向面试，问了几个技术问题和期望薪资，并且当场让用英文做个自我介绍…比较尴尬说不了几句就歇比了，正式面试之前hr有提醒准备下英文自我介绍，我背了一篇，大概能讲2分钟
整个面试过程偏理论性和微服务比较多，像面向对象和设计模式偏理论性的没有准备，面向对象只能把自己的理解讲一讲，ubuntu写脚本这个确实没有涉及过，vue react 小程序都没有问，主要涉及nodejs ts promise，可能项目比较偏微服务端，不太需要web前端开发

笔试比较简单的一题，输出1-100，把能被3整除的数字替换成a，能被5整除的数字替换成b，既能被3又能被5整除的数替换成c，不过做完后会让你持续优化代码
英文自我介绍，中文自我介绍
讲一下nodejs的理解，异步非阻塞I/O，为何nodejs性能高等
js有哪些异步方法
promise怎么用，除了解决回调地狱和代码美观，为什么必须用promise（回答了状态）
ts和js的区别，哪个是面向对象，什么是面向对象
https和http的区别
这5年碰到的最难的逻辑问题，不要结合业务去讲（不让结合业务讲，当时就愣住了，面试官提示可以讲一下用过的算法）
设计模式了解哪些，用过哪些，举例说明（讲了单例模式，工厂模式，发布订阅模式，但自己都没有用过）
ts里抽象类和接口的区别（早年培训java的时候背过，但是早忘了…）
有没有用过ubuntu，有没有写过脚本，打包优化之类的（linux很少用到…）
你们的项目是偏维护还是0到1

最后是英文问答（又是英文环节，只有第一题勉强用英文回答了下，后面全部中文回答，有几个题还听不懂）
你是什么类型的人
你和同事处的怎么样
你希望同事怎么样
你是怎么找到我们公司的
你认为你有什么优势对我们来说
你了解敏捷开发吗
你如何自我解决问题
你接下来的5年规划
多久能入职
你有什么问题问我们

同程旅行 2021年12月15日

总共三面，两轮技术一轮hr面，三天面完，流程很快，但是最终谈薪资涨幅比较低，所以拒掉了

一面12月15日，时长35-40分钟，面试的过程也挺好，一面的技术面试官在我回答不出的时候会进行提示，另一位面试官问的开放问题多，也比较幽默

项目开发流程
和产品服务端视觉合作的过程中碰到的问题
团队中角色，是否带人
思考和服务端冲突怎么解决为何这样解决
每天的需求进度有没有工具跟踪
有没有代码review，（回答一开始有，后来没坚持执行，问为什么没有坚持下去…）
讲一下购物车流程，支付流程
前端解决计算精度问题（没有想到把小数x100，1000后再计算，面试官提示了）
h5性能优化
vue双向绑定，以及为何不能监听对象新增属性变化
vue nexttick原理
vue2和3的双向绑定区别
react优化
ts和js的最大区别，写ts碰到的最大的问题点
有没有用过websocket
小程序优化
setData，如何自己写一个diff对比对象子属性改变（没回答上来）
小程序和webview如何通信传值（只回答了url拼接参数，猜测了storage和globalApp都不对，其他没想到）

二面12月16日，时长50分钟，是研发部门技术负责人面试，负责人是服务端，所以整个面试问题就比较开放，我觉得千人千面，这种题也是最难回答的

最近项目中亮点描述一下
讲一下做过哪些埋点怎么实现，曝光怎么实现进入可视化区域，有没有什么无痕化采集方案，前端如何监控异常
讲一个你最熟悉的支付流程，从头到尾
如何避免优惠券被用户薅羊毛
这5年对前端的理解编程的理解，以及后期规划
讲一下为什么想研究nodejs，了解程度
有没有涉及过研究过跨平台开发，uniapp flutter taro等
你们算是核心部门，为什么考虑离职

三面12月17日，hr面，时长45-50分钟，问题也比较常规

转行原因，离职原因
主要负责哪些，会哪些技术开发，开发发布需求上线工作流程
对加班的看法态度
对他们的了解，认为你可以帮助他们什么，对这个项目的看法和顾虑
个人未来规划，住哪里，以后的发展城市
目前有没有offer，倾向于去哪，为什么
如果发了offer多久能入职
目前薪资，上一家的薪资，期望薪资，最低接受多少，目前社保公积金比例

领悦数字 2021年12月22日

12月13日投简历，1月12日拿的offer，然后背调了3周，年后入职这家了，华晨宝马全资子公司，挺满意的，目前来看除了薪资低于预期一点，其他各方面超预期。一开始也是奔着这家去的，算是比较幸运吧，得偿所愿

投完简历等了10天，初面12月22日，电话面试，时长20分钟，我以为是随便聊下就没特意记录，一些问题忘记了

自我介绍，项目介绍，项目亮点
vue的双向绑定原理
vue3用过吗，和vue2的区别
性能优化
打包优化
jenkins了解吗，配置和部署
有没有管理经验

复试现场面试，2022年1月5号，时长1小时，办公环境确实很好，面试官是直线经理也比较随和，我以为复试是深度技术面试，结果是开放问题分析解决问题面试

自我介绍
前端开发过程中碰到的难点
– 兼容问题，PC IE ios 适老化软件等
– 构建工具升级，webpack升级，babel升级
– 项目选型
团队构成
项目开发流程，合作流程，排期等
开发合作中的痛点，与视觉、服务端、产品等
了解敏捷开发吗，使用过什么敏捷开发工具，jira
英语如何
了解我们公司吗（面试官介绍了公司和项目主要负责的部分）

hr问题
在目前公司的行政级别
想离职的原因
平时碰到问题如何解决
因为不是计算机科班，额外怎么去补充相关知识
如何针对某一块进行深度学习
比如vue react区别，选型推荐哪一个，为什么
这几年，在前端哪方面有深度研究

字节tiktok（上海） 2022年1月5日晚

抱着学习的态度来面试的，知道面试会比较难…面试官还不错，不会因为回答不出问题就表现不耐烦，全程很有耐心

最近1，2年做的比较难的项目和项目难点，如何解决的（我提到了reacthook项目，接下来就被虐了）
setState怎么实现的
useState怎么实现的
react的diff怎么实现的
说一下fiber
说一下使用hook碰到过的问题的问题
说一下hook开发中碰到的闭包问题，没有碰到过闭包吗
说一下reactHook 函数组件和类组件区别
说一下ts使用的问题，说一下interface
说一下首屏优化怎么实现
有没有用过离线包
说一下性能优化怎么实现，从输入url到浏览器开始一步一步说，把你做过的没做过的了解的都可以说
说一下服务端渲染ssr，怎么实现
然后是一道笔试题，应该是easy难度，递归解决

// 输入entry
const entry = {
  a: {
    b: {
      c: {
        dd: 'abcdd',
      },
    },
    d: {
      xx: 'adxx',
    },
    e: 'ae',
  },
};
// 要求转换成如下对象输出
const output = {
  'a.b.c.dd': 'abcdd',
  'a.d.xx': 'adxx',
  'a.e': 'ae',
};

…

接下来是我问面试官
Q：你们是做tiktok的，主要做tiktok的什么，是短视频还是直播还是相关其他系统
A：我们是做h5直播间，做im消息系统，还有云存储，消息折叠，和tiktok电商，以及其他好多词汇我没记住

Q：tiktok面向海外，英语要求呢，国际化怎么做的
A：面向几十个国家，有十几种语言有个翻译中台处理，你传key，中台处理后返回对应国家语言等等

Q：算法这一块，别人称呼你们宇宙条，算法考察难，实际开发中你们使用的多吗
A：前端一般不用，前端很少用，他说主要还是考察项目，所以出了个easy的题给你

Q：个技术栈，大厂是不是偏爱react，你们呢
A：是的，我们全部react，目前还没见过他们这边有不是react的项目，vue他也会，但是公司不用，然后就是react比较容易做一些扩展，但是优化要比vue有难度等等

Q：面试不通过的话，多久可以再面试其他部门，冷冻期多久
A：没有冷冻期，短时间内不能再面同一部门，但是随时可以面其他城市其他部门都可以，面试结果hr会在3-4天内通知

–gg–

联通软件研究院（南京） 2022年1月6日

年后2月24日联系我说，今天接到通知重启招聘，问我是否还在找工作，是否参加二面，可我已经入职了…

一面电话面试，时长30分钟，难度中等，面试官是女生，感觉比较有趣

自我介绍，项目介绍
PC项目主要做什么
PC适老化放大怎么做的，兼容问题如何解决
垂直居中的几种方式
响应式布局自适应怎么做的
vue react选型，你们项目主要用哪个
vue源码读过多少
new Vue过程
源码里用了很多Object.create(null)是为什么，Object.create(null)创建了什么（哈哈，这个我没注意过，回答错了，面试官是对的，她赢了）
项目有升级vue3吗，了解3和2的区别吗，vue3和react的对比
微信小程序支付宝小程序都有做吗，是用的跨平台框架还是?
用的webpack3还是4
平时有自己研究什么技术吗
能接受短期出差吗
期望薪资

接下来是朋友的面试了，我也整理下

荣耀

js深度拷贝如何避免循环调用
https://juejin.cn/post/6844903620190666759
https://segmentfault.com/a/1190000021682472
js模式单例模式工厂模式
https://blog.csdn.net/weixin_46057095/article/details/107948787
vue单向数据流
– 数据总是从父组件传到子组件，子组件没有权利修改父组件传过来的数据，只能请求父组件对原始数据进行修改。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
– 注意：在子组件直接用 v-model 绑定父组件传过来的 prop 这样是不规范的写法开发环境会报警告
– 如果实在要改变父组件的 prop 值可以再 data 里面定义一个变量并用 prop 的值初始化它之后用$emit 通知父组件去修改
vue如何强制更新组件
https://segmentfault.com/a/1190000021599461
为何使用https，除了安全协议，还有什么原因
https://guolin.blog.csdn.net/article/details/104546558
https://zhuanlan.zhihu.com/p/147177929
小程序线程，ui线程和js线程是如何通信的
https://www.jianshu.com/p/78ec07f661a2
性能优化
对象或者数组是如何快速定位到想要的数据的
插入排序怎么实现的
gulp和webpack的区别
https://www.jianshu.com/p/69f5f1ce00a6
vue的defineProperty为什么没实现对象新增删除的监听
https://juejin.cn/post/6844903965180575751

徐工信息

垂直居中（position，margin-top: (-1/2宽度) transform: translateY(-50%)）
margin: 0 auto什么情况下生效
1.块级元素且指定宽度 2.position:absolute下不生效 3.浮动盒子失效
用过saas或less吗
类型转化 ‘123’ + 1 == ‘1231’
深拷贝：JSON.parse(JSON.stringify())的缺点
https://blog.csdn.net/u013565133/article/details/102819929
数组和对象类型判断
typeof不能判断，以下几种可以
instanceof
Object.prototype.toString.call
es6的方法——Array.isArray()
对象的constructor属性，var arr = [1,2,3,1];console.log(arr.constructor === Array)//true
useEffect多次执行或者不执行的情况
useCallback和useMemo
为什么父元素更新，子元素也会更新，什么原理
https://segmentfault.com/q/1010000011289209/a-1020000011289904

头条

实现一个注册监听方法
let event = new Event()
event.on(‘test’,cb)
event.once(‘test’,cb)
event.off(‘test’,cb)
event.trigger(‘test’)
给一个数组，[1,2,3,4,5] 实现数组的乱序
项目中比较难的问题是什么
你了解小程序是怎么运行的吗
react的diff算法
浏览器缓存
webpack打包流程

接下来脉脉上看到的上海公司的面试题，我也简单整理下答案

花旗

url输入后过程
dns解析将域名解析成ip地址，访问ip地址，通过tcp协议与服务端建立通信，发送http请求获取资源，服务端处理请求并返回http报文，浏览器解析渲染页面，之后断开连接。
根据html解析出dom树，根据css解析成CSSOM树，结合dom树和css规则树生成渲染树，计算每个节点信息，进行布局绘制
http是tcp哪一层
http是应用层，tcp是传输层，ip是网络层，还有一个链路层
css两边宽度固定，中间自适应
两边定宽，中间flex:1
两边左右浮动，中间width不写
两边定宽+position，中间margin缩进
calc计算
盒模型，一连串按钮从第五个开始点击后样式变化（用css解决）
:nth-child(n+5) :active :focus
函数声明式和函数表达式，介绍一下箭头函数
函数声明式，function a(){}
函数表达式，const a = function(){}
函数声明和表达式之间的差别是：JavaScript 解释器中存在一种变量声明被提升的机制，也就是说函数声明会被提升到作用域的最前面，即使写代码的时候是写在最后面，也还是会被提升至最前面。
而用函数表达式创建的函数是在运行时进行赋值，且要等到表达式赋值完成后才能调用
箭头函数，https://blog.csdn.net/marion_lau/article/details/112340931
版本控制，加入一个项目后怎么做
localstorage和cookie
localstorage h5新增，不兼容低版本浏览器，本地存储本地缓存，除非手动删除，否则一直存在
cookie 兼容各浏览器，需要和后台交互，可设置过期时间
介绍下跨域，nginx为什么跨域
浏览器的同源策略造成的，是浏览器对javascript施加的安全限制
同源策略：是指协议，域名，端口都要相同，其中有一个不同都会产生跨域
nginx实现跨域的原理，实际就是把前端项目和后端接口项目放到一个域中，这样就不存在跨域问题，然后根据请求地址去请求不同服务器(真正使用的服务器)
如何并发请求多个http，不用promise怎么弄，xhr多个请求结果没回来后续请求会接着发送吗
promise.all
spa页面，路由是如何实现的（不是vue）
hash
history
还有浏览器渲染过程

得物

js数据类型，如何判断数据类型
null undefined string number boolean object symbol
typeof instanceof Object.prototype.toString.call
闭包，防抖，节流以及应用场景
闭包外部函数可以访问其他函数内部变量作用域链 closure
防抖页面滚动获取top值
节流登录按钮
讲一下promise以及方法，race和all，all中有一个失败了会有怎样的结果
事件循环以及宏微任务介绍
单线程 eventloop 宏任务微任务一次循环中宏先于微
new操作后的过程
http2，http缓存
– 强缓存 expires过期时间 catch-control设置max-age表示请求缓存后多少秒内不再发起请求
– 协商缓存 catch-control设置no-catch
– if-modified-since last-modified
– etag if-not-match
– http0.9 只有get，只能响应html字符串
– http1.0 引入了post和head，每个tcp只能发送一个请求，发送完毕连接就关闭，请求其他资源需要重新建立连接，增加了数据格式content-type
– http1.1 新增方法put delete patch options，引入了持久连接，即tcp连接默认不关闭，不用声明connection:keep-alive，对同一个域名最大支持6个持久连接
– 同一个TCP连接里，所有的数据通信是按次序进行的。服务器只能顺序处理回应，前面的回应慢，会有许多请求排队，造成"队头堵塞"（Head-of-line blocking）
为避免上述问题，两种方法：一是减少请求数，二是同时多开持久连接
– http2.0 复用TCP连接，在一个连接里，客户端和浏览器都可以同时发送多个请求或回应，且不用按顺序一一对应，避免了“队头堵塞“,此双向的实时通信称为多工（Multiplexing）
引入头信息压缩机制（header compression）,头信息使用gzip或compress压缩后再发送；客户端和服务器同时维护一张头信息表，所有字段都会存入这个表，生成一个索引号，不发送同样字段，只发送索引号，提高速度
– http2.0 允许服务器未经请求，主动向客户端发送资源，即服务器推送（server push）
vue数据响应式
object.defineProperty
vue nextTick原理以及异步更新队列

招银

居中对齐
text-align:center —— 水平居中
margin：垂直 auto； —— 水平居中
display:flex;
justity-content:center;
align-items:center;
写代码字符串每四个隔开
var str = ‘20191202113759’;
var str=str.replace(/\s/g,‘’).replace(/(.{4})/g,"$1 ");
性能优化
输入url enter后过程
安全防护问题
服务端如何主动向客户端发送消息
轮询定时请求长连接 websocket
websocket实现原理
双向通信
https://www.ruanyifeng.com/blog/2017/05/websocket.html
项目中的问题

药明康德

介绍下事件委托，如何判断触发对象
input中v-model等价于什么
:value=“value” @input=“changeValue”
讲一下async和await
https://zhuanlan.zhihu.com/p/112081953

其他面试题记录

请用js去除字符串空格？
使用replace正则匹配的方法
str = str.replace(/\s*/g,“”);
str.trim()方法

你如何获取浏览器URL中查询字符串中的参数？
测试地址为：http://www.runoob.com/jquery/misc-trim.html?channelid=12333&name=xiaoming&age=23

function showWindowHref(){ 
  var sHref = window.location.href; 
  var args = sHref.split('?'); 
  if(args[0] == sHref){ 
    return ""; 
  } 
  var arr = args[1].split('&'); 
  var obj = {}; 
  for(var i = 0;i< arr.length;i++){ 
    var arg = arr[i].split('='); 
    obj[arg[0]] = arg[1]; 
  } 
  return obj;
} 
var href = showWindowHref(); // obj c
console.log(href['name']); // xiaoming

怎样添加、移除、移动、复制、创建和查找节点？

apply()/call()求数组最值

var numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(this, numbers); 
console.log(maxInNumbers); // 458
var maxInNumbers = Math.max.call(this,5, 458 , 120 , -215); 
console.log(maxInNumbers); // 458

数组去重
jquery相关
如何找到所有 HTML select 标签的选中项？
jquery中get()提交和post()提交有区别吗？
JS 的DOM 操作(Node节点获取及增删查改);
document.getElementById/ClassName/Name/TagName
// 追加
element.appendChild(Node);
// 删除
element.removeChild(Node);