应届生必看：8家互联网公司前端校招面试题汇总

面试导航是一个专注于前、后端技术学习和面试准备的免费学习平台，提供系统化的技术栈学习，深入讲解每个知识点的核心原理，帮助开发者构建全面的技术体系。平台还收录了大量真实的校招与社招面经，帮助你快速掌握面试技巧，提升求职竞争力。如果你想加入我们的交流群，欢迎通过微信联系：yunmz777。

智能搜索前端

基本信息

日期: 2024 年 9 月 27 日 15:00
岗位: 智能搜索前端
地点: 北京
面试时长: 33 分钟

面试内容

CSS 相关

CSS 层级问题
CSS 选择器优先级
BFC(块级格式化上下文)
- 如何设置：overflow: hidden
- 解决问题：消除 margin 合并

JavaScript 相关

深浅拷贝的理解
深浅拷贝的实现方法及优缺点
JSON.stringify 和 JSON.parse 的性能问题
数组反转（不使用 API）的实现方法
如何在原数组上进行操作

TypeScript 相关

TypeScript 的理解
unknown 和 any 的区别

Vue 相关

computed 是如何进行依赖收集的

项目相关

项目中遇到的挑战

反问环节

业务方向: 搜索相关，AI 相关，AI 图片生成
技术栈: 新项目使用 React，老项目使用 Vue
前端发展规划

IEG

面试内容

编程题

手写 memoize 函数

题目要求：

函数参数是一个函数，返回值是一个函数
功能：缓存目标函数执行的结果，缓存的 key 为第一个参数。如果第二次访问，key 相同，则返回缓存的值
可以直接删除 cache 中缓存的值

javascript 复制代码

function memoize(func) {
  // 待实现
}

function sum(a, b) {
  console.log("excute sum");
  return a + b;
}

const sumWapper = memoize(sum);
sumWapper(1, 2);
// 输出 excute sum
sumWapper(1, 2);
sumWapper.cache.delete(1);
sumWapper(1, 2);

编程语言相关

会 Java、C++ 其他语言吗
JS 和 Java 本质上有什么不同
面向对象与面向过程
- JS 有 class 可以继承，JS/TS 向 Java 靠拢（增加类型、定义类）
- 但大部分时间是通过函数等其他形式完善代码，很少使用这种方式
- 你怎么看这种变化

JavaScript 相关

ES6 新特性（如箭头函数）在浏览器上的兼容性问题及解决方案
将 ES6 转换为浏览器兼容代码的第三方工具
Webpack 中如何配置转换为 ES5
TypeScript 能否直接在浏览器上运行
undefined 和 null 的区别
JS 是单线程还是多线程
浏览器中如何实现 sleep 功能
浏览器中执行事件的规则
JS 中的原型链
JS 的柯里化

反问环节

学习建议

补充基础：JS 相关知识、计算机网络、操作系统、后台问题

进阶学习方向

JS 学无止境：ESLint、Prettier、Stylelint 等工具
技术应用：胜任工作、按时交付
求职重点：基础为主，框架很少问，后期定方向再学框架
TypeScript 类型校验

JS 学习体系

语法
高级特性
- 原型链
- 内存分布
- 事件循环
- JS 执行引擎（V8、Node 引擎及其不同点）
迭代器和新特性（如 ES11 新特性）
高级特性（Promise、迭代器、遍历器等）

前端发展趋势

状态驱动视图（局部刷新 DOM）
微前端、工程化
JS 库开发
从简单的 HTML+JS 开始，逐步完善
处理浏览器兼容问题
TypeScript 工程化

关于框架学习

微前端可以了解，但不是面试重点
入职后通常有固定的开发模式
Vue 底层原理不需要特别关注，入职后不一定使用 Vue

大梦龙图-深圳-Web 前端

基本信息

日期: 2024 年 12 月 26 日 14:30
岗位: Web 前端
地点: 深圳
面试时长: 40 分钟
HC: 2 个

面试内容

开场

面试官简单介绍公司、新业务、要找的人的要求和负责的工作
自我介绍
为什么毕业后没工作，为什么不能转正，没上班都干了什么

CSS 相关

几种水平和垂直居中的方法
针对不同设备的 H5 响应式布局应该怎么做
rpx 的原理
rem 的使用

HTML 与浏览器

defer、async 属性的区别
浏览器缓存机制
cookie、localStorage、sessionStorage 的区别及优缺点
如何优化频繁操作 localStorage 的性能问题
事件循环
微任务和宏任务有哪些

