核心思路: 不是“学会所有东西”,而是 “在最短时间内,最大化面试通过概率”。这意味着要优先掌握高频考点,并能清晰、流畅地表达出来。
第一阶段:战略定位与准备 (9月23日 - 半天)
自我评估:
简历审视: 立刻修改你的简历。针对每一个项目经验,准备好以下问题的答案:
项目介绍(一句话说清楚是做什么的)。
你负责的核心模块和技术栈。
遇到了什么技术难点?你是怎么解决的?(这是重点,准备2-3个精彩故事)
有什么亮点或优化?(比如性能提升、用户体验改善等)
目标公司分析: 列出你最想去的5-10家公司。仔细阅读他们的JD(职位描述),提取出共同要求和特色要求(比如有的重Vue,有的重React,有的要求有可视化经验)。这将成为你学习的重点。
知识地图梳理: 快速浏览一份前端面试题大纲(比如网上搜索“前端面试宝典”),建立整体概念,知道自己要面对哪些板块。
第二阶段:核心知识高强度冲刺 (9月23日下午 - 9月28日)
原则: 每天至少保证8-10小时的高质量学习时间。采用 “输入-输出”循环:早上学习理论,下午和晚上动手实践/自问自答。
以下是按优先级排列的学习模块和每日计划建议:
模块一:JavaScript 核心 (重中之重!预计2-3天)
这是面试的绝对核心,必须投入最多精力。
Day 1-2: 深度掌握
作用域与闭包: 理解词法作用域,能清晰解释闭包的形成、应用场景(模块化、数据私有化)以及可能的内存泄漏问题。
原型与继承: 弄懂原型链,new关键字的过程,instanceof原理,ES6的class本质是什么。
异步编程:
Event Loop: 宏任务、微任务(Promise, async/await)的执行顺序,一定要能画图说明。
Promise: 手写Promise(至少理解原理),常用API(all, race, allSettled等)。
async/await: 理解它是Generator的语法糖,是异步编程的终极解决方案。
this指向: 能准确判断不同场景(普通函数、箭头函数、call/apply/bind)下this的值。
Day 3: 关键考点
ES6+新特性: let/const、箭头函数、解构赋值、模板字符串、模块化(ES Module)、可选链?.、空值合并??等。
手写代码/函数实现: 这是高频面试题。每天练习5-10个。
必会: call/apply/bind、深拷贝、防抖节流、数组去重/扁平化、Promise相关、数组方法(map, filter, reduce等)。
目标: 理解思路,能流畅地写出来,并能说明时间和空间复杂度。
模块二:框架 (Vue 或 React, 根据目标公司JD选择,预计1.5-2天)
选择一个主攻,另一个至少要能说清核心思想和差异。
以 Vue 3 为例 (Day 3下午 - Day 4):
核心思想: 响应式原理(Proxy vs Vue2的DefineProperty)、组合式API(Composition API) vs 选项式API、生命周期。
关键考点:
Diff算法与虚拟DOM。
key的作用。
v-model原理。
Vuex/Pinia状态管理。
Vue Router路由原理。
实践: 准备一个你用Vue3做的小项目或模块,能用新特性(
以 React 为例 (Day 3下午 - Day 4):
核心思想: JSX、组件化、状态管理。
关键考点:
组件生命周期(函数组件Hooks)。
Hooks: useState, useEffect, useCallback, useMemo, useRef等,理解依赖项数组和闭包陷阱。
状态提升、组件通信。
虚拟DOM与Diff算法。
实践: 准备一个你用React Hooks做的小项目,能说清状态流和副作用处理。
模块三:工程化 & 编码能力 (Day 6)
CSS: 布局(Flexbox和Grid必须熟练掌握),BFC,居中,移动端适配方案(REM、VW/VH等)。
打包工具: 能说清Webpack/Vite的核心概念(打包、loader、plugin、HMR),以及为什么Vite更快(利用ES Module)。
TypeScript(加分项): 基础类型、接口、泛型、类型别名。如果时间紧,至少能说清TS的好处(类型安全、更好的代码提示等)。
算法与数据结构(每日穿插1-2小时):
策略: 不求难,求熟练。使用LeetCode或类似平台。
重点: 字符串、数组、链表相关的简单/中等题目。
目标: 掌握常见方法(哈希表、双指针、滑动窗口),能清晰地表达解题思路。
第三阶段:模拟面试与查漏补缺 (9月29日 - 9月30日)
Day 7: 全面输出
自言自语/对着镜子讲: 把前六天学过的所有核心知识点,像老师一样讲一遍。确保表达流畅、逻辑清晰。
找朋友/网友模拟面试: 让他们随机问你问题,锻炼临场反应。
录制视频: 回答“请做个自我介绍”和“介绍你的项目”,回看自己的表达和神态。
查漏补缺: 模拟面试中暴露的弱点,立即返回去复习。
Day 8: 最后冲刺
复习笔记: 快速过一遍所有的高频考点和手写代码。
准备提问: 准备3-5个问面试官的问题(关于业务、技术栈、团队文化等),这能体现你的思考。
调整心态,保证休息: 不要再啃硬骨头了,保持自信、清晰的大脑。
国庆前(10月1日前)—— 行动日
积极投递简历,与HR沟通。
参加面试,将每一次面试都视为一次学习和反馈的机会。
即使某次面试不理想,也要立刻复盘,针对不会的问题进行学习,迎接下一场。
接下来总结一下今年前端面试,无论是大厂还是小厂都在问的场景题篇,可能有些人和我一样,也被这些坑过,所以接下来面试的前端人一定要记得,刷场景题!!!
场景题
1.如何判断用户设备
2.将多次提交压缩成一次提交
3.介绍下navigator.sendBeacon方法
4.混动跟随导航(电梯导航)该如何实现
5退出浏览器之前,发送积压的埋点数据请求,该如何做?
6.如何统计页面的long task(长任务)【热度:140】
7.PerfoemanceObserver如何测量页面性能
移动端如何实现下拉滚动加载(顶部加载)
9.判断页签是否为活跃状态
10.在网络带宽一定的情况下,切片上传感觉和整体上传消费的时间应该是差不多的这种说法正确吗?
11.大文件切片上传的时候,确定切片数量的时候,有那些考量因素
12.页面关闭时执行方法,该如何做
13.如何统计用户pv访问的发起请求数量
14.长文本溢出,展开/收起如何实现
15.如何实现鼠标拖拽
16.统计全站每一个静态资源加载耗时,该如何做
17.防止前端页面重复请求
18.ResizeObserver作用是什么
19.要实时统计用户浏览器窗口大小,该如何做
20.当项目报错,你想定位是哪个commit引l入的错误的时,该怎么做
21.如何移除一个指定的commit
22.如何还原用户操作流程
23.可有办法将请求的调用源码地址包括代码行数也上报上去?
24.请求失败会弹出一个toast,如何保证批量请求失败,只弹出一个toast【热度:420)
25.如何减少项目里面if-else【热度:310】
26.babel-runtime 作用是啥【热度:200】
27.如何实现预览PDF文件
28.如何在划词选择的文本上添加右键菜单(划词:标滑动选择一组字符,对组字符进行操作)【热度:100】
29.富文本里面,是如何做到划词的(鼠标滑动选择一组字符,对组字符进行操作?【热度:100】
30.如何做好前端监控方案【热度:672】
31.如何标准化处理线上用户反馈的问题【热度:631】
32.px 如何转为rem【热度:545】
33.浏览器有同源策略,但是为何cdn请求资源的时候不会有跨域限制【热度:579】
34.cookie可以实现不同域共享吗【热度:533】
35.axios是否可以取消请求【热度:532】
36.前端如何实现折叠面板效果?
37.dom里面,如何判定a元素是否是b元素的子元素【热度:400】
38.判断一个对象是否为空,包含了其原型链上是否有自定义数据或者方法。该如何判定?
39.is如何判空?「空」包含了:空数组、空对象、空字符串、0、undefined、null、空map、空set,都属于为空的数据【热度:640】
40.css实现翻牌效果【热度:116】
41.flex:1代表什么【热度:400】
42.一般是怎么做代码重构的
43.如何清理源码里面没有被应用的代码,主要是JS、TS.CSS代码【热度:329】
44.前端应用如何做国际化?【热度:199】
45.应用如何做应用灰度发布【热度:247】
46.「微前端]为何通常在微前端应用隔离,不选择iframe方案【热度:280】
47.[微前端]Qiankun是如何做JS隔离的【热度:228】
48.[微前端]微前端架构一般是如何做JavaScript隔离
49.[React]循环渲染中为什么推荐不用index 做key【热度:320】
50.[React]如何避免使用context的时候,引起整个挂载节点树的重新渲染【热度:420】
51.前端如何实现截图?
52.当QPS达到峰值时,该如何处理?
53.js超过Number最大值的数怎么处理?
54.使用同一个链接,如何实现PC打开是web应用、手机打开是-个H5应用?【腾讯二面】
55.如何保证用户的使用体验【字节一面】
56.如何解决页面请求接口大规模并发问题【必会】
57.设计一套全站请求耗时统计工具
58.大文件上传了解多少【百度一面】
59.H5如何解决移动端适配问题【美团一面】
60.站点一键换肤的实现方式有哪些?【美团一面】
61.如何实现网页加载进度条?【百度一面】
62.常见图片懒加载方式有哪些?【京东一面】
63.cookie构成部分有哪些【百度一面】
64.扫码登录实现方式【腾讯一面]
65.DNS协议了解多少【字节一面】
66.函数式编程了解多少?【京东一面】
67.前端水印了解多少?【腾讯一面】
68.什么是领域模型【必会】
69.一直在window上面挂东西是否有什么风险【百度一面】
70.深度SEO优化的方式有哪些,从技术层面来说
71.小程序为什么会有两个线程【腾讯一面】
72.web应用中如何对静态资源加载失败的场景做降级处理
73.html中前缀为data-开头的元素厘性是什么?
74.移动端如何实现上拉加载,下拉刷新?【字节一面】
75.如何判断dom元素是否在可视区域【字节一面】
76.前端如何用canvas来做电影院选票功能【美团一面】
77.如何通过设置失效时间清除本地存储的数据?【腾讯二面】
78如果不使用脚手架,如果用webpack构建一个自己的react应用
79.用nodejs实现一个命令行工具,统计输入目录下面指定代码的行数
80.packagejson里面sideEffects厘性的作用是啥【必会】
81.script标签上有那些厘性,分别作用是啥?【必会】
82.为什么SPA应用都会提供一个hash路由,好处是什么?
83.[React]如何进行路由变化监听【字节一面】
84.单点登录是是什么,具体流程是什么【腾讯一面】
85.web网页如何禁止别人移除水印【百度一面】
86.用户访问页面白屏了,原因是啥,如何排查?
87.[代码实现]s中如何实现大对象深度对比
88.如何理解数据驱动视图,有哪些核心要素?【腾讯二面】
89.vue-cli都做了哪些事儿,有哪些功能?
90JS执行100万个任务,如何保证浏览器不卡顿?【百度一面】
91.JS放在head里和放在body里有什么区别?
92.Eslint代码检查的过程是啥?【必会】
93.虚拟混动加载原理是什么,用Js代码简单实现一个虚拟滚动加加载
94.[React]react-router和原生路由区别
95.html的行内元素和块级元素的区别【京东一面】
96.介绍-下requestlIdleCallback api
97.documentFragment api是什么,有哪些使用场景?【必会】
- git pull 和 git fetch 有啥区别?
99.前端如何做页面主题色切换【腾讯一面】
100.前端视角-如何保证系统稳定性【字节一面】
101.如何统计长任务时间、长任务执行次数【腾讯二面】
102.V8里面的J』T是什么?【京东一面]
103.用Js写一个cookies解析函数,输出结果为一个对象
104.vue中Scoped Styles是如何实现样式隔离的,原理是啥
105.样式阿商方式有哪些【字节一面】
106.在JS中,如何解决递归导致栈溢出问题?
107.站点如何防止爬虫?【百度一面】
108.ts项目中,如何使用nodemodules里面定义的全局类型包到自己项目src下面使用?【百度二面】
109.不同标签页或窗口间的【主动推送消息机制】的方式有哪些?(不借助服务端)
110.【React】在react项目开发过程中,是否可以不用reactrouter使用浏览器原生history路由来组织页面路由?
111.在表单校验场景中,如何实现页面视口滚动到报错的位置
112,如何一次性渲染十万条数据还能保证页面不卡顿【百度二面】
113.【webpack】打包时hash码是如何生成的【必会】
114.如何从0到1搭建前端基建【京东一面】
115.你在开发过程中,使用过哪些TS的特性或者能力?【美团一面】
116JS的加载会阻塞浏览器渲染吗?【百度一面】
117.浏览器对队头阻寒有什么优化?【百度一面)
118.Webpack项目中通过script 标签引入资源,在项目中如何处理?
119.应用上线后,怎么通知用户刷新当前页面?【腾讯一面】
120.Eslint代码检查的过程是啥?
121.HTTP是一个无状态的协议,那么Web应用要怎么保持用户的登录态呢?
122.如何检测网页空闲状态(一定时间内无操作)【百度二面】
123.为什么Vite速度比Webpack快?
124.列表分页,快速翻页下的竟态问题【百度二面】
125.JS执行100万个任务,如何保证浏览器不卡顿?
126.git 仓库迁移应该怎么操作
127.如何禁止别人调试自己的前端页面代码?【字节二面】
128.web系统里面,如何对图片进行优化?【必会】
129.0Auth2.0是什么登录方式
130.单点登录是如何实现的?
131.常见的登录鉴权方式有哪些?
132.需要在跨域请求中携带另外一个域名下的Cookie该如何操作?
133.vite和webpack在热更新上有啥区别?
134.封装一个请求超时,发起重试的代码
135.前端如何设置请求超时时间timeout【必会】
136.nodejs如何充分利用多核CPU?【字节二面】
137.后端一次性返回树形结构数据,数据量非常大前端该如何处理?
138.你认为组件封装的一些基本准则是什么?
139.页面加载速度提升(性能优化)应该从哪些反向来思考?
140.前端日志埋点SDK设计思路
141.token进行身份验证了解多少?【腾讯一面】
142.在前端应用如何进行权限设计?【字节二面】
143.【低代码】代码平台一般泊染是如何设计的?
144.【低代码】代码平台一般底层协议是怎么设计的
145.【Webpack】有哪些优化项目的手段?
146.IndexedDB存储空间大小是如何约束的?
147.浏览器的存储有哪些【腾讯一面】
148.【Webpack】如何打包运行时chunk,且在项自工程中如何去加载这个运行时chunk?
149.为何现在市面上做表格泊染可视化技术的,大多数都是canvas,而很少用svg的?
150.在你的项目中,使用过哪些webpack plugin,说一下他们的作用
151.在你的项目中,使用过哪些webpackloader,说一下他们的作用
152.【React】如何避免不必要的染?【美团一面】
153.全局样式命名冲突和样式盖问题怎么解决?
154.【React】如何实现专场动画?
155.【React】从React层面上,能做的性能优化有哪些?
156.[vUE】中为何不要把v-f和v-for同时用在同一个元素上,原理是什么?
157.将静态资源缓存在本地的方式有哪些?
158.SPA首屏加载速度慢的怎么解决
159.axios是如何区分是nodejs环境还是浏览器环境的?
160.如何拦截web应用的请求
内容涵盖:JavaScript、Vue、React、Node.js、Webpack、Typescript、性能优化、项目场景、小程序、HTML、CSS、ES6、前端安全等
希望能帮助到最近有面试的宝子们,今天的内容到此结束,期待大家点个小心心哦~
祝大家获得心仪的offer,早日财富自由!!!!