2026年媒体行业前端技术面试题集

2026年媒体行业前端技术面试题集一、单选题（每题2分，共10题）1.在React中，以下哪个钩子用于在组件卸载时执行清理操作？A.`useEffect()`B.`useLayoutEffect()`C.`useCallback()`D.`useMemo()`2.CSSGrid布局和Flexbox布局的主要区别是什么？A.CSSGrid适用于二维布局，Flexbox适用于一维布局B.CSSGrid性能更高，Flexbox更灵活C.CSSGrid只能用于列表布局，Flexbox只能用于网格布局D.两者没有区别，可以互相替代3.以下哪个HTTP状态码表示请求成功且服务器返回了资源？A.301B.304C.200D.4044.在Vue.js中，如何定义一个响应式数据？A.`letdata=reactive({key:'value'})`B.`constdata=ref({key:'value'})`C.`data:{key:'value'}`D.`data:reactive({key:'value'})`5.以下哪个前端框架或库适用于构建大型单页应用？A.jQueryB.ReactC.AngularD.Vue.js二、多选题（每题3分，共5题）6.在Web性能优化中，以下哪些技术可以减少页面加载时间？A.CDN加速B.懒加载C.代码压缩D.HTTP/27.以下哪些是前端构建工具？A.WebpackB.ParcelC.GulpD.Babel8.在React中，以下哪些是状态管理方案？A.ContextAPIB.ReduxC.MobXD.ReduxToolkit9.以下哪些是CSS预处理器？A.SassB.LessC.StylusD.PostCSS10.在Web安全中，以下哪些是常见的前端防护措施？A.XSS防护B.CSRF防护C.HTTPSD.ContentSecurityPolicy三、简答题（每题5分，共5题）11.简述前端工程化的概念及其主要作用。12.解释什么是虚拟DOM，以及它在前端开发中的作用。13.简述前端性能优化的主要方法及其重要性。14.解释什么是响应式设计，并列举三种实现响应式设计的CSS技术。15.简述前端测试的类型及其作用。四、编程题（每题10分，共3题）16.编写一个React组件，实现一个简单的待办事项列表，支持添加和删除待办事项。17.编写一个Vue组件，实现一个简单的商品列表，支持按价格排序和筛选。18.编写一个JavaScript函数，实现一个简单的防抖功能，用于优化频繁触发的滚动事件。答案与解析一、单选题1.D.`useMemo()`解析：`useMemo`用于缓存计算结果，避免不必要的重复计算；`useEffect`用于执行副作用操作；`useLayoutEffect`在DOM变更后同步执行；`useCallback`用于缓存函数。2.A.CSSGrid适用于二维布局，Flexbox适用于一维布局解析：CSSGrid是二维布局系统，适用于复杂网格结构；Flexbox是一维布局系统，适用于行或列的布局。3.C.200解析：200表示请求成功且服务器返回了资源；301表示永久重定向；304表示未修改；404表示资源不存在。4.C.`data:{key:'value'}`解析：在Vue.js中，组件的响应式数据可以通过`data`选项定义。5.B.React解析：React适用于构建大型单页应用，具有强大的组件化和状态管理能力；jQuery主要用于DOM操作；Angular是全栈框架；Vue.js也适用于大型应用，但React更灵活。二、多选题6.A.CDN加速，B.懒加载，C.代码压缩，D.HTTP/2解析：CDN加速可以减少资源加载时间；懒加载可以延迟非关键资源加载；代码压缩可以减少文件体积；HTTP/2支持多路复用，提高传输效率。7.A.Webpack，B.Parcel，C.Gulp解析：Webpack和Parcel是构建工具；Gulp是任务运行器；Babel是转译工具。8.A.ContextAPI，B.Redux，C.MobX解析：ContextAPI是React自带的状态管理方案；Redux和MobX是第三方状态管理库。9.A.Sass，B.Less，C.Stylus解析：Sass、Less和Stylus是CSS预处理器；PostCSS是后处理器。10.A.XSS防护，B.CSRF防护，D.ContentSecurityPolicy解析：XSS防护防止跨站脚本攻击；CSRF防护防止跨站请求伪造；HTTPS是传输层安全措施；ContentSecurityPolicy限制资源加载，增强安全性。三、简答题11.前端工程化的概念及其主要作用前端工程化是指将前端开发过程规范化、自动化，提高开发效率和代码质量。主要作用包括：-代码模块化，便于管理和复用-自动化构建和测试，减少手动操作-代码优化，提高性能-团队协作，提高开发效率12.什么是虚拟DOM，以及它在前端开发中的作用虚拟DOM是前端框架（如React）使用的一个概念，它是一个轻量级的DOM表示，通过JavaScript对象模拟DOM结构。作用包括：-减少DOM操作，提高性能-组件化开发，提高代码复用性-跨平台开发，支持Web和移动端13.前端性能优化的主要方法及其重要性主要方法包括：-资源压缩和合并，减少请求次数-懒加载，延迟非关键资源加载-CDN加速，提高资源加载速度-代码优化，减少冗余代码重要性：提高用户体验，减少服务器压力，提高页面排名。14.什么是响应式设计，并列举三种实现响应式设计的CSS技术响应式设计是指网页能够根据不同设备（如手机、平板、电脑）自动调整布局和内容。实现技术包括：-流式布局（使用百分比和flexbox）-媒体查询（使用CSSmediaquery）-弹性图片（使用max-width和height:auto）15.前端测试的类型及其作用前端测试类型包括：-单元测试：测试单个函数或组件-集成测试：测试多个组件的交互-端到端测试：测试整个应用流程作用：提高代码质量，减少bug，增强用户信任。四、编程题16.React待办事项列表组件jsximportReact,{useState}from'react';functionTodoList(){const[todos,setTodos]=useState([]);const[inputValue,setInputValue]=useState('');consthandleAdd=()=>{if(inputValue.trim()){setTodos([...todos,inputValue]);setInputValue('');}};consthandleDelete=(index)=>{constnewTodos=todos.filter((_,i)=>i!==index);setTodos(newTodos);};return(<div><inputtype="text"value={inputValue}onChange={(e)=>setInputValue(e.target.value)}/><buttononClick={handleAdd}>添加</button><ul>{todos.map((todo,index)=>(<likey={index}>{todo}<buttononClick={()=>handleDelete(index)}>删除</button></li>))}</ul></div>);}exportdefaultTodoList;17.Vue商品列表组件vue<template><div><inputtype="text"v-model="searchText"placeholder="按价格筛选"/><button@click="sortPrice">排序</button><ul><liv-for="(item,index)infilteredItems":key="index">{{}}-{{item.price}}</li></ul></div></template><script>exportdefault{data(){return{items:[{name:'商品1',price:100},{name:'商品2',price:200},{name:'商品3',price:150},],searchText:'',};},computed:{filteredItems(){if(this.searchText){returnthis.items.filter((item)=>item.price.toString().includes(this.searchText));}returnthis.items;},},methods:{sortPrice(){this.items.sort((a,b)=>a.price-b.price);},},};</script>18.防抖函数javascriptfunctiondebounce(func,wait){lettimeout;returnfunction(...args){clearTimeout(timeout);ti