2026年360前端面试题答案

2026年360前端面试题答案

一、单项选择题（总共10题，每题2分）1.以下哪项是事件冒泡的典型表现？A.子元素事件触发后，父元素事件不会触发B.子元素事件触发后，依次触发父元素直到根元素C.父元素事件触发后，子元素事件不会触发D.事件从根元素开始向下传递到目标元素2.CSS中，标准盒模型的宽度由以下哪部分组成？A.content+padding+borderB.contentC.content+paddingD.content+margin3.JavaScript中，以下哪个值的typeof结果为"object"？A.nullB.undefinedC.函数D.布尔值4.Vue3中，组件生命周期“onMounted”对应的是哪个阶段？A.组件实例创建前B.组件DOM挂载完成后C.组件数据更新前D.组件卸载完成后5.HTTP状态码204表示？A.资源未找到B.请求成功但无内容返回C.重定向D.服务器内部错误6.以下哪个作用域在JavaScript中不存在？A.全局作用域B.函数作用域C.块级作用域D.模块作用域7.虚拟DOM的核心优势是？A.直接操作真实DOM提升性能B.减少DOM操作次数，通过diff算法优化更新C.完全替代真实DOMD.仅用于React框架8.Webpack中，以下哪个配置项用于指定模块解析时的文件扩展名？A.resolve.extensionsB.module.rulesC.output.pathD.devServer.port9.ES6中，关于let和var的区别，错误的是？A.let有块级作用域，var没有B.let存在暂时性死区，var没有C.let声明的变量会提升，var不会D.let不允许重复声明，var允许10.以下哪种方式不能解决跨域问题？A.CORS（跨域资源共享）B.JSONPC.前端反向代理D.关闭浏览器同源策略二、填空题（总共10题，每题2分）1.CSS中，声明自定义变量的语法是______。2.事件委托的关键是利用事件______特性。3.JavaScript中，所有对象的原型链最终指向______。4.Vue3响应式系统的核心方法是______（写出函数名）。5.Webpack默认的入口文件是______。6.HTTP/2的新特性包括______（写出一个即可）。7.Promise的初始状态是______。8.CSS弹性布局中，设置子元素在交叉轴对齐的属性是______。9.JavaScript事件循环中，微任务的执行顺序在______之前。10.LocalStorage的存储限制通常为______MB（写出数值）。三、判断题（总共10题，每题2分）1.事件捕获是DOM事件流的默认阶段。（）2.CSS变量（CSSVariables）只能在:root选择器中声明。（）3.typeofnull的结果是"null"。（）4.Vue3的组合式API（CompositionAPI）比选项式API（OptionsAPI）更适合逻辑复用。（）5.Webpack5的模块联邦（ModuleFederation）支持跨应用共享模块。（）6.async函数默认返回一个Promise对象。（）7.Flex容器中的子元素会脱离标准文档流。（）8.跨域请求中，默认不会携带Cookie。（）9.ES6模块的默认导出只能有一个。（）10.CSSGrid更适合一维布局，Flex更适合二维布局。（）四、简答题（总共4题，每题5分）1.简述Vue3响应式原理的核心实现。2.列举至少3种CSS实现垂直居中的方法。3.解释JavaScript事件循环（EventLoop）的执行机制。4.说明Webpack中TreeShaking的作用及实现条件。五、讨论题（总共4题，每题5分）1.讨论单页应用（SPA）首屏加载慢的原因及优化策略。2.对比CORS和JSONP解决跨域问题的优缺点。3.分析React函数组件（FunctionComponent）与类组件（ClassComponent）的差异及适用场景。4.结合实际场景，说明前端需要防范的安全风险及对应的防护措施。答案与解析一、单项选择题1.B（事件冒泡是从目标元素向上传播到父元素）2.B（标准盒模型width仅包含content，border-box包含content+padding+border）3.A（typeofnull返回"object"是历史遗留问题）4.B（onMounted在组件DOM挂载完成后触发）5.B（204表示请求成功但无内容）6.D（JavaScript作用域包括全局、函数、块级，模块作用域属于ES6模块规范）7.B（虚拟DOM通过diff算法减少真实DOM操作）8.A（resolve.extensions配置解析扩展名）9.C（let和var都会提升，let存在暂时性死区）10.D（关闭浏览器同源策略不可行，属于客户端操作）二、填空题1.--变量名:值;（如--main-color:red;）2.冒泡（或事件冒泡）3.null（Ototype的原型是null）4.reactive（或ref，reactive用于对象，ref用于基本类型）5.src/index.js（默认入口）6.二进制分帧/多路复用/服务器推送（任意一个）7.pending（初始状态为等待）8.align-items（交叉轴对齐）9.宏任务（微任务在宏任务前执行）10.5（通常限制为5MB）三、判断题1.×（默认是事件冒泡阶段）2.×（CSS变量可在任意选择器中声明，作用域取决于选择器）3.×（typeofnull返回"object"）4.√（组合式API通过setup复用逻辑更灵活）5.√（模块联邦支持跨应用共享）6.√（async函数自动返回Promise）7.×（Flex子元素仍在文档流中，只是布局方式改变）8.√（跨域请求默认不带Cookie，需withCredentials）9.√（ES6模块默认导出exportdefault只能有一个）10.×（Grid适合二维，Flex适合一维）四、简答题1.Vue3响应式原理核心是通过Proxy代理目标对象，拦截get、set等操作。当读取属性时收集依赖（track），当修改属性时触发依赖更新（trigger）。Ref通过包装对象实现基本类型的响应式，内部使用value属性访问。2.方法：①父元素display:flex;align-items:center;（Flex布局）；②子元素position:absolute;top:50%;transform:translateY(-50%);（绝对定位+transform）；③父元素display:table-cell;vertical-align:middle;（表格布局）。3.事件循环是JavaScript处理异步任务的机制。执行栈先处理同步任务，完成后检查微任务队列（如Promise.then）并全部执行；接着处理宏任务队列（如setTimeout、事件回调），每次宏任务执行后再次检查微任务，如此循环。4.TreeShaking用于移除代码中未使用的部分（死代码），减少打包体积。实现条件：使用ES6模块（import/export）、生产环境模式（mode:'production'）、代码无副作用（通过sideEffects配置声明）。五、讨论题1.首屏慢原因：JS/CSS文件过大、请求资源多、服务器响应慢、未利用缓存。优化策略：代码分割（CodeSplitting）、压缩混淆、使用CDN加速、预加载（preload）、服务端渲染（SSR）、缓存策略（如HTTP缓存、ServiceWorker）。2.CORS优点：支持GET/POST等所有请求方法，浏览器原生支持，安全（通过Access-Control-头控制）；缺点：需服务端配合设置头，旧浏览器（如IE8-9）需用XDomainRequest。JSONP优点：兼容旧浏览器，无需XMLHttpRequest；缺点：仅支持GET，需服务端返回脚本，存在XSS风险。3.差异：函数组件无实例、无this、通过hooks管理状态（useState/useEffect）；类组件有实例、有生命周期（componentDidMount等）、通过this.state管理状态。适用场景：函数组件适合简单UI组件或逻辑复用（hooks）；类组件适合复杂状态管理或需要访问实例的场景（如旧项目迁移）。4.安全风险及防护：①