Web 前端工程师面试题（含答案）
一、HTML/CSS/HTML5/CSS3 面试题（10 题）
1. HTML5 新增了哪些语义化标签？语义化的好处是什么？
答案 ：
- 新增标签：<header>、<nav>、<main>、<section>、<article>、<footer>、<aside>、<figure> 等；
- 好处：提升代码可读性、利于 SEO 搜索引擎抓取、屏幕阅读器更好识别、便于团队维护。
2. CSS3 新增的核心特性有哪些？
答案 ：选择器（属性选择器、伪类选择器）、盒子模型（box-sizing）、渐变（linear-gradient）、过渡（transition）、动画（animation/@keyframes）、变形（transform）、弹性布局（flex）、网格布局（grid）、阴影（box-shadow/text-shadow）、圆角（border-radius）。
3. 说一下 flex 布局常用属性及作用
答案 ：父容器：display:flex 开启弹性布局；flex-direction 控制主轴方向；justify-content 主轴对齐；align-items 交叉轴对齐；flex-wrap 是否换行。子元素：flex 缩放比例；align-self 单独控制对齐。
4. 实现一个元素水平垂直居中的方法（至少 2 种）
答案 ：
- flex 布局：父元素 display:flex; justify-content:center; align-items:center
- 定位 + transform：子元素 position:absolute; left:50%; top:50%; transform:translate(-50%,-50%)
5. CSS 盒模型分为哪两种？区别是什么？
答案 ：标准盒模型（box-sizing:content-box）：宽高只包含内容；怪异盒模型（box-sizing:border-box）：宽高包含内容 + 内边距 + 边框。
6. 什么是 BFC？触发条件和作用？
答案 ：BFC（块级格式化上下文）是独立渲染区域，内部元素不影响外部。触发条件：float 不为 none、position:absolute/fixed、display:flex/inline-block、overflow 不为 visible。作用：清除浮动、解决 margin 重叠、包含浮动元素。
7. 清除浮动的常用方法
答案 ：
- 父元素设置 overflow:hidden
- 额外标签法 <div style="clear:both"></div>
- 伪元素清除法（推荐）：.clearfix::after{content:"";display:block;clear:both}
8. rem、em、px、vw/vh 的区别
答案 ：px：固定像素；em：相对于父元素字体大小；rem：相对于根元素 html 字体大小；vw/vh：视口宽度 / 高度的 1%。
9. CSS 优先级规则
答案 ：!important > 行内样式 > ID 选择器 > 类选择器 / 属性选择器 / 伪类 > 标签选择器 > 通配符。
10. 什么是重排和重绘？如何优化？
答案 ：重排：元素尺寸 / 位置变化，浏览器重新渲染；重绘：样式变化不影响布局。优化：批量修改 DOM、使用文档碎片、避免频繁读取 offset 属性、使用 CSS3 硬件加速。
二、JavaScript/ES6 面试题（15 题）
1. JS 数据类型有哪些？如何判断？
答案 ：基本类型：string、number、boolean、null、undefined、symbol、bigint；引用类型：object、array、function；判断：typeof（基础类型）、instanceof（引用类型）、Object.prototype.toString.call ()（精准判断）。
2. var/let/const 的区别
答案 ：var：函数级作用域、变量提升、可重复声明、可修改；let：块级作用域、无变量提升、不可重复声明、可修改；const：块级作用域、必须初始化、不可修改引用地址（引用类型内容可改）。
3. 箭头函数和普通函数的区别
答案 ：无 this、无 arguments、不能作为构造函数、不能使用 yield、写法更简洁。
4. 闭包是什么？作用和缺点？
答案 ：闭包：函数嵌套函数，内部函数访问外部函数变量。作用：私有化变量、延长变量生命周期、实现模块化。缺点：滥用会导致内存泄漏。
5. 原型和原型链理解
答案 ：每个对象都有__proto__，指向构造函数的 prototype；原型链：对象通过__proto__逐级向上查找，最终指向 Object.prototype，再向上为 null。
6. Promise 是什么？常用方法？
答案 ：Promise 是异步编程解决方案，解决回调地狱。状态：pending/fulfilled/rejected；常用方法：then/catch/finally、Promise.all、Promise.race、Promise.resolve。
7. async/await 优点？
答案 ：基于 Promise，异步代码同步写法，可读性更高，错误捕获更方便（try/catch）。
8. 防抖和节流是什么？应用场景？
答案 ：防抖：频繁触发只执行最后一次（搜索框输入、窗口 resize）；节流：固定时间只执行一次（滚动条、按钮点击）。
9. 深拷贝和浅拷贝区别？实现深拷贝？
答案 ：浅拷贝：只复制一层，引用类型共享地址；深拷贝：完全复制，互不影响。实现：JSON.parse (JSON.stringify ())、递归函数、lodash.cloneDeep。
10. 数组常用方法（ES5+ES6）
答案 ：ES5：push/pop/shift/unshift/splice/slice/map/filter/reduce/forEach；ES6：find/findIndex/includes/flat/Array.from。
11. 作用域和作用域链
答案 ：作用域：变量 / 函数可访问范围；作用域链：内部作用域逐级向上查找变量的链条。
12. this 指向规则
答案 ：默认指向 window；对象方法指向对象；构造函数指向实例；箭头函数继承外层 this；bind/apply/call 可修改指向。
13. 解构赋值用法
答案 ：数组 / 对象快速取值，例：const {name,age} = obj、const [a,b] = arr。
14. 模块化：export/import 用法
答案 ：导出：export 单个导出、export default 默认导出；导入：import {xx} from 'xx'、import xx from 'xx'。
15. 事件冒泡和事件捕获？如何阻止？
答案 ：冒泡：事件从子元素向上传递；捕获：从父元素向下传递。阻止冒泡：e.stopPropagation ()；阻止默认行为：e.preventDefault ()。
三、SVG/Canvas/ 前端可视化（ECharts/AntV/D3）面试题（8 题）
1. SVG 和 Canvas 的区别
答案 ：SVG：矢量图、不依赖分辨率、DOM 操作、支持事件、适合静态图表 / 图标；Canvas：位图、依赖分辨率、JS 绘制、不支持单独事件、适合大数据量可视化 / 动画。
2. 项目中如何使用 ECharts？核心步骤
答案 ：
- 安装 / 引入 ECharts；
- 初始化实例：const myChart = echarts.init(dom)；
- 配置 option（xAxis/yAxis/series 等）；
- 渲染：myChart.setOption(option)；
- 窗口变化自适应：window.addEventListener('resize',()=>myChart.resize())。
3. ECharts 如何实现图表自适应？
答案 ：监听 window.resize 事件，调用实例的 resize () 方法，可配合防抖优化。
4. D3.js 和 ECharts 的区别？适用场景
答案 ：ECharts：开箱即用、配置简单、适合快速开发业务图表；D3：高度自定义、底层绘图、适合复杂定制化可视化项目。
5. AntV 常用库有哪些？作用
答案 ：G2：图表库；G6：图关系可视化；X6：图编辑引擎；L7：地理空间可视化。
6. Canvas 实现绘制矩形的核心代码
答案 ：
js
const canvas = document.querySelector('canvas')const ctx = canvas.getContext('2d')
ctx.fillStyle = 'red'
ctx.fillRect(10,10,100,100) // 绘制实心矩形
7. 可视化项目性能优化点
答案 ：大数据量使用采样 / 聚合、开启 ECharts 按需渲染、Canvas 替代 SVG、避免频繁重绘、使用 web-worker。
8. 如何实现 ECharts 图表响应式数据更新？
答案 ：数据变化时，重新组装 option，调用setOption方法，ECharts 会自动合并配置并更新。
四、Vue 全家桶 面试题（18 题）
1. Vue2 和 Vue3 核心区别
答案 ：Vue3：Composition API、Proxy 响应式、Tree-shaking、Teleport/Suspense 新组件、性能更高。
2. Vue 响应式原理
答案 ：Vue2：Object.defineProperty 劫持对象 get/set；Vue3：Proxy 代理整个对象，支持数组 / 对象全监听。
3. v-show 和 v-if 区别
答案 ：v-if：销毁 / 重建 DOM，适合不频繁切换；v-show：控制 display 样式，DOM 保留，适合频繁切换。
4. computed 和 watch 区别
答案 ：computed：计算属性，有缓存，依赖多个值，必须 return；watch：监听属性，无缓存，监听单个值，可执行异步操作。
5. Vue 组件通信方式（至少 4 种）
答案 ：
- 父→子：props
- 子→父：$emit
- 兄弟：eventBus
- 全局：Vuex/Pinia
- 跨级：provide/inject
6. Vue 生命周期（Vue2/Vue3）
答案 ：Vue2：beforeCreate/created/beforeMount/mounted/beforeUpdate/updated/beforeDestroy/destroyed；Vue3：setup 替代 beforeCreate/created，onMounted/onUpdated 等。
7. Vue 路由 VueRouter 核心模式
答案 ：hash 模式：带 #，基于锚点，兼容性好；history 模式：无 #，基于 H5 history API，需要后端配置支持。
8. 路由守卫有哪些？作用
答案 ：全局守卫：beforeEach（权限控制）；路由独享守卫：beforeEnter；组件内守卫：beforeRouteEnter。
9. Vuex 核心概念
答案 ：state（数据）、mutations（修改同步数据）、actions（异步操作）、getters（计算属性）、modules（模块化）。
10. Pinia 相比 Vuex 优点
答案 ：写法更简洁、无需 mutations、支持 TS、天然模块化、体积更小。
11. $nextTick 作用
答案 ：DOM 更新完成后执行回调，用于获取更新后的 DOM。
12. 自定义指令用法
答案 ：全局：Vue.directive；局部：directives 选项，用于封装 DOM 操作。
13. keep-alive 作用
答案 ：缓存组件，避免重复创建销毁，提升性能，搭配 activated/deactivated 使用。
14. Vue 修饰符常用有哪些？
答案 ：事件：.stop/.prevent/.once；按键：.enter；表单：.trim/.number。
15. 虚拟 DOM 和 Diff 算法作用
答案 ：虚拟 DOM：JS 对象模拟真实 DOM，减少 DOM 操作；Diff 算法：对比新旧虚拟 DOM，最小化更新 DOM。
16. Vue 打包优化方法
答案 ：路由懒加载、代码分割、CDN 引入第三方库、图片压缩、开启 gzip。
17. 父子组件生命周期执行顺序
答案 ：挂载：父 beforeCreate→父 created→父 beforeMount→子 beforeCreate→子 created→子 beforeMount→子 mounted→父 mounted。
18. Vue 中 data 为什么是函数？
答案 ：保证每个组件实例拥有独立数据对象，避免组件间数据共享污染。
五、VSCode/Git/SVN/Node.js 面试题（10 题）
1. VSCode 前端常用插件（至少 5 个）
答案 ：Volar、ESLint、Prettier、Auto Rename Tag、Live Server、Path Intellisense。
2. Git 常用命令
答案 ：git init、git clone、git add、git commit、git push、git pull、git branch、git checkout、git merge、git log。
3. Git 如何解决冲突？
答案 ：拉取最新代码→手动编辑冲突文件→git add→git commit→git push。
4. Git 和 SVN 区别
答案 ：Git：分布式版本控制，离线可操作，分支灵活；SVN：集中式版本控制，必须联网，分支管理弱。
5. Node.js 是什么？作用？
答案 ：基于 Chrome V8 引擎的 JS 运行环境，可实现服务端开发、构建工具、接口代理。
6. npm 和 yarn/pnpm 区别
答案 ：npm：官方包管理器；yarn：速度更快、缓存优化；pnpm：硬链接，节省磁盘空间。
7. package.json 核心字段
答案 ：name/version/scripts/dependencies/devDependencies/main。
8. Node 常用内置模块
答案 ：fs（文件）、path（路径）、http（服务）、url（地址）。
9. 前端跨域解决方案
答案 ：CORS、代理服务器（webpack devServer）、JSONP、nginx 反向代理。
10. webpack 核心概念
答案 ：entry（入口）、output（出口）、loader（加载器）、plugin（插件）、mode（模式）。
六、前后端分离 面试题（4 题）
1. 什么是前后端分离？优势？
答案 ：前端负责页面渲染交互，后端负责接口数据，通过 API 通信。优势：开发效率高、职责清晰、支持多端复用、便于维护部署。
2. 前后端交互流程
答案 ：前端请求接口→后端处理数据→返回 JSON→前端解析渲染→异常处理。
3. 接口请求常用库？封装思路？
答案 ：axios；封装：统一请求地址、请求 / 响应拦截、token 处理、错误统一提示、请求头配置。
4. 如何处理接口跨域、请求超时、异常？
答案 ：跨域：CORS / 代理；超时：axios 配置 timeout；异常：响应拦截统一捕获并提示。
总结
- 全覆盖考点 ：完全匹配岗位要求的 HTML/CSS/JS、可视化、Vue、工程化、前后端分离所有技能点；
- 答案标准化 ：简洁易懂，适合面试口述，无冗余内容；
- 分层设计 ：基础题考察功底，核心题考察技能，项目题考察实战能力。