前端工程师面试题及JavaScript进阶技巧含答案

2026年前端工程师面试题及JavaScript进阶技巧含答案一、HTML与CSS基础（共5题，每题2分）1.请解释HTML5中的`<video>`和`<audio>`标签的常用属性及其作用。答案：`<video>`和`<audio>`是HTML5中的多媒体标签，常用属性如下：-`src`：指定媒体文件的路径。-`controls`：显示播放控件（播放、暂停、音量等）。-`autoplay`：页面加载后自动播放。-`loop`：循环播放。-`muted`：静音播放。-`poster`：视频加载前显示的图片。-`preload`：设置预加载策略（`auto`、`metadata`、`none`）。解析：这些属性是前端开发中常用的多媒体控制手段，需熟悉其作用以优化用户体验。2.如何实现一个水平垂直居中的布局，要求兼容IE10及以上浏览器？答案：方法一：使用Flexbox（兼容IE10+）：html<divclass="container"><divclass="content">居中内容</div></div><style>.container{display:flex;align-items:center;/垂直居中/justify-content:center;/水平居中/height:100vh;}</style>方法二：使用传统定位（兼容IE10+）：html<divclass="container"><divclass="content">居中内容</div></div><style>.container{position:relative;height:100vh;}.content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}</style>解析：Flexbox更简洁，但传统定位兼容性更广。需根据项目需求选择。3.CSS3动画的`transition`和`animation`有什么区别？答案：-`transition`：用于简单的状态变化（如hover效果），支持`trigger-event`触发。-`animation`：支持多个关键帧（@keyframes），可独立触发，更复杂。示例：css/transition/.element:hover{transition:all0.3sease;}/animation/@keyframesrotate{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.element{animation:rotate2sinfinite;}解析：`transition`适合简单效果，`animation`适合复杂序列动画。4.CSS中的`box-sizing`属性有哪些值？默认值是什么？答案：-`content-box`（默认）：宽度仅包含内容。-`border-box`：宽度包含内容、边框、内边距。示例：css.box-sizing:border-box;/width=content+border+padding/解析：`border-box`在响应式设计中更常用，避免宽度计算误差。5.如何实现一个两栏布局，左侧固定宽度，右侧自适应？答案：方法一：传统定位：html<divclass="layout"><divclass="sidebar">固定宽度</div><divclass="content">自适应</div></div><style>.sidebar{width:200px;float:left;}.content{margin-left:200px;}</style>方法二：Flexbox：css.layout{display:flex;}.sidebar{width:200px;}.content{flex-grow:1;}解析：Flexbox更现代，传统方法兼容性更广。二、JavaScript基础（共8题，每题3分）6.解释JavaScript中的`undefined`和`null`的区别。答案：-`undefined`：未定义的变量或缺失的属性值。-`null`：显式清空变量或表示“空值”。示例：javascriptleta;//undefinedletb=null;//显式空值解析：`undefined`是JavaScript的原始类型，`null`是对象类型，用于区分“未赋值”和“清空值”。7.`let`和`const`的区别是什么？答案：-`let`：块级作用域，可重新赋值。-`const`：块级作用域，不可重新赋值，但对象属性可修改。示例：javascriptletx=1;x=2;//可consty=1;y=2;//报错constobj={a:1};obj.a=2;//可解析：`const`用于声明不可变变量，提高代码安全性。8.`==`和`===`的区别是什么？答案：-`==`：自动类型转换后比较。-`===`：严格比较（值和类型都相同）。示例：javascript"0"==0;//true"0"===0;//false解析：建议使用`===`避免隐式类型转换错误。9.解释JavaScript中的闭包（Closure）及其应用场景。答案：闭包是函数及其词法环境的组合，可访问外部作用域变量。应用场景：-防止全局变量污染。-实现私有变量。示例：javascriptfunctioncreateCounter(){letcount=0;returnfunction(){count++;console.log(count);};}constcounter=createCounter();counter();//1counter();//2解析：闭包常用于模块化开发。10.`setTimeout`和`setInterval`的区别是什么？如何避免`setInterval`的潜在问题？答案：-`setTimeout`：执行一次。-`setInterval`：循环执行。问题：`setInterval`在函数执行时间过长时可能导致延迟。解决方案：javascriptsetInterval(()=>{//长时间操作},1000);改为：javascriptfunctionlongTask(){//执行操作}setInterval(longTask,1000);解析：避免直接在`setInterval`中执行复杂逻辑。11.解释JavaScript中的原型链（PrototypeChain）。答案：对象通过`__proto__`或`Object.getPrototypeOf()`访问原型，最终指向`Ototype`。示例：javascriptconstobj={};console.log(obj.__proto__===Ototype);//true解析：原型链是JavaScript继承的基础。12.`JSON.stringify`和`JSON.parse`的作用是什么？答案：-`JSON.stringify(obj)`：对象转JSON字符串。-`JSON.parse(str)`：JSON字符串转对象。示例：javascriptconstobj={a:1};conststr=JSON.stringify(obj);//'{"a":1}'constparsed=JSON.parse(str);//{a:1}解析：用于前后端数据传输。13.如何判断一个变量是否为数组？答案：方法一：`Array.isArray()`（推荐）。方法二：`instanceofArray`。方法三：`Ototype.toString.call(x)==='[objectArray]'`。示例：javascriptArray.isArray([]);//true解析：`Array.isArray()`是最可靠的方法。三、JavaScript进阶技巧（共7题，每题4分）14.解释`async/await`的原理及其优势。答案：`async/await`是语法糖，基于Promise实现。优势：-代码可读性高，类似同步写法。-错误处理用`try/catch`。示例：javascriptasyncfunctionfetchUser(){try{constres=awaitfetch('/user');returnawaitres.json();}catch(err){console.error(err);}}解析：简化异步编程，但需注意Promise的执行机制。15.如何实现一个防抖（Debounce）函数？答案：防抖指连续操作只在最后一次触发后执行。javascriptfunctiondebounce(fn,delay){lettimer;returnfunction(){clearTimeout(timer);timer=setTimeout(()=>{fn.apply(this,arguments);},delay);};}解析：适用于搜索框输入、窗口调整等场景。16.解释事件委托（EventDelegation）的原理及优缺点。答案：原理：利用事件冒泡，在父元素上绑定事件，减少事件绑定数量。优点：-减少内存占用。-动态添加元素无需重新绑定。缺点：-事件处理逻辑较复杂。示例：javascriptdocument.getElementById('container').addEventListener('click',(e)=>{if(e.target.matches('.item')){console.log(e.target.textContent);}});解析：适用于动态列表或大量元素的场景。17.如何实现一个深度克隆（DeepClone）函数？答案：方法一：递归（需注意循环引用）：javascriptfunctiondeepClone(obj,hash=newWeakMap()){if(obj===null)returnnull;if(objinstanceofDate)returnnewDate(obj);if(objinstanceofRegExp)returnnewRegExp(obj);if(typeofobj!=='object')returnobj;if(hash.has(obj))returnhash.get(obj);constclone=newobj.constructor();hash.set(obj,clone);for(constkeyinobj){clone[key]=deepClone(obj[key],hash);}returnclone;}解析：需处理特殊对象（如Date、RegExp）和循环引用。18.解释Promise的`all`、`race`方法及其应用场景。答案：-`Promise.all(promises)`：所有Promise成功返回数组，任一失败即拒绝。-`Promise.race(promises)`：最快完成的Promise决定结果。示例：javascriptPromise.all([p1,p2]).then(res=>console.log(res));Promise.race([p1,p2]).then(res=>console.log(res));解析：`all`用于并行任务，`race`用于超时控制。19.如何实现一个柯里化（Currying）函数？答案：柯里化将多参数函数转化为单参数函数链。javascriptfunctioncurry(fn){returnfunction(...args){if(args.length>=fn.length){returnfn.apply(this,args);}returnfunction(...moreArgs){returncurry(fn.bind(this,...args,...moreArgs));};};}示例：javascriptconstadd=curry((a,b,c)=>a+b+c);add(1)(2)(3);//6解析：提高函数的灵活性和复用性。四、前端框架与工程化（共5题，每题4分）20.Vue3的CompositionAPI相比OptionsAPI有什么优势？答案：-命名更清晰（如`setup`、`computed`）。-逻辑复用更方便（如`provide/inject`）。-代码组织更灵活。解析：CompositionAPI更适合复杂组件。21.React中的`memo`和`useMemo`有什么区别？答案：-`React.memo`：高阶组件，优化函数组件的渲染。-`useMemo`：Hook，缓存计算结果。示例：javascriptReact.memo(Component);constmemoizedValue=useMemo(()=>computeExpensiveValue(a),[a]);解析：`memo`用于组件，`useMemo`用于计算缓存。22.Webpack的`CodeSplitting`如何实现？答案：方法一：`SplitChunksPlugin`。方法二：动态导入（`import()`）。示例：javascript//Webpackconfigmodule.exports={optimization:{splitChunks:{chunks:'all',},},};解析：`CodeSplitting`可优化加载速度。23.如何优化前端性能（LCP、FID、CLS）？答案：-LCP：优化首屏加载（图片懒加载、骨架屏）。-FID：减少交互延迟（`requestAnimationFrame`、`debounce`）。-CLS：避免布局抖动（固定定位、`transform`）。解析：需关注性能指标，针对性优化。24.前端监控（Sentry、Bugsnag）的作用是什么？答案：-收集错误日志、性能数据。-提供告警和修复建议。-