缘缘堂

Appearance

腾讯前端面试集锦 ​

本文档汇总了腾讯前端面试的真实题目和经历，涵盖WXG、普通部门等多个面试场景，适用于准备腾讯前端面试的候选人参考。

目录 ​

面试题目汇总 ​

一、网络协议 ​

1. TCP相关 ​

  1. TCP连接中的四次挥手流程是怎样的？
  2. TCP三次握手的过程是怎样的？
  3. TCP如何实现可靠传输？
  4. TCP和UDP的区别是什么？应用场景是什么？
  5. 你觉得微信聊天中哪些功能是UDP哪些是TCP？
  6. http2怎么通过streamID实现多路复用？
  7. 为什么http2不能完全解决队头阻塞，而http3却可以？

2. HTTP/HTTPS ​

  1. HTTP协议中常见的状态码有哪些，分别代表什么含义？
  2. HTTP与HTTPS协议有哪些主要区别？
  3. HTTP/1.0、HTTP/1.1和HTTP/2.0之间有哪些重要的改进和差异？
  4. HTTP/1.0、HTTP/1.1、HTTP/2之间有哪些主要区别？
  5. HTTP/2除了多路复用，还有哪些优点？
  6. HTTP2了解过吗？contentLength了解过吗？
  7. keepalive模式下为什么需要传contentLength字段？
  8. HTTP3了解过吗？
  9. 启用http2需要在nginx中做哪些配置？
  10. HTTPS数字证书交换的过程详细说一下？
  11. HTTPS网站证书是怎么获取的？
  12. 怎么验证权威机构颁发的证书是真的？
  13. nginx是怎么配置https的？
  14. https了解过吗？

3. 浏览器相关 ​

  1. 描述从浏览器地址栏输入URL到页面完整呈现的整个过程？
  2. 描述一下浏览器缓存机制？
  3. 浏览器有哪些常见的缓存策略？
  4. 介绍一下CDN的工作原理和应用场景？
  5. 为什么bilibili、百度这些网站的html页面不做缓存？

4. WebSocket ​

  1. HTTP和WebSocket的区别？
  2. 实时协作编辑使用什么协议？
  3. WebSocket怎么建立的？和HTTP的关系
  4. WebSocket有没有同源限制？
  5. WebSocket的使用场景（socket.io降级）？

5. 其他 ​

  1. 除了HTTP还用过什么应用层协议？
  2. 解释HTTP请求和响应的过程，以及关键组成部分

二、前端安全 ​

1. XSS攻击 ​

  1. 常见的Web安全攻击有哪些，如何防范跨站脚本攻击(XSS)？
  2. 前端常见的攻击方式有哪些？
  3. 针对这些前端攻击，有哪些防范手段？

2. CSRF攻击 ​

  1. Token如何防范CSRF攻击？
  2. 讲解CSRF
  3. 前端安全防范措施？xss攻击和csrf攻击？

3. 其他安全 ​

  1. JWT相对Cookie在安全性上有什么优势，即便JWT也放在请求头中传输？
  2. 在前端开发中，如何有效防范常见的安全漏洞，表单验证的最佳实践是什么？
  3. 有哪些常见的web攻击？ddos攻击怎么防御？
  4. 为甚么要有同源策略？
  5. 描述同源策略，以及如何解决跨域问题

三、跨域与缓存 ​

1. 跨域 ​

  1. 常见的跨域解决方案有哪些？
  2. 在实际项目中，你使用过CORS吗？具体应用场景是怎样的？
  3. 简单请求？跨域？

2. 缓存 ​

  1. 解释缓存和缓冲的概念及异同？
  2. 缓存相关（对比缓存？强缓存？对应请求头）
  3. cookie有哪些属性？

四、JavaScript基础 ​

1. 原型与继承 ​

  1. 说说对OOP的理解
  2. 在JS中如何实现多重继承？
  3. 说一下原型链，原型链实现继承
  4. 如何理解原型链？

2. 闭包与作用域 ​

  1. 闭包
  2. 闭包的理解
  3. 什么是变量提升
  4. 说说对闭包的理解

3. 事件循环 ​

  1. 分析以下代码，说明其输出结果，并解释JavaScript事件循环机制？
  2. setTimeout(0)和promise.then()区别
  3. vue中nextTick的实现，结合浏览器事件循环机制说一下？
  4. node的事件循环机制？

4. ES6特性 ​

  1. es6中的set（集合）和map（字典）的使用和对应的数据结构
  2. async和await在es5的浏览器中是怎么实现兼容的？polyfill了解过吗？
  3. Promise的工作原理，以及与传统回调函数的区别
  4. 描述一下TypeScript泛型的概念及应用？

