今天面试了个211前端男生，直接淘汰了-洪萨配资

其实，前端面试最先淘汰的就是说这几句话的

今天面了好几个前端岗的，技术实力不错，就是面试的时候一回答具体问题就特别笼统，缺乏细节，给大家整理了一下：

1.别说：“Vue 用 defineProperty 实现响应式”

✅ 改说：

“项目中升级
Vue 3 后，响应式改用 `Proxy`，解决了动态增删属性不更新的问题。比如权限配置字段，Vue 2 需 `$set`，Vue 3 天然支持。对大对象我们用 `
shallowRef` 减少监听开销。”

2.别说：“懒加载、gzip 提升性能”

✅ 改说：

“优化首屏时，通过 DevTools
发现 JS 过大，做了三件事：路由懒加载、第三方库外链 CDN、关键资源 `<link rel=preload>`。最终 LCP
从 3.2s 降至 1.4s，PV 提升 27%

3.别说：“开发用代理解决跨域”

✅ 改说：

“微服务下多域名调用，开发用
Vite 的 `server.proxy` 转发；生产由网关统一配
CORS 白名单。传递 Cookie 时前后端都要设 `withCredentials` 和 `credentials: 'include'`，漏配会导致登录态丢失——我们曾因此出过问题，后来加了 CI 检查。”

4.别说：“组件化+按功能分目录”

✅ 改说：

“我们规范为：`/pages` 按路由组织，组件分 `common`（通用）和 `features`（业务专用），共享逻辑抽成 `hooks`。并通过 ESLint
禁止跨模块引用，新人上手时间缩短一半。

5.别说：“写测试、用 ESLint”

✅ 改说：

“推行提交即检测：Husky 触发
Prettier 格式化，PR 必须通过 ESLint + Stylelint，CI 拒绝不合规代码。核心模块测试覆盖率 ≥80%，Jest
测试异步流程。上线后主流程 bug 数下降 60%。

三大原则

1. 具体化：不说“优化性能”，说“LCP 从 3.2s 降到 1.4s”
2. 讲权衡：说明为什么选 A 不选 B（如选 Vue 因团队熟悉）
3. 带结果：用数据证明效果（PV↑、Bug↓、加载快）

整理了一些面试高频题，趁现在还有时间，抓紧背吧！

JavaScript、CSS、ES6、Vue2、vue3、React
、Node.JS、小程序、HTTP、Typescript、Webpack
、
Git、Linux、算法与数据结构、设计模式、项目实战、简历模板等等。

先贴一下github： https://github.com/encode-studio-fe/natural_traffic/blob/master/material/scan_material1.md

JavaScript 部分

说说JavaScript中的数据类型?存储上的差别?
说说你了解的js数据结构?
DOM常见的操作有哪些?
说说你对BOM的理解,常见的BOM对象你了解哪些?
==和===区别，分别在什么情况使用
typeof 与instanceof区别
JavaScript原型,原型链?有什么特点?
说说你对作用域链的理解
谈谈this对象的理解
说说new操作符具体干了什么?
bind、call、 apply区别?如何实现一个bind?
JavaScript中执行上下文和执行栈是什么?
说说JavaScript中的事件模型
解释下什么是事件代理?应用场景?
说说你对闭包的理解?闭包使用场景
谈谈JavaScript中的类型转换机制
深拷贝浅拷贝的区别?如何实现一个深拷贝?
Javascript中如何实现函数缓存?函数缓存有哪些应用场景?
JavaScript字符串的常用方法有哪些?
数组的常用方法有哪些?
说说你对事件循环的理解

CSS

说说你对盒子模型的理解?
谈谈你对BFC的理解?
什么是响应式设计?响应式设计的基本原理是什么?如何做?
元素水平垂直居中的方法有哪些?如果元素不定宽高呢?
如何实现两栏布局,右侧自适应?三栏布局中间自适应呢?
css选择器有哪些?优先级?哪些屈性可以继承?
css中，有哪些方式可以隐藏页面元素?区别?
如何实现单行/多行文本溢出的省略样式?
CSS如何画一个三角形?原理是什么?
如何使用css完成视差滚动效果?
css3新增了哪些新特性?
css3动画有哪些?
介绍一下grid网格布局
说说flexbox (弹性盒布局模型),以及适用场景?
说说设备像素、css像素、设备独立像素、dpr.ppi之间的区别?
说说em/px/rem/vh/vw区别?
让Chrome支持小于12px的文字方式有哪些?区别?
怎么理解回流跟重绘?什么场景下会触发?
说说对Css预编语言的理解?有哪些区别?
如果要做优化,cSS提高性能的方法有哪些?

