腾讯 前端 秋招面经(凉)

八月中开始陆陆续续面到这周,基本都是一面挂,最好的是到了二面,之后应该是和藤子无缘了,整理一下记录的面经

IEG 一面

面试官一直在试探我的后端水平,前端问了几个八股,拷打了一下项目,然后开始问会什么后端语言,掌握程度如何,后端如何做负载均衡(我只知道可以配 Nginx 的 upstream 字段,面试官似乎不太满意),然后追问有什么负载均衡集群的实现技术和算法(不知道,GG)。感觉是想要全栈型人才,在表现出我对后端知识掌握的匮乏程度后面试官对我也没什么兴趣了。

第二天挂。

CDG 金融科技 一面

80 min

发挥最好的一集,基本都打上来了,可惜还是挂了,应该是手撕没做好。

  • 自我介绍
  • 简历、项目拷打
  • monorepo(解决 npm 管理的一种方案)
  • 对 vue 和 react 的体感和理解,底层原理
  • vue2 和 vue3 怎么实现响应式
  • vue2 使用 defineProperty 有什么问题(数组)
  • react 响应式(×)
  • (项目)用户权限管理怎么做的(JWT)
  • JWT 有什么优点,有什么缺点
  • JWT 过期时间可以更改吗?
  • 前端性能优化
  • CDN 原理,CDN 预热
  • 图片转 base64 后会变大多少
  • 如何监控前端错误,上报时携带什么信息
  • 自动埋点怎么做
  • http2 特点,为什么能做到多路复用
  • http3
  • http1 和 http1.1 的区别(缓存策略)
  • 前端工程化
  • webpack 的 loader 和 plugin
  • web 安全,详细介绍原理,如何避免
  • 算法题:合并有序数组,要求时间复杂度O(m+n),空间复杂度O(1)
  • 写代码的时候因为开辟了一个新数组被叫停了
  • 面试官让我再审题然后说思路,我说可以用双指针,面试官想了想说也行不过会很麻烦
  • 正确的做法应该是从末尾逐个比较(有点紧张没想到
  • 反问

第二天挂。

PCG 一面

110 min

最恐怖的一集,每一个八股面试官都会追问,细问底层原理,直到答不出来为止。简历上的项目也会深挖细节。

  • 自我介绍有专门的课程教前端吗
  • typeof [] 输出,[].constructor 输出
  • 为什么两个结果不一样
  • 怎样判断一个变量是不是数组
  • 答:instanceof(×,只能用来判断是不是某个对象的实例);Object.prototype.toString.call
  • 判断输出:
var x = 10;
var foo = {
	x: 20,
	bar: function () {
		var x = 30;
		return this.x;
	}
}

foo.bar();
foo.bar.call(window);
foo.bar.call(foo);

// 20
// 10
// 20
  • 如何阻止<a>标签跳转?(Event: preventDefault)
  • 事件委托
  • 判断输出:(答案说对了,但是没有解释出来为什么 4 会被打印,即为什么 resolve 之后的代码会执行:因为没有 return)
console.log(1);
setTimeout(function () {
	console.log(2);
}, 0);
new Promise(function (resolve) {
	console.log(3);
	for (var i = 0; i < 100; i++) {
		i === 99 && resolve();
	}
	console.log(4);
}).then(function () {
	console.log(5);
});
console.log(6);

// 1 3 4 6 5 2
  • js 中什么是进程、线程、协程(没有理解题意,后来面试官补充说可以在 node 环境下说明,没了解过,寄)
  • 写正则匹配字符串,要求:1. 首位必须是大写字母;2. 整个字符串由 3-15 位字母、数字或下划线组成
const reg = /^[A-Z][A-Za-z0-9_]{2,14}/
  • 追问:平时写复杂正则有什么好办法(答:在线校验工具)
  • display: inline、block、inline-block 的区别
  • visibility: hidden 和 display: none 的区别
  • 平时有写一些 api 接口吗?(python)
  • 举例说明常见 http 状态码有哪些,301、302、401、403、304 代表什么含义
  • 304 是如何对是否使用缓存进行校验的
  • 强缓存和协商缓存的字段之间有什么区别
  • Last-Modified / If-Modified-Since 使用时间有什么问题(答:秒级的误差、文件被编辑器打开不一定内容发生变化)
  • 面试官对回答不满意,最后想到使用日期格式的字符串可能有时区误差
  • 看 css 代码说样式
{ margin: 0px 20px 10px; }			// 上 0,左右 20,下 10
{ margin: 0px 20px 5px 10px; }		// 上 0,右 20,下 5,左 10
  • css 怎样实现一个九宫格,不允许使用 table
  • 一开始答的是 flex + flex-wrap,新增要求:弹性,中间有 gap
  • 后来回答 grid(属性名和值忘了,但是被我蒙对了)
.grid-container {
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, 1fr);
}
  • 项目中有用过 grid吗(没有),那怎么学的(看文档,有些特殊场景比较有用),比如什么场景呢?(答:比如刚才那个题目。双双难绷
  • 编程题,数字转汉字,没写出来,稍微讲了一下思路
  • 普通函数和箭头函数有什么区别(答:没有 this、没有 arguments、没有 prototype)
  • 回答的不是面试官想问的,追问:它们行为上有什么区别(变量提升)
  • js 跨域,怎么解决(八股+乱答一气,然后挖坑了)
  • iframe 怎么解决
  • 追问 postMessage 的用法
  • 追问 BroadcastChannel 的用法
  • 介绍自己的项目
  • 使用模块联邦后线上出问题怎么办
  • 国际化怎么做的(不同国家不同域名)
  • 被一顿质疑,然后基于简历内容扩展追问
  • 怎么捕获全局异常,怎么捕获资源加载异常,怎么捕获 CDN 加载异常
  • 低代码平台怎么处理样式联动,比如 A 组件的显示取决于 B 组件的选项值
  • IntersectionObserver 怎么用
  • IndexDB 用法
  • 大小有什么限制(没了解过,后来查了一下,一般不小于 250M,最大不超过磁盘的一半,否则会触发删除)
  • 有哪些写入方法
  • 怎么进行错误处理
  • 反问

PCG 二面

由于以为上一面寄了所以也没有准备复习,结果上一面很奇迹的过了,但是运气也彻底用光了,表现得很烂

没有记录,第二天挂。

总结

藤子是我秋招第一个约面的公司,可以说帮助我打响了秋招第一枪,可惜由于没有准备好,一直是屡战屡败。机会总是留给有准备的人,菜就多练。现在藤子也不约面了,应该是最后一次表现得太差了把面评弄脏了,希望补录的时候还有机会吧。大家秋招都很辛苦,祝愿我们都能拿到心仪的 offer。

#前端##腾讯##秋招##面经#
全部评论
搞什么,react哪来的响应式一说啊,他底层都用的是不可变的数据,快照保存状态,哪来的响应式啊,vue用的可变的数据才有响应式啊
3 回复 分享
发布于 2024-10-20 16:19 浙江
一姬可爱捏 感谢面筋查缺补漏了
2 回复 分享
发布于 2024-10-20 17:03 四川

相关推荐

06-14 01:40
已编辑
南昌大学 前端工程师
没有自我介绍,直接从项目开始结合八股开始介绍一下项目1.&nbsp;你对&nbsp;React&nbsp;底层有了解过吗我以为这是在问我有没有看过&nbsp;React&nbsp;源码,开始还有点想放弃回答的,后来我硬着头皮开始讲声明式编程,组件化之类的。。。突然觉得不管怎么样,我觉得都可以讲讲和这些东西沾点边的,起码让面试官了解你知道什么吧哈哈(仅个人观点)2.&nbsp;讲讲&nbsp;React&nbsp;的生命周期3.&nbsp;刚才你在讲生命周期时提到了&nbsp;useEffect&nbsp;依赖数组不为空的情况,如果我想进行数据请求这些操作应该怎么处理依赖数组呢4.&nbsp;那么你还用过什么其他的&nbsp;hooks&nbsp;吗5.&nbsp;useCallback&nbsp;和&nbsp;useMemo&nbsp;之间的区别6.&nbsp;组件之间的通信我只讲了父组件向子组件之间的&nbsp;props&nbsp;传递和状态提升进行子组件之间同一变量状态的同步7.&nbsp;那么如果我不想使用状态提升应该怎么办呢我说可以使用&nbsp;forwardRef&nbsp;和&nbsp;useImperative&nbsp;hooks&nbsp;来实现将子组件中特定&nbsp;DOM&nbsp;元素暴露给父组件还有一些状态管理工具&nbsp;zustand,Redux8.&nbsp;有使用过&nbsp;Redux&nbsp;吗9.&nbsp;你的项目中有使用过&nbsp;antd,讲讲你对它的一些看法这里有点尴尬了,我一直以为只能`npm&nbsp;install&nbsp;antd`将所有的组件的下载,但是面试官说我玩的不够溜实际也可以向&nbsp;Shadcn&nbsp;UI&nbsp;一样实现按需下载10.&nbsp;你的&nbsp;webpack&nbsp;是怎么配置的,是使用了默认配置吗,还是使用了自己的配置呢11.&nbsp;你是如何实现的自动化部署呢(这个问题我觉得还挺频繁的,基本只要看了我的简历的面试官都问了,得仔细总结一下这个问题)12.&nbsp;你使用过&nbsp;vite&nbsp;和&nbsp;webpack,这两者你觉得有什么区别呢我个人只从了开发环境下和一些其他小的方面的区别进行讲述,后来面试结束觉得可以再深入讲讲13.&nbsp;你写到你会&nbsp;flex&nbsp;讲讲&nbsp;flex&nbsp;的一些常见属性14.&nbsp;我有一个盒子,左侧元素在屏幕缩放时不变,右侧元素会按照缩放而变化15.&nbsp;Sass&nbsp;的使用感受16.&nbsp;Sass&nbsp;中样式的深度嵌套应该怎么写(应该是好奇发问,面试官应该没用过&nbsp;Sass)17.&nbsp;使用过的&nbsp;git&nbsp;的常见命令18.&nbsp;合作开发中遇到冲突怎么解决19.&nbsp;git&nbsp;rebase&nbsp;和&nbsp;git&nbsp;merge&nbsp;之间的区别20.&nbsp;你为什么会觉得&nbsp;git&nbsp;merge&nbsp;会比&nbsp;git&nbsp;rebase&nbsp;更适合合作开发21.&nbsp;你做过一些外包项目,这些项目是什么Hugo,PHP&nbsp;然后面试官听到我写过&nbsp;PHP&nbsp;再那里笑了好久:“哈哈哈,PHP,世界上最好的语言”貌似没了,然后写了一道很简单的算法这几次面试下来,我觉得我自己在知识方面上有进步之外,我也渐渐体会到了如何去把握面试节奏,面试不应该是一场严肃的知识问答而是一场畅快的技术交流。要去引导面试官问你会的问题,可以在对一个问题的讲解时将另一个(你熟悉的)知识点进行相关联,这样的话大概率面试官会去你问你提到的另外一个知识点,来把握面试节奏。当然我还是一个小白,只是将自己的理解分享,也希望给大家带来帮助
查看44道真题和解析
点赞 评论 收藏
分享
字节跳动Data&nbsp;AML部门前端实习一面面经本次面试时长1小时,主要涵盖项目经历、技术原理、基础知识和算法编程等方面,具体内容如下:一、项目经历面试官首先询问了实习项目相关内容,围绕项目背景、技术实现、遇到的问题及解决方案展开交流,考察对实际项目的参与度与理解深度。二、Suspense原理及实现1.&nbsp;原理:Suspense&nbsp;是&nbsp;React&nbsp;用于处理异步渲染的组件,可在数据加载或组件渲染完成前展示加载指示器,提升用户体验。2.&nbsp;实现方式:被问到在&nbsp;useEffect&nbsp;中存在&nbsp;fetch&nbsp;请求时,如何让顶层组件感知组件存在异步请求。回答可通过&nbsp;React&nbsp;Context&nbsp;实现信息透传,但存在更优方案,可从&nbsp;React&nbsp;的新特性或状态管理库角度进一步优化&nbsp;。三、JS基础1.&nbsp;var、let和const的区别:var&nbsp;存在变量提升,会导致变量在声明前可被访问;let&nbsp;和&nbsp;const&nbsp;具有块级作用域,更加安全。2.&nbsp;var逐渐被弃用原因:var&nbsp;没有块级作用域,在复杂代码中容易引发变量覆盖等意外问题,使用&nbsp;let&nbsp;和&nbsp;const&nbsp;可避免此类风险,提高代码的可读性和稳定性。四、CSS基础1.&nbsp;三列瀑布布局(两边固定,中间自适应):纯CSS可通过浮动或绝对定位实现;使用flex布局更优雅,flex:&nbsp;1&nbsp;表示该元素会自动分配剩余空间。2.&nbsp;flex常用属性:主要涉及主轴和横轴方向设置,如&nbsp;flex-direction&nbsp;定义主轴方向;常用的居中属性包括&nbsp;justify-content:&nbsp;center(主轴居中)和&nbsp;align-items:&nbsp;center(交叉轴居中)&nbsp;。3.&nbsp;CSS动画:通过&nbsp;animation&nbsp;属性实现,配合关键帧&nbsp;@keyframes&nbsp;定义动画的起始和结束状态、变化函数(如线性变化)以及时间等参数。animation&nbsp;在渲染进程的合成线程执行,不会阻塞JS执行,效率较高。五、算法编程题1.&nbsp;合并有序链表//&nbsp;定义链表节点结构function&nbsp;ListNode(val,&nbsp;next)&nbsp;{this.val&nbsp;=&nbsp;(val&nbsp;===&nbsp;undefined?&nbsp;0&nbsp;:&nbsp;val);this.next&nbsp;=&nbsp;(next&nbsp;===&nbsp;undefined?&nbsp;null&nbsp;:&nbsp;next);}var&nbsp;mergeTwoLists&nbsp;=&nbsp;function(l1,&nbsp;l2)&nbsp;{const&nbsp;dummy&nbsp;=&nbsp;new&nbsp;ListNode(0);let&nbsp;current&nbsp;=&nbsp;dummy;while&nbsp;(l1&nbsp;&amp;amp;&amp;amp;&nbsp;l2)&nbsp;{if&nbsp;(l1.val&nbsp;&amp;lt;&nbsp;l2.val)&nbsp;{current.next&nbsp;=&nbsp;l1;l1&nbsp;=&nbsp;l1.next;}&nbsp;else&nbsp;{current.next&nbsp;=&nbsp;l2;l2&nbsp;=&nbsp;l2.next;}current&nbsp;=&nbsp;current.next;}current.next&nbsp;=&nbsp;l1&nbsp;||&nbsp;l2;return&nbsp;dummy.next;};2.&nbsp;二叉树寻找公共父节点(节点有parent指针)function&nbsp;lowestCommonAncestor(p,&nbsp;q)&nbsp;{const&nbsp;set&nbsp;=&nbsp;new&nbsp;Set();while&nbsp;(p)&nbsp;{set.add(p);p&nbsp;=&nbsp;p.parent;}while&nbsp;(q)&nbsp;{if&nbsp;(set.has(q))&nbsp;{return&nbsp;q;}q&nbsp;=&nbsp;q.parent;}}3.&nbsp;实现sum函数curry化
查看11道真题和解析
点赞 评论 收藏
分享
评论
29
85
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务