2026年前端程序员面试题含答案

2026年前端程序员面试题含答案一、选择题（共5题，每题2分）考察方向：基础知识、HTML/CSS/JavaScript核心概念1.下列哪个CSS选择器优先级最高？A.`id`选择器B.`class`选择器C.`tag`选择器D.`attr`选择器答案：A解析：`id`选择器的优先级最高（权重100），其次是`class`（10）、`tag`（1）、`attr`（属性选择器优先级较低）。2.以下哪个JavaScript方法用于异步处理数据？A.`setTimeout`B.`setInterval`C.`Promise`D.`for...of`答案：C解析：`Promise`是JavaScript中处理异步的核心机制，`setTimeout`和`setInterval`是定时器，`for...of`是遍历迭代器。3.CSS中`flex`布局的默认对齐方式是？A.`flex-start`B.`center`C.`flex-end`D.`space-between`答案：A解析：`flex`布局默认将子项沿主轴从起点对齐（`flex-start`），除非设置`justify-content`。4.React中，以下哪个钩子用于在组件卸载时执行清理操作？A.`useEffect`B.`useContext`C.`useCallback`D.`useMemo`+`useEffect`的返回函数答案：D解析：`useEffect`的返回函数会在组件卸载时调用，用于清理操作（如取消订阅、清除定时器等）。5.以下哪个HTTP状态码表示“请求超时”？A.404B.500C.408D.302答案：C解析：404表示“未找到资源”，500表示“服务器内部错误”，408表示“请求超时”，302表示“临时重定向”。二、填空题（共5题，每题2分）考察方向：前端工程化、性能优化、浏览器原理1.在Webpack中，用于打包CSS文件的加载器是__________。答案：css-loader解析：`css-loader`解析CSS中的`@import`和`url()`，`style-loader`则将其注入DOM。2.浏览器缓存HTTP请求的默认有效期由响应头中的__________字段控制。答案：Cache-Control解析：`Cache-Control`决定资源是否被缓存及缓存时长，`Expires`已不推荐使用。3.React中的`key`属性主要用于__________，避免重新渲染性能问题。答案：列表组件的优化解析：`key`帮助React识别组件变化，提高渲染效率，通常绑定列表项的`id`或唯一标识。4.CSS中`calc()`函数用于__________，支持数学运算。答案：动态计算长度值解析：如`width:calc(100%-20px)`，可用于减法、乘法等运算。5.Webpack中，用于代码压缩和混淆的工具是__________。答案：TerserPlugin解析：`TerserPlugin`是Webpack默认的JS压缩插件，比`UglifyJS`更高效。三、简答题（共5题，每题4分）考察方向：实际工程问题、代码实现、设计思想1.简述前端性能优化的常见方法（至少3种）。答案：-资源压缩：减少文件体积（如JS/CSS压缩、图片Base64化）。-懒加载：延迟加载非首屏资源（如`IntersectionObserver`实现图片懒加载）。-CDN加速：将静态资源部署到CDN，减少请求延迟。-缓存策略：利用HTTP缓存（`Cache-Control`）或本地存储（`localStorage`）。-代码分割：Webpack按需加载（`SplitChunksPlugin`）。2.解释React中的虚拟DOM是什么，及其优势。答案：-虚拟DOM：是React在内存中构建的DOM树副本，实际DOM操作前先在虚拟DOM中模拟更新。-优势：-减少直接操作DOM的性能开销。-避免不必要的DOM重绘（React通过差异比较减少更新）。-提高跨平台开发能力（如ReactNative使用虚拟DOM渲染原生界面）。3.如何实现一个简单的防抖（Debounce）函数？答案：javascriptfunctiondebounce(fn,delay){lettimer=null;returnfunction(...args){clearTimeout(timer);timer=setTimeout(()=>fn.apply(this,args),delay);};}解析：在设定延迟内多次触发只会执行最后一次，适用于搜索框输入、窗口缩放等场景。4.CSSGrid布局和Flexbox的区别是什么？答案：-Flexbox：一维布局（行或列），适合组件内部对齐。-Grid：二维布局（行+列），适合整体页面布局。-使用场景：Flexbox用于行/列容器，Grid用于复杂网格结构。5.前端如何处理跨域问题？答案：-CORS：服务器返回`Access-Control-Allow-Origin`头允许跨域。-JSONP：通过`<script>`标签请求，仅支持GET请求。-代理：后端API代理（如Nginx反向代理）。-WebSocket：无同源策略限制，适用于实时通信。四、编程题（共3题，每题10分）考察方向：代码实现、算法、工程实践1.实现一个简单的`Atotype.map`函数（不使用内置方法）。答案：javascriptAtotype.myMap=function(fn){constresult=[];for(leti=0;i<this.length;i++){result.push(fn(this[i],i,this));}returnresult;};解析：遍历数组，对每个元素执行`fn`，将结果存入新数组。2.编写一个函数，检查字符串是否为回文（忽略大小写和空格）。答案：javascriptfunctionisPalindrome(str){constcleanStr=str.toLowerCase().replace(/\s+/g,'');constlen=cleanStr.length;for(leti=0;i<Math.floor(len/2);i++){if(cleanStr[i]!==cleanStr[len-1-i])returnfalse;}returntrue;}解析：清理字符串后，从首尾向中间比较字符是否对称。3.用ReactHooks实现一个计数器组件（支持手动增减和定时自增）。答案：jsxfunctionCounter(){const[count,setCount]=useState(0);const[timer,setTimer]=useState(null);useEffect(()=>{constid=setInterval(()=>setCount(c=>c+1),1000);setTimer(id);return()=>clearInterval(id);},[]);return(<div><span>{count}</span><buttononClick={()=>setCount(c=>c+1)}>Increment</button><buttononClick={()=>setCount(c=>c-1)}>Decrement</button><buttononClick={()=>clearInterval(timer)}>StopTimer</button></div>);}解析：使用`useState`管理计数，`useEffect`创建定时器，支持手动操作和自动增减。五、开放题（共2题，每题15分）考察方向：架构设计、团队协作、问题解决1.如果你负责优化一个访问量百万级别的单页应用（SPA），你会从哪些方面入手？答案：-代码分割：Webpack按路由或组件拆分JS/CSS（`React.lazy`、`Suspense`）。-骨架屏+懒加载：提升首屏加载感知速度（`IntersectionObserver`加载图片/组件）。-预加载关键资源：使用`<linkrel="preload">`加载首屏必要组件。-服务端渲染（SSR）：如Next.js，提升首屏渲染速度和SEO。-性能监控：搭建Lighthouse/Apm工具，定位瓶颈。2.描述一次你解决前端兼容性问题的经历（包括问题、原因及解决方案）。答案：-问题：在移动端H5页面，部分浏览器不支持`flex`的`align-items:center`。-原因：部分旧版iOS/Android浏览器CSS解析差异。-解决方案：-