ES6

说说var. let、 const之间的区别
ES6中数组新增了哪些扩展?
函数新增了哪些扩展?
对象新增了哪些扩展?
你是怎么理解ES6中Promise的?使用场景?
你是怎么理解ES6中Module的?使用场景?
你是怎么理解ES6中Generator的?使用场景?
你是怎么理解ES6中Decorator的?使用场景?
你是怎么理解ES6新增Set. Map两种数据结构的?
你是怎么理解ES6中Proxy的?使用场景?

Vue2

请描述下对vue生命周期的理解
双向数据绑定是什么
Vue组件之间的通信方式都有哪些?
为什么data属性是一个函数而不是一个对象?
动态给vue的data添加一个新的属性时会发生什么?怎样解决?
v—if和v—for的优先级是什么?
v-show和v—if有什么区别?使用场景分别是什么?
你知道vue中key的原理吗?说说你对它的理解
说说你对vue的mixin的理解，有什么应用场景?
Vue常用的修饰符有哪些有什么应用场景
Vue中的$next Tick有什么作用?
Vue实例挂载的过程
你了解vue的diff算法吗?
Vue中组件和插件有什么区别?
Vue项目中你是如何解决跨域的呢?
有写过自定义指令吗?自定义指令的应用场景有哪些?
Vue中的过滤器了解吗?过滤器的应用场景有哪些?
说说你对slot的理解?slot使用场景有哪些?
什么是虚拟DOM?如何实现一个虚拟DOM?说说你的思路
Vue项目中有封装过axios吗?主要是封装哪方面的?
是怎么处理vue项目中的错误的?

Vue3

Vue3.0所采用的
Composition Api 与Vue2.x使用的Options Api有什么不同?
vue3.0的设计目标是什么?做了哪些优化
用Vue3.0写过组件吗?如果想实现一个Modal你会怎么设计?
vue3.0性能提升主要是通过哪几方面体现的?
Vue3.0里为什么要用Proxy API替代defineProperty APl?
说说Vue 3.0中Treeshaking特性?举例说明一下?

React

说说对React的理解?有哪些特性?
state和props有什么区别?
super()和super(props)有什么区别?
说说对React中类组件和函数组件的理解?有什么区别?
说说对受控组件和非受控组件的理解?应用场景?
说说React的事件机制?
React事件绑定的方式有哪些?区别?
React构建组件的方式有哪些?区别?
说说react中引入css的方式有哪几种?区别?
说说React生命周期有哪些不同阶段?每个阶段对应的方法是?
React中组件之间如何通信?
说说对高阶组件的理解?应用场景?
在react中组件间过渡动画如何实现?
说说你在React项目是如何捕获错误的?
说说对React refs的理解?应用场景?
说说React中的setState执行机制
说说React render方法的原理?在什么时候会被触发?
说说Real DOM和Virtual DOM的区别?优缺点?
说说React Jsx转换成真实DOM过程?
说说对Fiber架构的理解?解决了什么问题?

Node.JS

说说你对
Node.js的理解?优缺点?应用场景?
说说对Node中的fs模块的理解?有哪些常用方法
说说对Node 中的Buffer的理解?应用场景?
说说对Node 中的Stream的理解?应用场景?
说说对Node中的process的理解?有哪些常用方法?
说说Node中的EventEmitter?如何实现一个EventEmitter?
说说Node文件查找的优先级以及Require方法的文件查找策略?
说说Node有哪些全局对象?
说说对中间件概念的理解,如何封装node 中间件?
说说对Nodejs中的事件循环机制理解?
Node性能如何进行监控以及优化?
如何实现文件上传?说说你的思路
如何实现jwt鉴权机制?说说你的思路
如果让你来设计一个分页功能,你会怎么设计?前后端如何交互?

