今天面试了个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