面试——前端 AI 篇（2026）
前端 AI 面试主要考什么？ 重点不是训练大模型，而是如何把 AI 能力稳定、安全、低延迟地集成进前端产品。 高频方向包括流式响应、聊天 UI、RAG、工具调用、Agent、多模态、安全、成本和可观测性。 前端工程师需要懂大模型到什么程度？ 需要理解模型输入输出、上下文窗口、token、流式返回、工具调用和结构化输出。 不一定要会训练模型，但要能把模型能力变成可靠的用户体验。 LLM 应用和传统前端应用最大的区别是什么？ 传统应用输出相对确定，LLM 应用输出具有概率性和不确定性。 因此前端要额外处理加载过程、流式状态、错误兜底、结果校验和安全边界。 前端接入 AI 的常见架构是什么？ 浏览器不直接调用模型密钥，而是请求自己的后端或边缘函数。 后端负责鉴权、拼 prompt、调用模型、处理工具、做审计和返回流式结果。 为什么不建议前端直连大模型 API？ API Key 会暴露在浏览器里，任何用户都能提取并滥用。 业务规则、权限校验、限流、日志和安全过滤也不应该放在纯前端。 AI 应用里的 token 是什么？ token 是模型处理文本的基本单位，可以理解为...
面试——css篇（2026）
2026 年 CSS 面试重点有哪些？ 重点不只是盒模型、居中和 BFC，还包括现代布局、容器查询、级联层、:has()、CSS 嵌套、@scope、动画性能和工程治理。 面试更看重你能不能解释“为什么这样写更稳”，以及如何处理复杂项目里的样式冲突、性能和兼容性。 CSS 的核心能力是什么？ CSS 负责描述页面表现，包括布局、排版、颜色、动画、响应式和视觉状态。 现代 CSS 已经从“写样式”扩展到组件作用域、设计系统、主题变量和交互状态管理。 CSS 级联由哪些因素决定？ 主要由来源、重要性、级联层、选择器优先级、作用域距离和源码顺序共同决定。 不要只背“id 大于 class”，现代 CSS 还要理解 @layer 和 @scope。 CSS 优先级怎么计算？ 通常按内联样式、ID、类/属性/伪类、标签/伪元素来比较。 同级优先级相同时，后声明的规则覆盖先声明的规则。 !important 为什么要少用？ 它会提高声明重要性，让后续覆盖变困难。 大型项目中滥用 !important 会让样式系统失控，应优先用层级、作用域和结构解...
面试——前端工程化篇（2026）
前端工程化主要解决什么问题？ 它解决的是项目从开发、构建、测试、发布到监控的全流程效率和质量问题。 核心目标是让团队在规模变大后仍然能稳定交付、快速迭代、可回滚、可追踪。 2026 年前端工程化面试重点有哪些？ 高频方向包括 Vite、Webpack、构建性能、产物优化、Monorepo、CI/CD、灰度发布、微前端和包管理。 面试更看重“为什么这么做”和“线上问题如何定位”，而不只是背配置项。 Vite 的核心思想是什么？ 开发阶段利用浏览器原生 ESM 按需加载源码，避免每次启动都打完整包。 生产阶段仍会进行打包、压缩、Tree Shaking 和资源切分，保证线上加载效率。 Vite 为什么启动快？ 它不需要先把整个项目 bundle 完再启动服务，而是先启动 dev server。 源码模块在浏览器请求时才转换，依赖则提前预构建并缓存。 Vite 开发环境和生产环境为什么不是同一套机制？ 开发环境追求启动快、热更新快，所以基于 ESM 按需转换。 生产环境追求资源体积、缓存命中和加载性能，所以仍需要打包优化。 Vite 的依赖预构建是什么？ ...
面试——vue3篇（2026）
Vue3 相比 Vue2 最大的变化是什么？ 响应式从 Object.defineProperty 改为基于 Proxy，对象新增、删除属性也能被追踪。 新增 Composition API，更适合复杂逻辑复用和大型项目组织。 编译器、运行时、Tree-shaking、TypeScript 支持都有明显提升。 Vue3 还引入了 Fragment、Teleport、Suspense、多个根节点等能力。 Vue3 为什么使用 Proxy 做响应式？ Proxy 可以代理整个对象，不需要像 Vue2 那样递归劫持每个属性。 它能监听属性新增、删除、in、ownKeys 等操作。 对数组下标和 length 的处理也更自然。 缺点是无法兼容 IE11。 Vue3 响应式的基本流程是什么？ 读取响应式数据时，通过 track 收集当前副作用函数。 修改响应式数据时，通过 trigger 找到依赖并触发更新。 组件渲染本质上也是一个响应式副作用。 依赖收集依赖“读取”，没有读取过的数据变化不会触发当前组件更新。 reactive 和 ref 有什么区别？ reactive 通常...
面试——react篇（2026）
React 是什么？ React 是一个用于构建用户界面的 JavaScript 库，核心是组件化、声明式 UI 和状态驱动视图。 React 只关心视图层，本身不强制路由、请求、状态管理方案。 它适合把复杂页面拆成多个可复用组件，再通过数据变化驱动页面更新。 React 的核心思想有哪些？ 组件化：把页面拆成独立组件，降低维护成本。 声明式：描述 UI 的最终状态，不直接命令式操作 DOM。 单向数据流：父组件通过 props 向下传递数据，子组件通过回调通知父组件。 状态驱动视图：state 或 props 变化后，React 重新计算 UI。 React 和 Vue 的区别？ React 更偏函数和 JSX 表达能力，Vue 更偏模板和渐进式框架体验。 React 官方生态相对克制，路由、状态、请求多由社区方案组合。 Vue 提供更多内置约定，比如模板语法、指令、SFC、响应式系统等。 面试时不要说谁更好，重点说团队技术栈、项目复杂度和生态选择。 JSX 是什么？ JSX 是 JavaScript 的语法扩展，可以在 JS 中写类似 HTML 的结构。 JSX ...
面试——node篇
node模块化原理 Node 异步单线程原理？（Nodejs如何实现高并发的） Node.js 实现异步的核心是事件，也就是说，它把每一个任务都当成 事件 来处理，然后通过 Event Loop 模拟了异步的效果 每个Node.js进程只有一个主线程在执行程序代码，形成一个执行栈（execution context stack) 主线程之外，还维护了一个”事件队列”（Event queue）。当用户的网络请求或者其它的异步操作到来时，node都会把它放到Event Queue之中，此时并不会立即执行它，代码也不会被阻塞，继续往下走，直到主线程代码执行完毕。 主线程代码执行完毕完成后，然后通过Event Loop，也就是事件循环机制，开始到Event Queue的开头取出第一个事件，从线程池中分配一个线程去执行这个事件，接下来继续取出第二个事件，再从线程池中分配一个线程去执行，然后第三个，第四个。主线程不断的检查事件队列中是否有未执行的事件，直到事件队列中所有事件都执行完了，此后每当有新的事件加入到事件队列中，都会通知主线程按顺序取出交EventLoop处理。当有事件执行完毕后，会...
面试——笔试篇
手写函数防抖和节流 防抖：//防抖debounce代码：function debounce(fn,delay) { var timeout = null; // 创建一个标记用来存放定时器的返回值 return function (e) { // 每当用户输入的时候把前一个 setTimeout clear 掉 clearTimeout(timeout); // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发，就不会执行 fn 函数 timeout = setTimeout(() => { fn.apply(this, arguments); }, delay); };}// 处理函数function handle() { console.log('防抖：', Math.random());} /...
面试——css篇
css 优先级 答：important > 内联 > ID选择器 > 类选择器 > 标签选择器 避免 css 全局污染。 通过在css文件的选择器上使用:local* 例如：:local(.className) { background: red; } 在vue项目中使用deep* 例如：:deep(.el-carousel__arrow–right) { right: 120px; } 在react项目中使用:global* 例如： <RangePicker className={styles.rangePick} showTime format="YYYY-MM-DD HH:mm:ss" /><br>.rangePick{ :global { .ant-picker-input { color:red } }} 页面导入样式时，使用link和@import有什么区别？ link属于XHTML标签，...
面试——webpack篇
webpack与grunt、gulp的不同？ 三者都是前端构建工具，grunt和gulp在早期比较流行，现在webpack相对来说比较主流，不过一些轻量化的任务还是会用gulp来处理，比如单独打包CSS文件等。 grunt和gulp是基于任务和流（Task、Stream）的。类似jQuery，找到一个（或一类）文件，对其做一系列链式操作，更新流上的数据， 整条链式操作构成了一个任务，多个任务就构成了整个web的构建流程。 webpack是基于入口的。webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。 所以总结一下：gulp和grunt需要开发者将整个前端构建过程拆分成多个Task，并合理控制所有Task的调用关系 webpack需要开发者找到入口，并需要清楚对于不同的资源应该使用什么Loader做何种解析和加工 Grunt与Gulp的区别 书写方式：- grunt 运用配置的思想来写打包脚本，一切皆配置，所以会出现比较多的配置项，诸如option,src,dest等等。而且不同...
面试——typescript篇
interface 和 type 的区别 type可以声明 基本类型，联合类型，元组 的别名，interface不行 type 语句中可以使用 typeof 获取类型实例 type 支持类型映射，interface不支持 interface能够声明合并，type不能 typescript中对抽象类和interface的理解 ts如何对早期库比如jquery如何补充类型 ts中的可选和必选 动态runtime注入的类型怎样做才能静态不报错 说说Typescript的优缺点？ 优点. 快速简单，易于学习。 编译时提供错误检查， 在代码运行前就会进行错误提示。 支持所有的JS库。 支持ES6，提供了ES6所有优点和更高的生产力。 使用继承提供可重用性。 有助于代码结构。 通过定义模块来定义命名空间。 缺点: 需要长时间的来编译代码。 在使用第三方库时，需要有三方库的定义文件，并不是所有三方库都提供了定义文件，提供的定义文件是否准确也值得商榷。 如何理解Typescript中的类？并说说它有什么特性？ Typescript是一种面向对象的Javascript语言，和其他...