前端开发实习面试题及答案

2026年前端开发实习面试题及答案一、选择题（共5题，每题2分）题型说明：下列每题有多个选项正确，请选择所有正确的选项。1.题分：2分在JavaScript中，以下哪些方法可以用来监听DOM事件？A.`addEventListener()`B.`attachEvent()`C.`addEventListener()`和`attachEvent()`D.`onchange`答案：A解析：`addEventListener()`是现代浏览器推荐的事件监听方式，`attachEvent()`是IE早期版本使用的方法，现已弃用。`onchange`是属性绑定方式，不推荐使用。2.题分：2分以下哪些CSS布局方式可以实现响应式设计？A.FlexboxB.GridC.FloatD.Table答案：A、B解析：Flexbox和Grid是现代响应式布局的主流方案，Float和Table布局较难实现灵活的响应式效果。3.题分：2分以下哪些HTTP状态码表示客户端错误？A.200B.404C.500D.302答案：B解析：200表示成功，404表示资源未找到，500表示服务器错误，302表示重定向。4.题分：2分在React中，以下哪些生命周期钩子已被废弃？A.`componentDidMount()`B.`componentWillUnmount()`C.`componentWillUpdate()`D.`getSnapshotBeforeUpdate()`答案：C、D解析：React16后，`componentWillUpdate()`和`getSnapshotBeforeUpdate()`被`useEffect`替代。5.题分：2分以下哪些CSS属性可以提高页面性能？A.`transform`B.`opacity`C.`background-color`D.`filter`答案：A、B、D解析：`transform`、`opacity`和`filter`可以通过GPU加速，`background-color`依赖CPU渲染。二、填空题（共5题，每题2分）题型说明：请根据题目要求填写正确答案。1.题分：2分CSS中，使用`display:inline-block;`可以让元素同时具备行内元素和块级元素的哪些特性？答案：既有行内元素的换行特性，又有块级元素的尺寸控制能力。解析：`inline-block`结合了行内和块级元素的优势，常用于灵活布局。2.题分：2分JavaScript中，使用`let`声明的变量具有什么特性？答案：作用域限制在块级（{},[],etc.），不可重复声明。解析：`let`是ES6引入的块级作用域变量，解决了`var`的函数作用域问题。3.题分：2分在Vue中，使用`v-if`和`v-show`实现条件渲染的区别是什么？答案：`v-if`是条件性渲染（元素不渲染），`v-show`是条件性显示（元素渲染但隐藏）。解析：`v-if`会跳过DOM操作，`v-show`通过CSS控制显示。4.题分：2分CSS中，`box-shadow`属性可以添加哪些效果？答案：阴影、模糊、偏移、颜色透明度。解析：`box-shadow`支持多个阴影叠加，常用于立体效果。5.题分：2分HTTP协议中，状态码401表示什么？答案：身份验证失败，需要提供凭证。解析：401是未授权状态，常见于登录验证。三、简答题（共5题，每题4分）题型说明：请根据题目要求简要回答。1.题分：4分简述CSS中的盒模型（BoxModel）及其组成部分。答案：盒模型包括：内容（`content`）、边框（`border`）、外边距（`margin`）、内边距（`padding`）。总和为元素的总尺寸。解析：盒模型是CSS布局基础，`box-sizing:border-box;`可以包含边框和内边距。2.题分：4分什么是跨域资源共享（CORS）？如何解决跨域问题？答案：CORS是浏览器安全机制，限制跨域请求。解决方法：-服务器设置`Access-Control-Allow-Origin`头。-使用代理（如`webpack-dev-server`）。-JSONP（仅GET请求）。解析：CORS是前端跨域核心问题，服务器配置是关键。3.题分：4分解释JavaScript中的闭包（Closure）及其应用场景。答案：闭包是函数及其词法环境的组合，可访问外部变量。应用场景：-防止变量污染全局。-实现私有变量（如模块化）。解析：闭包是JavaScript高级特性，常用于函数柯里化和模块设计。4.题分：4分React中的虚拟DOM（VirtualDOM）有什么作用？答案：虚拟DOM是轻量级的DOM表示，作用：-减少直接操作DOM的性能消耗。-智能对比差异，优化渲染。解析：React通过虚拟DOM实现高效更新，避免重绘和回流。5.题分：4分简述Web性能优化的关键点。答案：关键点：-资源压缩（CSS/JS）。-CDN加速静态资源。-懒加载（图片/组件）。-缓存策略（HTTP缓存）。解析：性能优化是前端核心，减少加载时间提升用户体验。四、代码题（共5题，每题6分）题型说明：请根据题目要求编写代码。1.题分：6分实现一个简单的JavaScript函数，接收两个数字并返回它们的和。答案：javascriptfunctionadd(a,b){returna+b;}解析：函数封装是基础，注意参数类型校验。2.题分：6分使用CSSFlexbox实现一个水平居中的布局（一行显示多个盒子）。答案：html<divclass="container"><divclass="box">1</div><divclass="box">2</div><divclass="box">3</div></div><style>.container{display:flex;justify-content:center;align-items:center;height:100vh;}.box{margin:010px;padding:20px;background:#eee;}</style>解析：Flexbox居中需结合`justify-content`和`align-items`。3.题分：6分使用Vue.js实现一个计数器组件，包含+1和-1按钮。答案：html<template><div><span>{{count}}</span><button@click="increment">+1</button><button@click="decrement">-1</button></div></template><script>exportdefault{data(){return{count:0};},methods:{increment(){this.count++},decrement(){this.count--}}};</script>解析：Vue数据双向绑定是核心，`@click`绑定事件。4.题分：6分使用CSSGrid实现一个3x3的网格布局。答案：html<divclass="grid"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div></div><style>.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px;}.griddiv{background:#ddd;padding:20px;text-align:center;}</style>解析：Grid布局灵活，`repeat(3,1fr)`表示3列等宽。5.题分：6分使用JavaScript实现一个数组去重函数。答案：javascriptfunctionunique(arr){return[...newSet(arr)];}解析：`Set`自动去重，扩展运算符转为数组。五、综合题（共3题，每题10分）题型说明：请根据题目要求深入回答。1.题分：10分解释前端性能优化的原理，并举例说明如何优化一个大型单页应用（SPA）。答案：-原理：减少网络请求、降低渲染成本、提升响应速度。-优化方法：-代码分割：使用Webpack的`SplitChunksPlugin`按路由或组件拆分JS。-懒加载：图片使用`loading="lazy"`，组件动态导入（React`React.lazy`）。-CDN缓存：静态资源部署CDN，设置强缓存。-HTTP/2：多路复用减少延迟。解析：SPA优化需结合工程化和网络策略。2.题分：10分什么是RESTfulAPI？如何在前端使用FetchAPI调用？答案：-RESTfulAPI：无状态、无记忆、基于HTTP动词（GET/POST等）的API设计风格。-Fetch使用：javascriptfetch('/api/users',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:'Alice'})}).then(res=>res.json()).then(data=>console.log(data)).catch(err=>console.error(err));解析：RESTful强调资源化设计，Fetch是现代浏览器原生请求库。3.题分：10分如何实现一个可复用的CSS模块化方案？答案：-BEM（块、元素、修饰符）：css.btn-primary{/块/}.btn-primary__icon{/元素/}.btn-primary--disabled{/修饰符/}-CSS