2026年360前端星笔试题及答案

2026年360前端星笔试题及答案

一、单项选择题（总共10题，每题2分）1.以下关于React框架的描述，错误的是：A.React采用虚拟DOM提高渲染性能B.React组件必须继承自React.ComponentC.React支持函数组件和类组件D.React通过JSX语法描述UI2.下列哪个不是CSS选择器？A.`div>p`B.`div+p`C.`div~p`D.`div||p`3.关于JavaScript的事件循环机制，以下说法正确的是：A.宏任务优先级高于微任务B.`setTimeout`属于微任务C.`Promise.then`属于宏任务D.事件循环的执行顺序是：同步代码→微任务→宏任务4.以下哪个HTTP状态码表示资源未找到？A.200B.301C.404D.5005.关于ES6的模块化，以下说法错误的是：A.`import`可以动态加载模块B.`exportdefault`用于默认导出C.`importasmodule`可以导入所有导出内容D.`export`可以导出多个变量6.以下哪个方法可以用于深拷贝一个对象？A.`Object.assign()`B.`JSON.parse(JSON.stringify(obj))`C.`[...obj]`D.`Object.keys(obj)`7.关于Vue的响应式原理，以下说法错误的是：A.Vue2.x使用`Object.defineProperty`实现响应式B.Vue3.x使用`Proxy`实现响应式C.数组的变化无法被Vue2.x监听到D.Vue的响应式系统会自动检测所有嵌套对象的变化8.以下哪个不是Webpack的核心概念？A.LoaderB.PluginC.BundleD.Router9.关于跨域问题，以下说法正确的是：A.JSONP只能用于GET请求B.CORS允许所有跨域请求C.`document.domain`可以解决所有跨域问题D.`postMessage`只能用于同源通信10.以下哪个不是TypeScript的基本类型？A.`any`B.`void`C.`unknown`D.`dynamic`二、填空题（总共10题，每题2分）1.在JavaScript中，`typeofnull`的返回值是________。2.在CSS中，`flex:1`等价于`flex:________10%`。3.在React中，用于优化性能的钩子函数是________。4.在HTTP协议中，`PUT`方法通常用于________资源。5.在Vue中，`v-model`的本质是________和`@input`事件的语法糖。6.在ES6中，`const`声明的变量是________（填“可修改”或“不可修改”）。7.在Webpack中，用于处理CSS的Loader通常是________。8.在浏览器中，`localStorage`的存储上限大约是________MB。9.在TypeScript中，`interface`和`type`的主要区别是________。10.在Node.js中，`__dirname`表示当前模块的________。三、判断题（总共10题，每题2分）1.JavaScript是单线程语言，但可以通过WebWorker实现多线程。（）2.CSS的`position:fixed`相对于最近的定位祖先元素定位。（）3.React的`useEffect`钩子可以模拟`componentDidMount`、`componentDidUpdate`和`componentWillUnmount`。（）4.Vue的`v-if`和`v-show`在功能上完全一致，只是语法不同。（）5.`let`和`const`声明的变量不存在变量提升。（）6.`Promise.all`在所有Promise都成功时才会返回成功，否则返回失败。（）7.Webpack的`devServer`可以用于热更新。（）8.`JSON.stringify`可以序列化函数和`undefined`。（）9.`Atotype.map`会改变原数组。（）10.`display:none`和`visibility:hidden`都会触发重排和重绘。（）四、简答题（总共4题，每题5分）1.请简述React的虚拟DOM工作原理及其优势。2.请解释CSS的盒模型，并说明`box-sizing:border-box`的作用。3.请描述JavaScript的事件冒泡和事件捕获机制，并说明如何阻止事件传播。4.请简述Vue3.x的CompositionAPI与OptionsAPI的区别及优势。五、讨论题（总共4题，每题5分）1.请讨论前端性能优化的常见手段及其适用场景。2.请分析单页应用（SPA）和多页应用（MPA）的优缺点。3.请探讨前端工程化的必要性及其核心工具链。4.请讨论TypeScript在前端开发中的优势及适用场景。---答案及解析一、单项选择题1.B（函数组件无需继承React.Component）2.D（`div||p`不是合法选择器）3.D（事件循环顺序：同步代码→微任务→宏任务）4.C（404表示资源未找到）5.A（`import`不能动态加载，需用`import()`）6.B（`JSON.parse(JSON.stringify(obj))`可实现深拷贝）7.D（Vue2.x无法自动检测新增属性）8.D（Router不是Webpack概念）9.A（JSONP仅支持GET请求）10.D（TypeScript无`dynamic`类型）二、填空题1.`object`2.`1`3.`useMemo`或`useCallback`4.更新5.`:value`6.不可修改7.`css-loader`8.`5`9.`interface`可扩展，`type`可定义联合类型10.目录路径三、判断题1.√2.×（相对于视口）3.√4.×（`v-if`销毁DOM，`v-show`仅隐藏）5.√6.√7.√8.×（无法序列化函数和`undefined`）9.×（不改变原数组）10.×（`visibility:hidden`不触发重排）四、简答题1.虚拟DOM工作原理：React通过虚拟DOM（轻量级JavaScript对象）描述真实DOM，每次状态变更时生成新虚拟DOM，通过Diff算法对比新旧虚拟DOM，仅更新差异部分到真实DOM。优势：减少直接操作DOM的开销，提高渲染性能。2.盒模型：CSS盒模型由内容（content）、内边距（padding）、边框（border）、外边距（margin）组成。`box-sizing:border-box`使元素的宽度和高度包含padding和border，更符合布局直觉。3.事件冒泡与捕获：事件捕获从外到内，冒泡从内到外。可通过`event.stopPropagation()`阻止事件传播，`event.preventDefault()`阻止默认行为。4.CompositionAPIvsOptionsAPI：CompositionAPI基于函数组织逻辑，更灵活且易于复用；OptionsAPI按选项（data、methods等）组织，适合简单场景。CompositionAPI优势：逻辑复用性强，类型推导更友好。五、讨论题1.前端性能优化：-代码层面：压缩资源、懒加载、TreeShaking。-网络层面：CDN加速、HTTP/2、缓存策略。-渲染层面：减少重排重绘、使用虚拟列表。2.SPAvsMPA：-SP