5. 数据类型与方法 ​

  1. 各种原生方法的使用，基本类型和引用类型
  2. JS基本数据类型有哪些？

6. 算法与数据结构 ​

  1. 排序的实现
  2. 了解哪些排序算法？
  3. 说一下快排的实现思路
  4. 解释快速排序的原理和时间复杂度？
  5. 数组的sort排序算法
  6. 快排原理
  7. 如何实现查找字符串中最长不重复子串的算法？
  8. 如何将一个扁平化的数组结构转换为树形结构？
  9. 实现一个LRU缓存机制

五、CSS与渲染 ​

1. CSS基础 ​

  1. bfc布局规则
  2. 什么是盒模型？
  3. grid相比flex有哪些优点？
  4. 新版本的浏览器flex有gap属性吗？
  5. grid布局怎么处理兼容性？

2. 性能优化 ​

  1. 阐述重绘（Repaint）和重排（Reflow）的概念及其对性能的影响？
  2. 什么情况下会引发重绘？
  3. SVG与Canvas在渲染机制、性能表现以及各自的潜在优劣方面有何区别？
  4. 是否使用过Canvas技术进行开发？

3. 移动端适配 ​

  1. 项目怎么做的移动端适配？
  2. flexible原理
  3. 移动端的1像素问题怎么解决
  4. 有开发过移动端吗？
  5. 移动端常见的点击穿透怎么解决？
  6. css像素比有了解过吗？
  7. 安卓怎么兼容0.5px边框？
  8. 如果让你写一个自动转换0.5px边框的loader，该loader能自动将0.5px边框转换成安卓兼容的样式，你会怎么实现，简单说说思路

4. 其他 ​

  1. 拖拽功能有实现过吗？
  2. relative定位和transform都是视觉上的偏移，那他们有什么不一样的地方？
  3. 访问元素的top属性会不会引起回流？
  4. 对于这种2d平面的transform动画有没有什么手段开启gpu加速优化它？

六、Vue框架 ​

1. Vue基础 ​

  1. 你熟悉的框架(vue)，如何学习框架，vue的特点，vue的生命周期
  2. Vue的生命周期钩子有哪些？
  3. 用vue遇到的性能问题
  4. 在vue项目中如何设置统一的头部字段

2. Vue原理 ​

  1. 介绍一下Vue的内部机制
  2. Vue 2和Vue3双向绑定原理有何不同？
  3. Vue 3为何选择使用Proxy实现响应式？
  4. Vue数据响应式的原理？
  5. vue中nextTick的实现，结合浏览器事件循环机制说一下？
  6. 你对Vue源码的理解程度如何？

3. 虚拟DOM与Diff算法 ​

  1. 说一下对虚拟DOM的理解
  2. Diff算法的具体比较过程？
  3. 怎么看待virtual dom？ast语法树了解吗？
  4. vue diff？

4. 计算属性与监听 ​

  1. vue computed和watch区别？
  2. computed怎么实现的缓存（dirty）？

5. Vue3新特性 ​

  1. vue3双向数据绑定实现？createRender？
  2. 和vue2有哪些不同，提到了函数式编程，说下对函数式编程对的理解

6. 其他 ​

  1. vue-loader做了哪些事情？

七、工程化与构建工具 ​

1. Webpack ​

  1. 你对构建工具的理解
  2. Webpack插件的工作机制是怎样的？
  3. Webpack的构建工作流程是怎样的？
  4. 在Webpack中如何实现代码分割？
  5. 路由懒加载的实现原理是怎样的？
  6. 如何优化Webpack的打包速度？
  7. 项目中是否用过哪些loader？plugin？
  8. 你写的这个插件实现了什么？怎么实现的？
  9. sourcemap原理知道吗？

2. Vite ​

  1. 是否使用过Vite？
  2. Vite为何能够实现更快的开发构建速度？

3. 其他 ​

  1. 打包工具都用过哪些？

八、Node.js ​

1. Node基础 ​

  1. node相关问题，node的事件循环机制？
  2. stream两种模式的区别？
  3. 看过koa源码都会觉得和express有很大不同，说一下？

九、小程序 ​

1. 小程序基础 ​

  1. 你写过小程序，说下和写vue有什么区别？
  2. 对小程序的了解？从技术上讲
  3. 小程序有什么问题或有什么建议？
  4. 小程序与网页开发的区别

2. 小程序API ​

  1. 小程序中setData会有性能问题？
  2. jsbridge？

十、其他技术 ​

1. 微前端 ​

  1. 看你项目里有写微前端，使用的是哪种微前端框架？
  2. 微前端对比iframe有哪些优势？
  3. qiankun框架怎么实现多应用场景下的js隔离？

