Web前端开发面试题及答案（实战版）
一、基础语法与DOM操作（高频）
问：CSS中box-sizing:content-box和border-box的区别？实际开发中常用哪种？
答：content-box是默认值，元素宽度=设置的width+padding+border（padding和border会撑大元素）；border-box中，元素宽度=设置的width（padding和border包含在width内）。
实际开发常用border-box，比如做表单输入框、卡片布局时，不用反复计算padding和border的影响，避免布局错位。
问：JS中this的指向有哪些情况？举个实际开发中容易踩坑的例子。
答：this指向取决于调用方式：
普通函数调用：指向window（严格模式下undefined）；
对象方法调用：指向调用方法的对象；
构造函数new调用：指向新创建的实例；
箭头函数：没有自己的this，继承外层作用域的this。
踩坑例：在定时器setTimeout中用普通函数，this会指向window，比如constobj={name:a,fn(){setTimeout(function(){console.log()})}}，此时输出undefined，改成箭头函数setTimeout(()={console.log()})就能正确指向obj。
问：如何实现一个原生JS的防抖函数？说下应用场景。
答：防抖是让函数在触发后延迟n秒执行，若n秒内再次触发则重新计时。代码示例：
functiondebounce(fn,delay){
lettimer=null;
returnfunction(...args){
clearTimeout(timer);//重新触发时清除之前的定时器
timer=setTimeout(()={
fn.apply(this,args);//绑定this和参数
},delay);
};
}
场景：搜索框输入联想（避免输入一次发一次请求）、窗口resize事件（避免频繁触发布局计算）。
二、框架应用（Vue/React）
问：Vue3的组合式API（CompositionAPI）相比Vue2的选项式API（OptionsAPI）有什么优势？举个项目中的使用场景。
答：优势有3点：
逻辑复用更灵活：比如多个组件都需要“获取用户信息+格式化时间”的逻辑，用组合式API可抽成独立函数，不用靠mixins（避免命名冲突）；
大型组件更易维护：选项式API的data、methods、watch分散，组合式API可把相关逻辑（比如表单校验逻辑）集中在一起；
类型支持更好：配合TypeScript时，组合式API的变量和函数类型推导更清晰。
场景：做后台管理系统的“表格+分页+筛选”组件，用组合式API把“获取表格数据”“处理分页切换”“筛选条件变化”的逻辑放在一起，代码结构更清晰。
问：React中useEffect的依赖数组是空数组、不传、传特定值，分别代表什么？实际开发中怎么避免依赖数组警告？
答：
空数组：只在组件挂载时执行一次，相当于componentDidMount；
不传：组件挂载、更新（任何state/props变化）时都会执行，相当于componentDidMount+componentDidUpdate；
传特定值：只有依赖数组中的值变化时才执行。
避免警告：如果useEffect里用到了某个变量/函数，必须加到依赖数组里；若不想让它触发更新，可把变量定义在useEffect内部，或用useCallback/useMemo缓存函数/计算属性（比如consthandleClick=useCallback(()={...},[])）。
三、工程化与性能优化
问：webpack打包时，如何优化打包体积和打包速度？各说2个实际配置方案。
答：
优化体积：
用TreeShaking：只打包被引用的代码，需确保代码是ES模块（import/export），在webpack.config.js中设置mode:production（默认开启）；
代码分割（CodeSplitting）：用splitChunks拆分第三方库（比如react、vue），配置：
optimization:{
splitChunks:{
chunks