网络相关

跨域处理方法
Nginx 使用经验

JavaScript 相关

深拷贝的理解，哪些属性需要深拷贝，哪些不需要
深拷贝的实现方案及存在的问题
forEach 和 map 的区别
Promise 的理解和使用

Vue 相关

Vue 的了解程度，Vue2 和 Vue3 使用情况
Vue2 和 Vue3 的区别及原理
组合式 API 和选项式 API 的理解和使用
ref 和 reactive 的区别
为什么 v-if 中不能使用 index 作为 key
diff 算法如何打补丁

React 相关

Next.js 的使用经验
Next.js 与普通 React 的区别

工程化

ESM 和 CJS 的区别
打包方面的差异
ESM 和 CJS 引入模块的过程
CJS 如何暴露模块

Node.js

Node.js 后端开发经验，使用过的框架和 ORM
MySQL 基本 CRUD 操作
npm run dev 或 npm run build 的执行过程
Node.js 如何调用 CMD 指令
Node.js 环境使用 require 函数的过程

反问环节

公司研发规模: 前端十几个，4 个游戏 SDK，2 个广告落地页，内部系统，新业务需要 2 人
面试评价: 基础扎实，Node.js 需要深入了解，需要能独立开发项目的人
后续流程: 还有领导面，等 HR 通知

字节跳动-抖音电商

基本信息

日期: 2024 年 10 月 25 日

面试内容

开场

自我介绍
实习中印象深刻的经历

安全相关

XSS 攻击原理
XSS 可能导致的后果及场景举例
如何获取用户的 Cookie
Cookie 的特点

浏览器存储

其他缓存方式
localStorage 和 sessionStorage 的区别
同源策略的定义
跨域 Cookie 访问问题
- www.a.baidu.com和www.b.baidu.com之间的Cookie互通性
- 通过 XSS 是否能跨子域获取 Cookie

移动端开发

H5 与小程序的区别及小程序优势
WebView 的概念
JSBridge 的理解
- JavaScript 如何通过 JSBridge 调用移动设备功能
- iOS 环境下如何调用 Objective-C 程序

浏览器渲染

输入 URL 到页面显示的过程
DNS 解析过程
JS 和 CSS 解析是否会阻塞 HTML 解析及原因
浏览器样式计算过程

CSS 相关

flex: 1 的含义
flex-grow 的作用

JavaScript 相关

ES5 的 Reflect 和 Proxy
陷阱函数的概念

Vue 相关

Vue 中为什么要使用 key
使用索引作为 key 的问题
使用索引作为 key 导致交互标签混乱的场景

代码题

判断输出题 1

javascript 复制代码

console.log(1 < 2 < 3); // true
console.log(3 > 2 > 1); // false

判断输出题 2

javascript 复制代码

for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 100);
}
// 输出: 5 5 5 5 5

为什么会这样输出
如何实现从 0 到 4 的输出
除了使用 let 声明，还有什么方法

算法题

数组第 k 大的数
版本号比较

反问环节

面试官使用的是旧简历，没有关注到 gap 期间做的开源项目
面试官回应：你应该早点说，不过我看你那个项目基本的点都有做，大文件上传啥的。

腾讯-腾娱

基本信息

日期: 2024 年 7 月 2 日
面试时长: 62 分钟
面试形式: 无摄像头，无自我介绍

面试内容

编程题

业务发布的各种条件限制，版本号对比问题

场景题

Vue 传值和状态管理
Vue 实现购物车逻辑的各种细节
- userId 是否需要传递

项目相关

大文件分片上传
- 如何进行文件分片
- 如何合并分片
- 如何保证上传成功率
- 分片丢失的处理方法
- 如何实现并发上传

反问环节

Base 地点: 深圳总部
业务方向: 手 Q 增值业务
面试评价: 基础有点差，总体还不错

腾讯-腾讯云智

基本信息

日期: 2024 年 5 月 30 日
面试时长: 65 分钟

面试内容

开场

自我介绍

实习经历

App 运行优化
Promise 相关
- Promise 为什么要有 then 方法，这样设计的好处
- 为什么要分宏任务队列和微任务队列
安全相关
- 渗透测试修复：XSS 存储型
- CSRF 防御方法（httponly、双 token）
小程序相关
- 小程序优化
- 小程序运行原理，宿主环境
性能优化
- link 预解析
- DNS 预解析