2. PWA与ServiceWorker ​

  1. servicework和webwork了解吗？
  2. work的使用需要做webpack配置吗？
  3. pwa应用怎么做离线提交？
  4. 前端有监听断网联网状态的事件有了解过吗？
  5. localStorage大小是多少？
  6. 如果前端要持久化图片这种比较大的资源怎么办？

3. WebWorker ​

  1. 你对Web Worker的理解是什么？

4. 低代码 ​

  1. 说说你对低代码的了解

5. 云原生 ​

  1. 说说对云原生的理解

6. Nginx ​

  1. 介绍一下Nginx及其在项目中的应用？

十一、项目与经验 ​

1. 项目经验 ​

  1. 介绍一下一个项目经验？
  2. 在开发个人项目的时候用到了哪些工具？
  3. 为什么要做这个项目？
  4. 前后端如何交互？
  5. 项目中，业务数据的传输形式是什么？
  6. 项目是如何进行部署的？

2. 项目优化 ​

  1. 在项目中具体应用了哪些性能优化方法，这些优化策略是否都是独立思考并实现的？
  2. 项目中是否实现了分片上传功能？
  3. 首屏加载时间怎么优化？
  4. 首屏加载fcp、lcp指标有了解过吗？
  5. ssr和预渲染有什么区别？

3. 难点与解决 ​

  1. 实习做了什么？遇到过什么难点？是怎么解决的？
  2. 如果程序出现错误，调试思路和解决方法是怎样的？

十二、算法题 ​

1. 数组与字符串 ​

  1. 实现一个函数，接受数组作为参数，数组元素为整数或者数组（数组里面还可能有数组），函数返回扁平化后的数组。要求给出不使用递归、不使用字符串处理的解法
    • 如：输入 [1, [2, [ [3, 4], 5, []], 6]]，输出 [1, 2, 3, 4, 5, 6]
  2. 假设有一个升序数组，经过不确定长度的偏移，得到一个新的数组，我们称为循环升序数组。（例：[0,3,4,6,7] 可能变成 [6,7,0,3,4]）。给定一个数字和一个循环升序数组，判断这个数字是否在这个数组内，在的话返回 true，否则返回 false。要求时间复杂度 O(logN)
    • 示例1：输入：nums = [6,7,0,3,4], target = 0，输出：true
    • 示例2：输入：nums = [6,7,0,3,4], target = 2，输出：false

2. 并发与请求 ​

  1. 设计一个函数，用于测试请求一个 URL 的平均耗时。要求可以设置总的请求次数以及并发请求个数。假设环境是小程序，使用的接口是 wx.request ，不考虑请求失败的情况

3. 动态规划 ​

  1. 一只青蛙一次可以跳上1级台阶，也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法
  2. 爬楼梯
  3. 打家劫舍 III
  4. 三数之和的变形题
  5. 组合问题
  6. 图相关的题目

4. 搜索与查找 ​

  1. 搜索二维矩阵

5. 字符串处理 ​

  1. 猴子吃香蕉
  2. 回文字符串个数（这道题出现频率很高，朋友面试的时候也遇到了，最长回文子字符串）

6. 树与堆 ​

  1. 堆和栈的区别，哪一个需要程序员控制？
  2. 给你一个数组，把他变成大顶堆/小顶堆

7. 手写题 ​

  1. 手写bind
  2. 手写简版promise，基础架子，不用写all、race等api
  3. 手写代码函数柯里化和数组转树

十三、个人问题 ​

1. 自我介绍 ​

  1. 自我介绍一下？
  2. 自我介绍和项目介绍

2. 个人评价 ​

  1. 个人在技术能力或职业发展方面，相较于他人有哪些突出的优势和需要改进的劣势？
  2. 自我评价一下
  3. 你觉得有哪些优点？
  4. 周围人对你的评价
  5. 你遇到的难题

3. 学习与成长 ​

  1. LeetCode刷题数量大概是多少，是否有偏好的题目类型？
  2. 怎么学习前端的？
  3. 抗压能力如何？
  4. 最近在看什么新东西吗？
  5. 为什么要离职？怎么学习的？
  6. 你遇到问题是更喜欢自己找答案还是去问别人？
  7. 平时花在写代码上的时间多吗？

4. 背景信息 ​

  1. 方便介绍一下籍贯和教育背景吗？
  2. 家在哪里？
  3. 家住哪？

5. 其他 ​

  1. 有什么问题想向我们提问吗？
  2. 有什么问题吗？
  3. mySQL了解吗？
  4. 实习周期？
  5. 平时关注哪些技术论坛？
  6. 有写技术博客的习惯吗？
  7. 平时有什么爱好？
  8. 在访问国外网站时，你遇到过哪些问题？你是如何解决的？

