假如您也和我一样,在准备春招。欢迎加我微信
shunwuyu
,这里有几百位一心去大厂的友友可以相互鼓励,分享信息,模拟面试,共读源码,齐刷算法,手撕面经。来吧,友友们!本文为旅梦开发团原创文章,
禁止转载
,违者必究.
全目录
打针哥的腾讯面试系列文章链接整理如下:
前言
刚开始的一两个大厂(哔哩哔哩/百度),打针哥可能还在春招热身,没有迅速拿下外,其余的基本都如集邮般拿下。
3月底拿下滴滴,直接拒,把我们这种手里只有中小厂,大厂还颗粒无收的孩子酸死。
4月中下旬拿下美团充电宝团队offer, 正准备黄袍加身,为爱发电时,腾讯抛出橄榄枝....
打针哥的前端面试
如果您也和我一样,想要抓住5月春招补录
的小尾巴,欢迎打卡之前的腾讯、面经。昨天,身边的很多小伙伴都收到了百度
、网易
、快手
的面试通知。腾讯考题确实问得非常细,面试官的穷追猛打,炼我百战百胜之金身!
三面面试题
1. 我今天面了很多同学啊,我看你们都是用这一套框架(vue3
+ pinia
+ element
), 你们为什么用这一套技术选型
- vue3 的composition api 相比于vue2 的选项式api, 不会因为一个模块分布于状态、计算属性、事件等来回跑,促进了逻辑重组与复用,增强代码可维护性,提高开发效率。
- vue3 hooks 帮助我们利用函数式编程思想复用有状态逻辑。
useRouter
、useStore
,vueUse
等hooks库和函数,用起来非常方便。 - vue 比react 好上手,所以先用vue 写了个。
- vuex
mutations
概念比较复杂,学习成本高,pinia
作为替代者,hooks函数式编写风格,代码更简洁易维护。 - element-ui 还是挺好用的,UI组件库都无所谓,用哪家的都行。
2. vue2中watch是怎么实现的
watch
功能可以监听状态的改变并执行特定的函数。比如我们可以利用watch
,更方便的实现用户表单时的校验。
通过监听data中属性变化,创建Watcher
实例,当数据变化时,触发Dep
通知Watcher
,执行对应handler函数,实现数据变化响应式更新。
3. vue3也同样实现了,它们有什么区别
Vue3中watch
作为函数使用,需在setup()
内定义,支持composition API,返回停止单个watch的函数;Vue2中watch
为对象配置方式,定义于选项API中,返回取消所有watcher的函数。
Vue3的watch底层基于Proxy实现,更精细的控制和响应式;Vue2使用Object.defineProperty,监控数据变化机制不同。
4. ts你是怎么理解的,相对于js有什么差异和优势
Typescript 是JS的超集,它有静态类型定义和一些高级功能。提升了代码的可读性、可维护性,特别是在大型项目中表现优异,减少运行时错误,增强代码可靠性,易于维护和重构。
静态类型系统
js是弱类型,而且变量的类型由值决定,在大型多人协作项目中有可能会被误操作,出现不可预知的错误。TS的类型约束,极大的减少了这种bug出现的可能,同时类型推导让代码写的又快又稳。
TS比js多了很多类型, 比如any , tuple 元组, enum 枚举,union 联合类型, type声明类型别名...
接口与类
支持更为完善的面向对象特性, 比如接口、泛型
泛型:允许编写可重用的组件,这些组件可以处理多种数据类型,提高了代码的灵活性和复用性。T, 数据类型传参
更强大的工具支持
比如VScode对 ts 支持很好, 本身就是ts 写出来的。
5. type 和 interface 的异同
两者都可以类型类义,但有以下区别
- interface 不支持原始数据类型, type 支持
- interface 支持继承, type不支持,但可组合
- interface 用于类的实现,type适合于各种类型定义
- interface 用于类的定义和约束, type 用于创建类型别名,简化复杂类型表达
- interface 是面向对象设计模式,面向接口编程的核心概念
6. .d.ts文件是干什么用的
.d.ts
文件是 TypeScript 中用于提供类型定义的特殊文件, d是define
的意思。当我们用的很多js 类库没有或需要增加类型声明时,可以在.d.ts
文件中声明。
// myLibrary.d.ts declare function doSomething(data: any): void;
7. 批量用any会带来什么后果,或者会有啥问题
使用any过多会削弱类型检查,导致潜在错误难以发现,降低代码质量和维护性。
8. 面试官:你的项目能不能挑几个比较难的地方给我讲讲,怎么解决的
中间件
手写了错误处理、排序、分页、鉴权等多个中间件
大文件上传
实现了分片上传、断点续传、秒传、文件校验、进度显示、错误处理
自定义hooks
useDebounce
,useFetchData
等hookstransformer.js nlp 任务
web workers 独立线程处理nlp 任务
瀑布流组件
9. 说到了css3实现动画的方式,问还有哪些实现动画的方式
- transition 过渡动画
- animation keyframes 动画
- JS style 要注意性能
- requestAnimationFrame 高性能动画循环
- SVG Animations 矢量图动画
- Canvas 边擦边画 CSS 动画运行在合成线程(compositor thread),与负责页面布局和JavaScript执行的主线程(main thread)分开。这意味着CSS动画可以独立进行,不会阻塞负责页面其他渲染和脚本执行的主线程。
通过JavaScript动态修改元素样式(如直接更改style
属性)通常发生在主线程,可能引发页面布局重新计算和重绘,从而影响性能。虽然使用requestAnimationFrame
可以优化JavaScript动画的时机,使其与浏览器渲染同步,但仍然涉及主线程操作,潜在地影响到整体性能。
10.看你引入了cdn,你是怎么理解cdn的
CDN是一种关键技术,用于加速内容传递,提高网站的可用性和性能,同时优化网络资源的使用效率,并增强安全性。
CDN是一种分布式网络服务, HTML、CSS、JavaScript文件、图片和视频等静态资源部署到多个服务器节点,做缓存和分发,传输距离更短,用户访问更快。
负载均衡 CDN还能实现负载均衡,自动分配请求给最合适的节点,防止单一服务器过载。
11.构建工具vite或webpack,构建出来的js或者一些文件的文件名都会带上一个哈希值或其他值
因为静态资源会被缓存,所以新构建出来的内容,要带上版本号或文件名中加入hash值,浏览器就会重新加载最新内容,并更新缓存。
12. 浏览器如何判断一个文件有没有缓存
浏览器通过解析HTTP头信息与遵循缓存策略,以及在不同缓存层级中查找,来确定一个文件是否已缓存以及是否需要更新。
如
Cache-Control
、Expires
、ETag
和Last-Modified
等。Cache-Control
指示了资源的缓存规则(如最大缓存时间),而Expires
指定了资源何时过期。ETag
和Last-Modified
用于验证已缓存内容的新鲜度。当浏览器再次请求该文件时,会在请求头中包含
If-None-Match
(对应ETag
)和If-Modified-Since
(对应Last-Modified
)字段,让服务器判断文件是否已改变。如果没有改变,服务器会返回一个304 Not Modified响应,告诉浏览器使用本地缓存。浏览器首先在内存缓存(memory cache)中查找,这是最快的数据访问层级。如果没找到,接着会在磁盘缓存(disk cache)中搜索。最后,如果在这些缓存中都找不到,才会发起网络请求。
13. 强缓存返回的http状态码是多少
强缓存不会发出网络请求,所以没有状态码。如果资源是从强缓存中获取的,浏览器网络面板通常会显示状态码200(OK)。
14. 自己实际项目有设置过强缓存吗
静态资源比如图片就设置了啊, 用的Cache-Control
app.use(express.static(path.join(__dirname, 'public'), {
maxAge: ONE_DAY_IN_MS, // 设置资源的最大缓存时间为1天
setHeaders: (res, path) => {
// 对特定类型资源单独设置更长的缓存时间,例如图片
if (path.endsWith('.jpg') || path.endsWith('.png')) {
res.setHeader('Cache-Control', `public, max-age=${7 * ONE_DAY_IN_MS}`); // 图片缓存一周
}
}
}));
15. 万一我的数据要变,怎么重新获取
- 可以通过Ajax请求获取,并在每次请求时附带时间戳或随机参数,避免浏览器使用缓存的响应
- 结合使用
ETag
或Last-Modified
,即使资源被强缓存,浏览器也会在请求头中发送If-None-Match
或If-Modified-Since
字段,让服务器决定资源是否已改变。
16. 移动端用的uniapp,问我uniapp提供了什么能力
uniapp 提供了跨端的能力,因为vue3 架构中,render层与其它层是分离的。 所以, 一份代码,可以生成h5, 小程序,native app。
17.了解github开源项目有哪些
- vue3 看源码
- 996.icu 哈哈哈
- wtf-langchain AI的一些内容
18. 问打针哥是不是有offer
必需的, 大厂问这个问题,就看你是否被他认为配得上的对手,竞争你。
如果没有, 你也别怂, 未来一定会有的,先说出去。
19. 最后问了下成绩怎么样
打针哥优秀的很, 三年机房管理员, 天天调代码,维护机器,专业排名前5%, 各种优秀荣誉。
hr面
闲聊,聊学习历程,项目历程,遇到问题如何解决
特别喜欢技术主导型公司,hr没有那么伶牙俐齿,关怀的更多一些....
打针哥就是聊怎么学习,对AI的喜爱,未来1-3年的职业规划, 自己特别能抗压啥的....
总结
别人的五一是特种兵,恋爱曲,我的五一闭关,向打针哥学习。
努力到极致,上天降好运, 那个属于我的大厂offer, 快来碗里吧。
近两万字的打针哥腾讯面试题系列, 到此完结!
点个赞呗。