JavaScript 深入

JS 编译过程
V8 反优化
JS 编译时作用域确定阶段（在 AST 生成前，词法编译）
事件循环机制

项目经验

大文件分片上传（前后端对接的数据结构）
瀑布流虚拟列表
视频截帧当封面

Vue 原理

响应式原理
Track 依赖收集
Trigger 派发更新

场景题

设计一个 Vue 派发更新后，统一通知视图更新的数据结构

工程化

Vite 和 Webpack 的区别
Vite 为什么快
Vite 在 dev 环境的运行方式
Webpack 热重载原理

编程题

javascript 复制代码

/* 
背景：模板引擎在前端开发中广泛用于生成HTML。它允许开发者定义一个带有占位符的模板，
然后用数据填充这些占位符来生成最终的HTML字符串。

任务：实现一个函数 renderTemplate，它接受一个字符串模板和一个数据对象作为输入，
并返回一个填充了数据的新字符串。模板字符串中的占位符格式为 {{propertyName}}。

要求：
1. 你的函数应该能够处理嵌套属性，例如 {{user.name}}。
2. 如果数据对象中不存在对应的属性，占位符应该被替换为空字符串。
3. 请不要使用任何库或内置的模板引擎。

示例代码框架：
function renderTemplate(template, data) {
    // TODO: Implement this function
}

// Usage
const template = 'Hello, {{user.name}}! Your age is {{user.age}}.';
const data = { user: { name: 'Alice', age: 30 } };
const result = renderTemplate(template, data);
console.log(result); // Output: 'Hello, Alice! Your age is 30.'
*/

反问环节

Base 地点: 长沙
业务方向: 腾讯本部的医疗业务
面试评价: 基础好，原理差点意思，Vue 原理没预想的好
建议 :
- 多关注工程化
- 继续深入原理
- 面试要大胆说出自己的想法和设计

转转

基本信息

日期: 2024 年 12 月 4 日 10:30

面试内容

开场

自我介绍

CSS 相关

元素垂直居中方法
Flex 布局相关知识
- flex-shrink 和 flex-grow 的作用
响应式布局
rem 单位的使用

JavaScript 相关

数组去重方法
字符串切割方法
substring、slice 和 splice 的区别
宏任务和微任务
函数式编程

计算机网络

跨域解决方法
后端不配置 Nginx 时前端如何解决跨域
构建工具不支持正向代理时的解决方案
JSONP 的原理和使用

React 相关

React 如何实现类似 Vue 的 keep-alive 功能
高阶组件的概念和应用
React 开发优化方法
React 缓存策略
React 编译方面的优化

场景题

封装请求库需要注意的事项
请求暂停和请求取消的实现
首屏优化方法
App 内嵌 H5 页面的优化策略
H5 如何调用手机设备（如摄像头）及与客户端的区别

反问环节

校招要求: 24 届和 25 届校招生的要求差异（回答：基本没有差异，要求都差不多）
业务和技术栈: C 端使用 Vue，B 端使用 React；业务包括二手回收、仓库管理、物流、客服等，入职后根据分配确定

轻购云-武汉-前端

基本信息

日期: 2024 年 12 月 25 日 15:00
面试时长: 30 分钟

面试内容

开场

自我介绍
没上班的半年干了什么，为什么没上班

CSS 相关

响应式布局
Flex 布局
水平垂直居中方法
rem 和 em 的区别与使用

Vue 相关

Vue2 和 Vue3 的使用经验及区别
选项式 API 和组合式 API 的区别
为什么 Vue2 的 data 要返回一个函数而不是对象
Vue 组件传值方式
Vuex 和 Pinia 的区别
watch 和 computed 的区别与使用场景

JavaScript 相关

JavaScript 数据类型
原型链
常用的数组 API
数组的增删方法
箭头函数的特点及与普通 function 的区别

UniApp 相关

使用过的 UniApp API
页面跳转方法
onLoad 和 onShow 的执行顺序

浏览器相关

浏览器缓存机制及各种缓存的区别

开放性问题

封装组件需要注意的问题
项目中遇到的挑战及解决方案

反问环节

业务方向: 智能货柜的页面、货架相关功能，以及公司内部系统
研发团队: 7 个前端，正在招聘中
面试评价: 对于应届生来说算是上游，基础扎实，但表达能力需要提高，简历中技术栈描述过于简陋
后续流程: 通过的话三天内 HR 会联系