完整面试经历 ​

一、WXG部门面经（失败案例） ​

面试信息 ​

  • 面试部门：WXG（微信小店团队）
  • 面试轮次：一面（直接挂）
  • 面试方式：电话面试
  • 面试时长：1小时20分钟（笔试题1小时+面试20分钟）
  • 主要业务：微信小店，包括售后、物流、客服等功能
  • 技术栈：小程序、Node.js、Vue都有涉及
  • 工作节奏：一般早上10点，晚上可能也是9点多、10点

面试特点 ​

  • 一上来直接4道笔试题，时间1小时
  • 非常重视算法能力，是硬性要求
  • 要求尽量用效率更高的方法解题

笔试题目（一小时） ​

  1. 题目1：三数之和的变形题
  2. 题目2：组合问题
  3. 题目3：图相关的题目
  4. 题目4：打家劫舍 III（动态规划）

面试官反馈 ​

  • 做了一个小时20分钟左右，面试官问了每一道题的思路和想法
  • 第一轮面试主要就是考察算法的基础能力
  • 倒不是说在日常工作中需要直接用到算法
  • 这是数据结构里面最基础的算法
  • 考察的是在日常代码里面，有一些算法思维在里面
  • 当你知道怎么去评估时间复杂度，以及怎么用算法思维解决日常代码遇到的问题后，写出来的代码效率会更高，会高很多，有时候是数量级的提升
  • 这个在性能优化方面其实是比较有优势的
  • 所以这4道题在我们看来都是考基础能力
  • 目前看来跟要求还是有一定差距的

面试总结 ​

  • 难度等级：⭐⭐⭐⭐⭐（极高）
  • 挂掉原因：算法能力不足
  • 准备建议：重点刷LeetCode，特别是动态规划、图、树相关题目

二、WXG部门面经（成功案例 - 6轮） ​

面试信息 ​

  • 面试部门：WXG开平（开发平台基础部）小程序中心
  • 面试轮次：6轮 = 3轮部门技术面 + 2轮面委面 + 1轮HR面
  • 面试结果：拿到Offer
  • 作者背景：前端小哥，秋招拿下BATTM等10家大厂offer

前言 ​

  • wxg的总部在广州，深圳也有分部，成都有企业微信，北京的微信分部人比较少，主要做算法
  • wxg以门槛高、hc少、年终奖多而著称
  • 微信是统招统分，只有到次年1月中下旬才能知道最终分配的部门，但一般来说就是前几轮面试官所在的部门
  • 面委全称是面试委员会，汇集了微信事业群很多技术大佬，面委面试主要是为了保证wxg招聘的公平公正，严格把关每一个wxg的候选人
  • wxg对算法题要求比较高，推荐大家把CodeTop上边wxg的题目刷一遍
  • CodeTop：https://codetop.cc

一面（部门技术面） ​

  • 时长：60min写代码，写完后电话交流
题目1：数组扁平化 ​

实现一个函数，接受数组作为参数，数组元素为整数或者数组（数组里面还可能有数组），函数返回扁平化后的数组。要求给出不使用递归、不使用字符串处理的解法

javascript
// 输入：[1, [2, [ [3, 4], 5, []], 6]]
// 输出：[1, 2, 3, 4, 5, 6]
题目2：循环升序数组查找 ​

假设有一个升序数组，经过不确定长度的偏移，得到一个新的数组，我们称为循环升序数组。（例：[0,3,4,6,7] 可能变成 [6,7,0,3,4]）。给定一个数字和一个循环升序数组，判断这个数字是否在这个数组内，在的话返回 true，否则返回 false。要求时间复杂度 O(logN)

javascript
// 示例1：
// 输入：nums = [6,7,0,3,4], target = 0
// 输出：true

// 示例2：
// 输入：nums = [6,7,0,3,4], target = 2
// 输出：false
题目3：并发请求测试 ​

设计一个函数，用于测试请求一个 URL 的平均耗时。要求可以设置总的请求次数以及并发请求个数。假设环境是小程序，使用的接口是 wx.request ，不考虑请求失败的情况

javascript
// wx.request调用示例：
wx.request({
  url: 'https://qq.com',
  success() {
    // 请求完成
  }
})
其他问题 ​
  • setTimeout(0)和promise.then()区别
  • 实时协作编辑使用什么协议？
  • WebSocket怎么建立的？和HTTP的关系
  • WebSocket有没有同源限制？
  • 后边都是聊项目

二面（部门技术面） ​

  • 聊项目和实习
  • 对小程序的了解？从技术上讲
  • 小程序有什么问题或有什么建议？

