假如您也和我一样，在准备春招。欢迎加我微信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等hooks

• transformer.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, 快来碗里吧。

近两万字的打针哥腾讯面试题系列， 到此完结！

点个赞呗。