2026年360前端笔试题答案

2026年360前端笔试题答案

一、单项选择题（总共10题，每题2分）1.以下哪个不是HTML5的新特性？A.<canvas>B.<video>C.<frame>D.<audio>2.CSS中，以下哪种选择器的优先级最高？A.类选择器B.内联样式C.标签选择器D.伪类选择器3.JavaScript中，关于闭包的描述错误的是？A.闭包可以访问外部函数的变量B.闭包会导致内存泄漏C.闭包是函数和其作用域的组合D.闭包可以延长变量的生命周期4.以下关于Promise的说法，正确的是？A.Promise有三种状态：pending、fulfilled、rejectedB.Promise的then方法只能链式调用一次C.Promise.resolve()会立即返回一个已完成的PromiseD.Promise.all()只要有一个失败就会整体失败5.前端安全中，防止XSS攻击的有效手段是？A.输入验证B.加密传输C.使用POST请求D.限制Cookie过期时间6.Webpack中，以下哪个是用于处理CSS文件的loader？A.style-loaderB.html-loaderC.babel-loaderD.url-loader7.Vue中，响应式数据的实现依赖于？A.Object.definePropertyB.ProxyC.两者都有D.以上都不是8.HTTP状态码中，403表示什么？A.未找到资源B.禁止访问C.请求超时D.服务器内部错误9.浏览器渲染页面的过程中，以下哪个步骤是正确的？A.解析HTML→解析CSS→布局→绘制→合成B.解析CSS→解析HTML→布局→绘制→合成C.解析HTML→布局→解析CSS→绘制→合成D.解析HTML→解析CSS→绘制→布局→合成10.TypeScript中，以下哪种方式可以定义一个可能为字符串或数字的类型？A.typeMyType=string|numberB.interfaceMyType{string|number}C.classMyType{string|number}D.letMyType:string|number二、填空题（总共10题，每题2分）1.CSS中，实现水平垂直居中的布局方式有______（至少填两种）。2.JavaScript的事件循环中，宏任务包括______（至少填两种），微任务包括______（至少填两种）。3.ES6中，______关键字用于定义类，______关键字用于继承。4.Vue的生命周期钩子中，______在组件挂载后调用，______在组件更新前调用。5.HTTP请求方法中，______用于获取资源，______用于提交资源。6.Web存储中，______的存储大小约为5-10MB，且数据仅在当前会话有效，______的存储大小约为4-5MB，且数据持久化。7.浏览器的同源策略要求______、______、______必须相同。8.React中，______钩子用于在组件挂载时执行副作用操作，______钩子用于缓存函数或值。9.前端性能优化中，______指标用于衡量页面加载速度，______指标用于衡量页面交互流畅度。10.前端架构模式中，______模式将业务逻辑与UI分离，______模式通过事件总线实现组件通信。三、判断题（总共10题，每题2分）1.HTML语义化标签（如<header>、<footer>）主要是为了提高页面的美观度。（）2.CSS的层叠性是指样式表中的样式会按照特定规则叠加，后面的样式会覆盖前面的。（）3.JavaScript中，所有对象都有原型，null和undefined没有原型。（）4.异步函数（async/await）是Promise的语法糖，本质上还是基于Promise的。（）5.Vue的双向数据绑定是通过v-model指令实现的，其底层原理是语法糖，结合了v-bind和v-on。（）6.React的虚拟DOM比真实DOM操作更快，因为它减少了直接操作DOM的次数。（）7.HTTP的缓存策略中，强缓存（如Expires、Cache-Control）不需要向服务器验证资源是否新鲜。（）8.前端安全中，CSRF攻击可以通过使用Token验证来防范。（）9.Webpack的loader用于处理非JS文件，plugin用于扩展Webpack的功能，两者作用相同。（）10.TypeScript的类型断言（TypeAssertion）可以将一个变量断言为任何类型，无需考虑类型兼容性。（）四、简答题（总共4题，每题5分）1.请解释什么是闭包，以及闭包的常见应用场景有哪些？2.Vue中，组件之间有哪些通信方式？请分别说明适用场景。3.前端性能优化的策略有哪些？请从加载优化、渲染优化、代码优化等方面阐述。4.Reacthooks相比传统的类组件有哪些优势？使用hooks时需要注意什么？五、讨论题（总共4题，每题5分）1.请谈谈前端工程化的重要性，以及在项目中如何实践前端工程化？2.单页应用（SPA）和多页应用（MPA）各有什么优缺点？在什么场景下选择SPA，什么场景下选择MPA？3.前端开发中面临的安全威胁有哪些？如何进行有效的安全防护？4.随着大前端的发展，前端技术栈越来越丰富，你认为在选择技术栈时需要考虑哪些因素？请结合实际项目经验谈谈你的看法。答案与解析一、单项选择题答案1.C（<frame>是HTML4标签，HTML5不推荐使用）2.B（内联样式优先级最高）3.B（闭包本身不会导致内存泄漏，不当使用才会）4.A（Promise有pending、fulfilled、rejected三种状态）5.A（输入验证是防XSS的核心手段）6.A（style-loader处理CSS注入，css-loader处理CSS文件）7.B（Vue3响应式核心是Proxy）8.B（403表示禁止访问）9.A（浏览器渲染流程：解析HTML→解析CSS→布局→绘制→合成）10.A（TypeScript联合类型用`|`定义）二、填空题答案1.flex布局、grid布局（或绝对定位+transform、table-cell布局等）2.宏任务：setTimeout、setInterval；微任务：Promise.then、MutationObserver3.class；extends4.mounted；beforeUpdate5.GET；POST6.sessionStorage；localStorage7.协议、域名、端口8.useEffect；useMemo（或useCallback）9.首屏加载时间（FCP）；帧率（FPS）10.MVVM；发布-订阅三、判断题答案1.×（语义化标签提升可访问性、SEO，非美观度）2.√（CSS层叠性遵循优先级和顺序叠加）3.√（null和undefined不是对象，无原型）4.√（async/await基于Promise实现）5.√（v-model是v-bind和v-on的语法糖）6.√（虚拟DOM通过diff减少真实DOM操作）7.√（强缓存命中时直接用缓存，无需验证）8.√（CSRFToken可验证请求合法性）9.×（loader转换文件，plugin扩展功能，作用不同）10.×（类型断言需类型兼容，不能随意断言）四、简答题答案1.闭包是函数与其词法环境的组合，可访问外部函数变量。应用场景：①模块封装（如IIFE创建私有变量）；②回调函数（事件监听中保存外部变量）；③函数柯里化（延迟参数计算）。合理使用可实现数据隐藏、逻辑复用。2.Vue组件通信方式：①props/emit：父子通信，父传子用props，子传父用$emit；②provide/inject：祖孙通信，祖先提供数据，后代注入；③EventBus：全局事件总线，任意组件通信；④Vuex/Pinia：多组件共享状态。父子用props/emit，祖孙用provide/inject，全局共享用状态管理。3.性能优化策略：①加载优化：压缩资源、代码分割、懒加载、CDN加速；②渲染优化：减少重排重绘、虚拟列表、骨架屏；③代码优化：减少嵌套、使用高性能API（如DocumentFragment）、优化算法。从资源加载、页面渲染、代码逻辑多维度优化。4.Reacthooks优势：①代码简洁，告别this问题；②逻辑复用性强（自定义hooks）；③细粒度状态管理。注意事项：①hooks需在组件顶层调用；②useEffect需处理依赖数组；③自定义hooks以use开头；④useState更新是异步的。五、讨论题答案1.前端工程化重要性：提升开发效率（自动化打包、测试）、保证代码质量（规范、静态检查）、协作高效（统一构建流程）。实践：用webpack/vite打包，ESLint/Prettier规范代码，Git+CI/CD部署，组件化开发，状态管理（如Pinia）。2.SPA优点：交互流畅、开发效率高；缺点：首屏加载慢、SEO差。MPA优点：首屏快、SEO好；缺点：页面切换刷新、代码复用差。SPA适合交互复杂的后台系统，MPA适合内容型网站（如新闻、电商）。3.安全威胁：XSS（注入恶意脚本）、CSRF（伪造请求）、数