三面（部门技术面） ​

  • 聊项目
  • 讲解CSRF

四面（面委一面） ​

  • 时长：30min做题，写完腾讯会议交流
题目1：闭包与事件循环 ​
javascript
for (var i = 0; i < 4; i++) {
  setTimeout(function() {
    console.log(i);
  }, 300);
}

请问打印结果是？

题目2：爬楼梯 ​

一只青蛙一次可以跳上1级台阶，也可以跳上2级。求该青蛙跳上一个n级的台阶总共有多少种跳法

题目3：闭包嵌套 ​
javascript
function test(a,b) {
  console.log(b)
  return {
    test:function(c){
      return test(c,a);
    }
  };
}
var retA = test(0);
retA.test(2);
retA.test(4);
retA.test(8);
var retB = test(0).test(2).test(4).test(8);
var retC = test('good').test('bad');
retC.test('good');
retC.test('bad');

请问打印结果是？

先讲题，再聊项目 ​

五面（面委二面） ​

  • 小程序与网页开发的区别
  • Babel转译原理
  • 数组的sort排序算法
  • 快排原理

六面（HR面） ​

  • 周围人对你的评价
  • 你遇到的难题
  • 微信是统招统分，如果你被分到了你不太想去的部门（边缘部门），你会怎么做

三、完整的三轮面试经历 ​

一面（电话面试） ​

CSS与JS基础 ​
  1. 各种css js基础相关问题
    • 各种原生方法的使用，基本类型和引用类型
    • es6中的set（集合）和map（字典）的使用和对应的数据结构
    • sort的实现
    • bfc布局规则
    • 项目怎么做的移动端适配？
    • flexible原理
    • 移动端的1像素问题怎么解决
原型与继承 ​
  1. 说一下原型链，原型链实现继承
HTTP与TCP ​
  1. http和tcp协议？
缓存 ​
  1. 缓存相关（对比缓存？强缓存？对应请求头）cookie有哪些属性？
跨域 ​
  1. 简单请求？跨域？
Vue ​
  1. vue中nextTick的实现，结合浏览器事件循环机制说一下？
模块化 ​
  1. 说说commonjs和esmodule？
学习情况 ​
  1. 最近在看什么新东西吗？

二面（视频面试） ​

  • 时长：面了两个多小时，中途换了个面试官
项目深入 ​
  1. 项目相关问题，项目还是需要好好准备。问得有点仔细
    • 遇到过哪些难点？怎么解决的？
    • 做过哪些优化？优化有量化吗？
    • 用过哪些loader？plugin？
    • 你写的这个插件实现了什么？怎么实现的？
    • sourcemap原理知道吗？（因为瞄过一个博客，说知道一点，说了个vlq编码，然后被问得很尴尬，不会直接说不会就好）
HTTP与TCP深入 ​
  1. http和tcp、https、http2(队头阻塞？解决了哪些问题？哪有哪些问题未解决？tcp和udp？)
  2. 摘要算法和对称加密、非对称加密大概说一下？
  3. 摘要和加密的区别？
  4. 知道哪些加密算法？
  5. websocket的使用场景（socket.io降级）？
前端安全 ​
  1. 前端安全防范措施？xss攻击和csrf攻击？
Vue深入 ​
  1. 怎么看待virtual dom？ast语法树了解吗？
  2. vue-loader做了哪些事情？
  3. vue diff？
  4. vue computed和watch区别？
  5. computed怎么实现的缓存（dirty）？
  6. vue3双向数据绑定实现？createRender？
  7. 和vue2有哪些不同，提到了函数式编程，说下对函数式编程对的理解。（答得很垃圾，vue3了解不多，尤大的直播没认真看）
设计模式 ​
  1. 对MVC （react） MVVM（vue）的了解
Node.js ​
  1. node相关问题，node的事件循环机制？
  2. stream两种模式的区别？
  3. 看过koa源码都会觉得和express有很大不同，说一下？
小程序 ​
  1. 你写过小程序，说下和写vue有什么区别？
  2. 然后我说setData会有性能问题（react中setState会有这个问题吗？又给自己挖坑了）
  3. 说下jsbridge？
算法题 ​
  1. 时针和分针的夹角？
个人问题 ​
  1. 为什么要离职？怎么学习的？
  2. 有什么问题吗？

三面（视频面试） ​

项目与业务 ​
  1. 项目相关问题？
安全与网络 ​
  1. 和很多二面的问题类似
  2. 为甚么要有同源策略？
  3. dns劫持？
团队协作 ​
  1. 团队协作，以前的开发流程？
职业规划 ​
  1. 职业规划？
提问环节 ​
  1. 有什么问题吗？

