2026年前端工程师面试题库

2026年前端工程师面试题库一、基础知识（共5题，每题10分，总分50分）题目1（10分）请解释JavaScript中的事件冒泡和事件捕获机制，并说明如何阻止事件冒泡。答案：事件冒泡是指当子节点上的事件被触发后，这个事件会逐级向上传递到父节点。事件捕获则是从父节点开始逐级向下传递到子节点。阻止事件冒泡可以使用`event.stopPropagation()`方法。例如：javascriptdocument.getElementById('child').addEventListener('click',function(event){event.stopPropagation();});题目2（10分）解释CSS中的盒模型（标准盒模型和IE盒模型）的区别，并说明如何统一两种盒模型的计算方式。答案：标准盒模型（W3C盒模型）中，元素的宽度和高度只包括内容区域（content），不包括边框（border）、内边距（padding）和外边距（margin）。IE盒模型中，元素的宽度和高度包括内容区域、边框和内边距。统一两种盒模型的计算方式可以通过CSS属性`box-sizing:border-box;`实现，这样元素的宽度和高度会包括边框和内边距：cssbox-sizing:border-box;题目3（10分）描述JavaScript中的闭包是什么，并给出一个实际应用场景。答案：闭包是指一个函数可以访问其外部函数作用域中的变量。即使外部函数已经执行完毕，闭包仍然可以访问这些变量。实际应用场景：实现私有变量和方法，例如：javascriptfunctionCounter(){letcount=0;//私有变量return{increment:function(){count++;returncount;},decrement:function(){count--;returncount;},getCount:function(){returncount;}};}constcounter=Counter();console.log(counter.increment());//1console.log(counter.increment());//2console.log(counter.getCount());//2题目4（10分）解释HTTP中的GET和POST请求的区别，并说明什么情况下应该使用POST请求。答案：GET请求用于从服务器获取数据，参数通过URL传递，且参数有长度限制（一般不超过2000字符）。GET请求是幂等的，多次请求产生相同结果。GET请求可以被缓存，且可以被浏览器历史记录和书签保存。POST请求用于向服务器提交数据，参数通过请求体传递，没有长度限制。POST请求是非幂等的，每次请求可能产生不同结果。POST请求不能被缓存，且不会被浏览器历史记录和书签保存。应该使用POST请求的情况：1.发送大量数据（如文件上传）2.安全性要求高（如登录）3.需要修改服务器状态（如创建或更新资源）题目5（10分）描述CSS中的Flexbox布局和Grid布局的区别，并说明各自的优势。答案：Flexbox布局是一维布局模型，适用于行或列的排列，可以灵活地调整子元素的大小和顺序。Grid布局是二维布局模型，可以同时控制行和列的排列。Flexbox布局的优势：-简单直观，适合一维布局-响应式设计方便-支持灵活的子元素排列Grid布局的优势：-二维布局，控制更灵活-适合复杂页面布局-支持更精确的行列控制二、JavaScript进阶（共5题，每题10分，总分50分）题目6（10分）解释JavaScript中的原型链和继承机制。答案：原型链是JavaScript中对象之间的继承关系。每个对象都有一个`__proto__`属性（或`prototype`），指向其原型对象。当访问一个对象的属性或方法时，如果该对象没有该属性或方法，会沿着原型链查找，直到找到该属性或方法或到达原型链的末端（`null`）。继承机制：javascriptfunctionParent(){this.parentProp='parent';}functionChild(){Parent.call(this);//调用父类构造函数this.childProp='child';}Ctotype=Object.create(Ptotype);//设置原型链Ctotype.constructor=Child;//修复构造函数指向constchild=newChild();console.log(child.parentProp);//'parent'console.log(child.childProp);//'child'题目7（10分）描述Promise、async/await的使用场景和区别。答案：Promise是异步编程的解决方案，表示一个尚未完成但最终会完成的操作。Promise有三种状态：pending（进行中）、fulfilled（成功）和rejected（失败）。async/await是基于Promise的语法糖，使异步代码更像是同步代码。使用场景：-Promise适用于链式调用和错误处理-async/await适用于需要嵌套异步操作的复杂逻辑区别：javascript//Promisefetch(url).then(response=>response.json()).then(data=>console.log(data)).catch(error=>console.error(error));//async/awaitasyncfunctionfetchData(){try{constresponse=awaitfetch(url);constdata=awaitresponse.json();console.log(data);}catch(error){console.error(error);}}题目8（10分）解释JavaScript中的作用域和闭包，并给出一个实际应用场景。答案：作用域是指变量可访问的范围。JavaScript有两种作用域：全局作用域和函数作用域。ES6引入了块级作用域（let和const）。闭包是指一个函数可以访问其外部函数作用域中的变量，即使外部函数已经执行完毕。实际应用场景：实现私有变量和方法：javascriptfunctionCounter(){letcount=0;//私有变量return{increment:function(){count++;returncount;},decrement:function(){count--;returncount;},getCount:function(){returncount;}};}constcounter=Counter();console.log(counter.increment());//1console.log(counter.increment());//2console.log(counter.getCount());//2题目9（10分）描述JavaScript中的事件委托机制，并说明其优势。答案：事件委托机制是指将事件监听器绑定到父元素上，利用事件冒泡原理，将事件处理函数应用到子元素上。这样只需要在父元素上绑定一个事件监听器，而不是每个子元素都绑定。优势：1.减少内存使用，避免大量事件监听器2.动态添加的元素不需要再次绑定事件3.提高性能，尤其是在有大量子元素的情况下示例：javascriptdocument.getElementById('parent').addEventListener('click',function(event){if(event.target.matches('.child')){console.log('Childclicked:',event.target.textContent);}});题目10（10分）解释JavaScript中的深拷贝和浅拷贝的区别，并给出实现深拷贝的方法。答案：浅拷贝只复制第一层属性，对于对象属性仍然是指向原对象的引用。深拷贝会复制所有层级的属性，完全独立的副本。实现深拷贝的方法：javascriptfunctiondeepCopy(obj){if(obj===null||typeofobj!=='object'){returnobj;}if(objinstanceofArray){returnobj.map(item=>deepCopy(item));}if(objinstanceofDate){returnnewDate(obj);}if(objinstanceofRegExp){returnnewRegExp(obj);}constresult={};for(constkeyinobj){result[key]=deepCopy(obj[key]);}returnresult;}三、前端框架（共5题，每题10分，总分50分）题目11（10分）比较React和Vue的异同，并说明选择其中一个框架的理由。答案：相同点：-都是主流的前端框架-都使用组件化开发-都支持声明式UI-都有虚拟DOM不同点：-React使用JSX语法，Vue使用模板语法-React数据绑定更灵活，Vue更简洁-React生态系统更庞大，Vue更易于上手-React适合大型复杂应用，Vue适合中小型应用选择React的理由：-强大的社区支持和生态系统-更灵活的数据流管理-适合构建大型复杂应用题目12（10分）描述Vue中的响应式原理，并说明如何自定义响应式属性。答案：Vue的响应式原理是通过Object.defineProperty()将数据属性转换为getter/setter，从而实现数据变化时自动更新视图。自定义响应式属性：javascriptconstvm=newVue({el:'#app',data:{myProp:0},created(){Vue.set(this,'myProp',10);//动态添加响应式属性}});题目13（10分）解释React中的生命周期方法，并说明哪些生命周期方法在React16.8+版本中有所变化。答案：React中的生命周期方法：-挂载阶段：componentWillMount()、render()、componentDidMount()-更新阶段：componentWillReceiveProps()、shouldComponentUpdate()、componentWillUpdate()、render()、componentDidUpdate()-卸载阶段：componentWillUnmount()在React16.8+版本（引入Hooks）中，生命周期方法被替换为Hooks：-挂载：useEffect()-更新：useEffect()（可以设置依赖项）-卸载：useEffect()（返回清理函数）题目14（10分）描述Angular中的依赖注入机制，并说明其优势。答案：Angular的依赖注入机制是通过DI（DependencyInjection）容器实现的，可以自动注入依赖项，简化组件之间的交互。优势：1.提高代码可维护性2.减少组件之间的耦合3.方便单元测试4.提高代码复用性示例：typescriptimport{Component,OnInit,Inject}from'@angular/core';import{LoggerService}from'./logger.service';@Component({selector:'app-example',template:`<p>{{message}}</p>`})exportclassExampleComponentimplementsOnInit{message='Hello';constructor(privatelogger:LoggerService){}ngOnInit(){this.logger.log('Componentinitialized');}}题目15（10分）比较Redux和ContextAPI的异同，并说明选择其中一个的理由。答案：相同点：-都用于状态管理-都可以跨组件共享状态不同点：-Redux是集中式状态管理，ContextAPI是分散式状态管理-Redux功能更强大，ContextAPI更简单-Redux需要编写中间件，ContextAPI不需要选择Redux的理由：-适用于大型复杂应用-强大的中间件支持-标准化的状态管理方式四、性能优化（共5题，每题10分，总分50分）题目16（10分）描述前端性能优化的常见方法，并说明哪些方法对移动端特别重要。答案：前端性能优化的常见方法：1.减少HTTP请求：合并文件、使用雪碧图2.压缩资源：CSS、JavaScript、图片压缩3.使用CDN：加速资源加载4.代码分割：按需加载5.缓存策略：合理设置缓存头6.优化渲染路径：避免重排和重绘7.图片优化：使用适合的格式、懒加载8.使用WebWorkers：避免阻塞主线程对移动端特别重要的方法：1.懒加载：减少初始加载时间2.图片优化：使用适合移动端的格式和分辨率3.减少动画和复杂效果：避免性能问题4.使用服务端渲染（SSR）：提高首屏加载速度5.优化触摸响应：避免延迟题目17（10分）解释浏览器缓存的工作原理，并说明如何设置合理的缓存策略。答案：浏览器缓存工作原理：1.HTTP请求时会检查缓存2.如果缓存有效，直接使用缓存内容3.如果缓存无效，发送请求获取新内容4.缓存策略通过HTTP头控制（Cache-Control、Expires等）设置合理的缓存策略：-静态资源设置长期缓存（Cache-Control:max-age=31536000）-动态资源避免缓存（Cache-Control:no-cache,no-store）-使用ETag进行验证（If-None-Match）-使用Last-Modified进行验证（If-Modified-Since）题目18（10分）描述首屏加载速度优化的方法，并说明哪些方法对用户体验特别重要。答案：首屏加载速度优化的方法：1.优化关键渲染路径：减少阻塞渲染的CSS和JavaScript2.图片优化：使用适合的格式、懒加载3.代码分割：按需加载非关键资源4.使用CDN：加速资源加载5.减少HTTP请求：合并文件6.使用预加载（Preload）和预连接（Preconnect）7.服务器配置优化：启用Gzip压缩对用户体验特别重要的方法：1.减少白屏时间：优化关键渲染路径2.图片优化：避免大图阻塞渲染3.使用骨架屏：提供视觉反馈4.减少动画和复杂效果：避免性能问题题目19（10分）解释懒加载的原理和应用场景，并说明如何实现图片懒加载。答案：懒加载原理：当用户滚动到页面某个位置时，才加载该位置的资源，而不是一开始就加载所有资源。应用场景：1.图片懒加载：提高页面加载速度2.视频懒加载：减少初始加载时间3.动态内容懒加载：按需加载模块图片懒加载实现：html<imgclass="lazy"data-src="image.jpg"alt="LazyImage"><script>document.addEventListener('DOMContentLoaded',function(){constlazyImages=document.querySelectorAll('.lazy');constobserver=newIntersectionObserver((entries,observer)=>{entries.forEach(entry=>{if(entry.isIntersecting){constimg=entry.target;img.src=img.dataset.src;observer.unobserve(img);}});});lazyImages.forEach(img=>observer.observe(img));});</script>题目20（10分）描述WebWorkers的原理和应用场景，并说明如何使用WebWorkers。答案：WebWorkers原理：允许在后台线程执行JavaScript代码，不会阻塞主线程。应用场景：1.复杂计算：避免阻塞主线程2.数据处理：如文件解析、图像处理3.实时更新：如WebSocket通信处理使用WebWorkers：javascript//主线程if(window.Worker){constworker=newWorker('worker.js');worker.postMessage({type:'start',data:'HelloWorker'});worker.onmessage=function(event){console.log('Received:',event.data);};worker.onerror=function(error){console.error('Workererror:',error);};}//worker.jsonmessage=function(event){console.log('Received:',event.data);//复杂计算postMessage({type:'result',data:'Processeddata'});};五、前端安全（共5题，每题10分，总分50分）题目21（10分）描述XSS攻击的原理和防御方法，并说明哪些场景特别容易受到XSS攻击。答案：XSS攻击原理：将恶意脚本注入到网页中，当其他用户访问该网页时，恶意脚本会在用户浏览器中执行。防御方法：1.对用户输入进行过滤和转义2.使用CSP（内容安全策略）：限制资源加载和执行3.设置HTTP头（X-XSS-Protection）4.使用安全的框架和库：如React的自动转义特别容易受到XSS攻击的场景：1.评论系统：用户输入直接显示2.搜索框：用户输入直接显示3.表单验证：用户输入直接显示4.个人资料：用户输入直接显示题目22（10分）解释CSRF攻击的原理和防御方法，并说明哪些场景特别容易受到CSRF攻击。答案：CSRF攻击原理：诱导用户在已认证的网站上执行非预期的操作。防御方法：1.使用CSRF令牌：每个请求附带随机令牌2.