小程序

说说你对微信小程序的理解?优缺点?
说说微信小程序的生命周期函数有哪些?
说说微信小程序的登录流程?
说说微信小程序中路由跳转的方式有哪些?区别?
说说微信小程序的发布流程?
说说微信小程序的支付流程?
说说微信小程序的实现原理?
说说提高微信小程序的应用速度的手段有哪些?

HTTP

如何理解OSI七层模型?
如何理解TCP/IP协议?
如何理解UDP和TCP?区别?应用场景?
说一下GET和POST的区别?
说说TCP为什么需要三次握手和四次挥手?
说说HTTP常见的请求头有哪些?作用?
说说HTTP常见的状态码有哪些，适用场景?
什么是HTTP? HTTP和HTTPS的区别?
说说HTTP1.0/1.1/2.0的区别?
为什么说HTTPS比HTTP安全?HTTPS是如何保证安全的?
如何理解CDN?说说实现原理?
DNS协议是什么?说说DNS完整的查询过程?
说说对WebSocket的理解?应用场景?
说说地址栏输入URL敲下回车后发生了什么?

TypeScript

说说你对TypeScript的理解?与JavaScript的区别?
说说typescript的数据类型有哪些?
说说你对TypeScript中高级类型的理解?有哪些?
说说你对TypeScript中接口的理解?应用场景?
说说你对TypeScript中类的理解?应用场景?
说说你对TypeScript中枚举类型的理解?应用场景?
说说你对TypeScript中函数的理解?与JavaScript函数的区别?
说说你对TypeScript中泛型的理解?应用场景?
说说你对TypeScript装饰器的理解?应用场景?
说说对TypeScript中命名空间与模块的理解?区别?
说说如何在React项目中应用TypeScript?
说说如何在Vue项目中应用TypeScript?

Webpack

说说你对webpack的理解?解决了什么问题?
说说webpack的热更新是如何做到的?原理是什么?
说说webpack的构建流程?
说说webpack proxy工作原理?为什么能解决跨域?
说说webpack中常见的Loader?解决了什么问题?
说说webpack中常见的Plugin?解决了什么问题?
说说Loader和Plugin的区别?编写Loader，Plugin的思路?
如何提高webpack的构建速度?
说说如何借助webpack来优化前端性能?
与webpack类似的工具还有哪些?区别?

Git

说说你对版本管理的理解?常用的版本管理工具有哪些?
说你对Git的理解?
说说Git常用的命令有哪些?
说说Git中HEAD、工作树和索引之间的区别?
说说git发生冲突的场景?如何解决?
说说Git中fork,clone,branch这三个概念,有什么区别?
说说对git pull和git fetch的理解?有什么区别?
说说你对git rebase和git merge的理解?区别?
说说你对git reset和git revert的理解?区别?
说说你对git stash的理解?应用场景?

算法与数据结构

说说你对数据结构的理解?有哪些?区别?
说说你对算法的理解?应用场景?
说说你对算法中时间复杂度,空间复杂度的理解?如何计算?
说说你对集合的理解?常见的操作有哪些?
说说你对树的理解?相关的操作有哪些?
说说你对栈、队列的理解?应用场景?
说说你对链表的理解?常见的操作有哪些?
说说你对堆的理解?如何实现?应用场景?
说说你对图的理解?相关操作有哪些?
说说常见的排序算法有哪些?区别?
说说你对冒泡排序的理解?如何实现?应用场景?
说说你对二分查找的理解?如何实现?应用场景?
说说你对快速排序的理解?如何实现?应用场景?
说说你对选择排序的理解?如何实现?应用场景?
说说你对插入排序的理解?如何实现?应用场景?
说说你对分而治之、动态规划的理解?区别?
说说你对归并排序的理解?如何实现?应用场景?
说说你对贪心算法、回溯算法的理解?应用场景?

由于平台的篇幅限制，更多更详细的内容无法一一展示，只能把部分的内容粗略地介绍一下（毕竟将近一千四百页的文档）。需要的小伙伴： https://github.com/encode-studio-fe/natural_traffic/blob/master/material/scan_material1.md