笔试题（二面、三面后的笔试） ​

手写题 ​
  1. 手写bind
  2. 手写简版promise，基础架子，不用写all、race等api
算法题 ​
  1. 爬楼梯
  2. 猴子吃香蕉
  3. 回文字符串个数（这道题出现频率很高，朋友面试的时候也遇到了，最长回文子字符串）

四、另一组三轮面试经历 ​

一面 ​

自我介绍与项目 ​
  1. 自我介绍和项目介绍
  2. 在开发个人项目的时候用到了哪些工具？
Vue内部机制 ​
  1. 介绍一下Vue的内部机制
  2. 说一下对虚拟DOM的理解
  3. Diff算法的具体比较过程？
  4. Vue数据响应式的原理？
  5. Vue的生命周期钩子有哪些？
JavaScript基础 ​
  1. 说说对闭包的理解
  2. 什么是变量提升
  3. 如何理解原型链？
  4. 说说对OOP的理解
  5. 在JS中如何实现多重继承？
  6. JS基本数据类型有哪些？
CSS与渲染 ​
  1. 什么是盒模型？
  2. 从输入URL到页面呈现发生了什么？
  3. 什么情况下会引发重绘？
算法 ​
  1. 了解哪些排序算法？
  2. 说一下快排的实现思路
个人问题 ​
  1. 怎么学习前端的？
  2. 自我评价一下
  3. 抗压能力如何？

二面 ​

自我介绍与项目 ​
  1. 自我介绍和项目介绍
  2. 为什么要做这个项目？
  3. 前后端如何交互？
网络协议 ​
  1. 除了HTTP还用过什么应用层协议？
  2. 项目中，业务数据的传输形式是什么？
  3. HTTP和WebSocket的区别？
  4. 说一下TCP三次握手
  5. TCP如何实现可靠传输？
数据库 ​
  1. mySQL了解吗？
其他技术 ​
  1. 说说你对低代码的了解
算法题 ​
  1. 搜索二维矩阵
个人问题 ​
  1. 平时关注哪些技术论坛？
  2. 有写技术博客的习惯吗？
  3. 说说对云原生的理解？
  4. 平时有什么爱好？
  5. 你觉得自己有哪些优点？
  6. 家在哪里？
  7. 实习周期？

五、深入技术面试 ​

HTTP/HTTPS/TCP深入 ​

  1. http2了解过吗？contentLength了解过吗？
  2. keepalive模式下为什么需要传contentLength字段？
  3. http2是怎么通过streamID实现多路复用的？
  4. 启用http2需要在nginx中做哪些配置？
  5. http3了解过吗？
  6. 为什么http2不能完全解决队头阻塞，而http3却可以？
  7. https了解过吗？
  8. 网站证书是怎么获取的？
  9. 怎么验证权威机构颁发的证书是真的？
  10. nginx是怎么配置https的？

Canvas与性能 ​

  1. 拖拽功能有实现过吗？
  2. relative定位和transform都是视觉上的偏移，那他们有什么不一样的地方？
  3. 访问元素的top属性会不会引起回流？
  4. 对于这种2d平面的transform动画有没有什么手段开启gpu加速优化它？

ES6兼容 ​

  1. async和await在es5的浏览器中是怎么实现兼容的？
  2. polyfill了解过吗？

Web安全 ​

  1. 有哪些常见的web攻击？
  2. ddos攻击怎么防御？

首屏优化 ​

  1. 首屏加载时间怎么优化？
  2. 首屏加载fcp、lcp指标有了解过吗？
  3. 为什么bilibili、百度这些网站的html页面不做缓存？
  4. ssr和预渲染有什么区别？

移动端 ​

  1. 有开发过移动端吗？
  2. 移动端常见的点击穿透怎么解决？
  3. css像素比有了解过吗？
  4. 安卓怎么兼容0.5px边框？

打包工具 ​

  1. 打包工具都用过哪些？
  2. 如果让你写一个自动转换0.5px边框的loader，该loader能自动将0.5px边框转换成安卓兼容的样式，你会怎么实现，简单说说思路

CSS布局 ​

  1. grid相比flex有哪些优点？
  2. 那新版本的浏览器flex有gap属性吗？
  3. grid布局怎么处理兼容性？

Web Worker ​

  1. servicework和webwork了解吗？
  2. work的使用需要做webpack配置吗？
  3. pwa应用怎么做离线提交？
  4. 前端有监听断网联网状态的事件有了解过吗？
  5. localStorage大小是多少？
  6. 如果前端要持久化图片这种比较大的资源怎么办？

微前端 ​

  1. 看你项目里有写微前端，使用的是哪种微前端框架？
  2. 微前端对比iframe有哪些优势？
  3. qiankun框架怎么实现多应用场景下的js隔离？

手写题 ​

  1. 手写代码函数柯里化和数组转树

面试总结与建议 ​

WXG部门面试特点 ​

1. 面试轮次多（6轮） ​

  • 3轮部门技术面：基础技术考察、项目深入、综合能力
  • 2轮面委面：严格的算法和技术深度把关
  • 1轮HR面：综合素质和匹配度考察

2. 算法能力是硬性要求 ​

  • 每轮都有算法题
  • 一面：60min写3道题（数组扁平化、循环升序数组查找、并发请求）
  • 四面（面委）：30min写3道题（闭包、爬楼梯、闭包嵌套）
  • 推荐刷CodeTop上wxg的题目

3. 小程序考察重点 ​

  • 小程序与网页开发的区别
  • 小程序的技术问题和建议
  • wx.request等小程序API的使用

4. 前端基础深度考察 ​

  • setTimeout(0)和promise.then()的区别（事件循环）
  • WebSocket建立过程和同源限制
  • CSRF攻击原理
  • Babel转译原理
  • 数组sort算法和快排原理

5. 项目经验要求高 ​

  • 每轮都会聊项目
  • 要求深入理解项目技术细节
  • 实习经验很重要

面试通过关键点 ​

1. 算法基础扎实 ​

  • 能快速解出中等难度算法题
  • 理解时间复杂度优化
  • CodeTop wxg题库必刷

2. 前端基础深入 ​

  • 闭包、事件循环、原型链等核心概念
  • 网络协议（HTTP、WebSocket）理解深入
  • 框架原理（Vue、小程序）掌握透彻

3. 项目经验丰富 ​

  • 有真实的实习经验
  • 能深入讲解项目技术细节
  • 对项目有思考和优化建议

4. 学习能力强 ​

  • 持续学习新技术
  • 对技术原理有深入理解
  • 能举一反三

WXG部门 vs 普通部门对比 ​

维度WXG部门普通部门
面试轮次6轮3-4轮
算法要求极高中等
面委面试有（2轮）无或总监面
难度⭐⭐⭐⭐⭐⭐⭐⭐⭐
HC数量很少相对较多
年终奖多正常

备考建议 ​

1. 算法准备 ​

  • CodeTop刷wxg题目
  • LeetCode中等题重点准备
  • 动态规划、二分查找、数组操作必练

2. 前端基础 ​

  • 深入理解事件循环、闭包、原型链
  • 网络协议：HTTP、WebSocket、TCP
  • 安全：XSS、CSRF、跨域

3. 小程序知识 ​

  • 小程序与H5的区别
  • 小程序架构和原理
  • 常见问题和优化方案

4. 项目准备 ​

  • 准备1-2个深入理解的项目
  • 能讲解技术选型和架构设计
  • 有具体的优化案例和数据

5. 心态准备 ​

  • 6轮面试需要很好的心态
  • 面委面试是最终把关，要展现出综合实力
  • 保持自信和持续学习的心态

高频考点总结 ​

超高频考点（必考） ​

  1. 事件循环机制（setTimeout vs promise.then）
  2. 闭包原理与应用
  3. 原型链与继承
  4. TCP三次握手/四次挥手
  5. HTTP/HTTPS区别与原理
  6. Vue双向绑定原理
  7. 虚拟DOM与Diff算法
  8. 跨域解决方案
  9. XSS/CSRF攻击与防范
  10. 数组扁平化

高频考点 ​

  1. 浏览器缓存机制
  2. Webpack打包优化
  3. 前端性能优化
  4. 移动端适配
  5. HTTP/2.0特性
  6. WebSocket原理
  7. 小程序开发
  8. 算法题（数组、树、动态规划）
  9. 前端工程化
  10. TypeScript泛型

中频考点 ​

  1. CSS布局（Flex、Grid）
  2. Canvas与SVG
  3. Node.js基础
  4. 微前端架构
  5. PWA与ServiceWorker
  6. 首屏优化指标
  7. 设计模式（MVC/MVVM）
  8. Babel转译原理
  9. Web Worker
  10. Nginx配置

TOP 20 考点优先级 ​

  1. 事件循环机制 - 每次必考，涉及setTimeout、Promise、async/await
  2. 闭包 - 核心概念，常结合实际场景考查
  3. 原型链与继承 - JavaScript核心，必须掌握
  4. TCP三次握手/四次挥手 - 网络基础，高频考点
  5. HTTP/HTTPS - 安全、状态码、版本差异
  6. Vue双向绑定原理 - Vue2 vs Vue3，响应式实现
  7. 虚拟DOM与Diff算法 - 框架原理，深度考查
  8. 跨域解决方案 - CORS、JSONP、代理等
  9. XSS/CSRF - 前端安全，必会内容
  10. 数组扁平化 - 经典算法题，多种解法
  11. 浏览器缓存 - 强缓存 vs 对比缓存，缓存策略
  12. Webpack - Loader、Plugin、代码分割
  13. 性能优化 - 首屏、打包、渲染优化
  14. 移动端适配 - flexible、1像素问题、Retina屏
  15. HTTP/2.0 - 多路复用、二进制帧、头部压缩
  16. WebSocket - 握手过程、与HTTP区别、应用场景
  17. 小程序 - 双线程模型、setData、API使用
  18. 动态规划 - 爬楼梯、打家劫舍等经典题
  19. TypeScript - 泛型、类型推断、类型体操
  20. 项目经验 - 难点解决、技术选型、优化方案

面试准备清单 ​

技术栈准备 ​

  • [ ] JavaScript基础（闭包、原型链、事件循环）
  • [ ] Vue框架（原理、源码、最佳实践）
  • [ ] 网络协议（TCP/IP、HTTP/HTTPS、WebSocket）
  • [ ] 前端工程化（Webpack、Vite、Babel）
  • [ ] 性能优化（首屏、打包、渲染）
  • [ ] 前端安全（XSS、CSRF、跨域）
  • [ ] 小程序开发（双线程、API、性能）
  • [ ] Node.js基础（事件循环、Stream）
  • [ ] TypeScript（类型系统、泛型）
  • [ ] 微前端（qiankun、single-spa）

算法准备 ​

  • [ ] LeetCode刷题200+
  • [ ] CodeTop刷WXG题目
  • [ ] 动态规划专题
  • [ ] 数组与字符串专题
  • [ ] 树与图专题
  • [ ] 二分查找专题
  • [ ] 手写题（bind、promise、数组扁平化等）

项目准备 ​

  • [ ] 2-3个深入理解的项目
  • [ ] 技术选型与架构设计
  • [ ] 难点与解决方案
  • [ ] 优化方案与数据
  • [ ] 业务理解与思考

软技能准备 ​

  • [ ] 自我介绍（1-3分钟版本）
  • [ ] 项目介绍（STAR法则）
  • [ ] 学习能力与成长经历
  • [ ] 团队协作与沟通能力
  • [ ] 职业规划与目标

面试常见问题 ​

个人相关 ​

  1. 自我介绍
  2. 为什么选择前端？
  3. 介绍一下你的项目
  4. 遇到的最大困难是什么？
  5. 你是如何学习的？
  6. 你有什么优缺点？
  7. 你的职业规划是什么？
  8. 对加班的看法？

技术相关 ​

  1. 你觉得哪个技术最值得学习？
  2. 你最近在学习什么新技术？
  3. 你如何看待前端发展趋势？
  4. 你如何解决技术难题？
  5. 你对团队技术栈有什么建议？

面试技巧 ​

回答技巧 ​

  1. STAR法则：Situation（情境）→ Task（任务）→ Action（行动）→ Result（结果）
  2. 先总后分：先给出结论，再展开说明
  3. 举例说明：用具体案例佐证观点
  4. 主动延伸：从问题延伸到相关知识点

沟通技巧 ​

  1. 不懂就问：不清楚的地方可以要求澄清
  2. 不会就说：不会的题目诚实承认，展示学习态度
  3. 互动交流：适当反问，展现思考深度
  4. 控制节奏：回答时控制语速，避免过快或过慢

心态调整 ​

  1. 自信但不自负：展现能力，但保持谦逊
  2. 压力面试：面对压力保持冷静
  3. 多轮面试：保持状态，每轮都要全力以赴
  4. 失败总结：从失败中学习，持续改进

资源推荐 ​

学习资源 ​

  1. CodeTop：https://codetop.cc - 腾讯面试题库
  2. LeetCode：算法练习平台
  3. MDN Web Docs：前端权威文档
  4. Vue官方文档：框架学习
  5. 掘金/思否：技术社区

面经资源 ​

  1. 牛客网面经区
  2. 知乎前端面试专题
  3. 掘金面试经验分享
  4. 各大厂前端招聘公众号

最后的建议 ​

  1. 持续学习：前端技术更新快，保持学习热情
  2. 深度思考：不只是会用，要理解原理
  3. 实践为王：多写代码，多做项目
  4. 总结归纳：定期总结，形成知识体系
  5. 保持自信：相信自己的能力，展现最好的自己

祝面试顺利，拿到心仪的Offer！💪

Released under the MIT License.

Copyright © 2019-present Evan You