2026年360前端面试题及答案

2026年360前端面试题及答案

一、单项选择题（10题，每题2分）1.以下哪个HTTP状态码表示服务器成功处理了请求且返回新资源？A.200B.201C.304D.4042.HTML5中，用于定义页面主要内容区块的语义化标签是？A.<section>B.<article>C.<main>D.<aside>3.CSSFlex布局中，哪个属性用于控制项目在主轴方向的对齐方式？A.justify-contentB.align-itemsC.flex-wrapD.flex-direction4.JavaScript中，关于闭包的描述错误的是？A.闭包可以访问外部函数作用域变量B.闭包会导致内存泄漏C.闭包可用于数据私有化D.闭包可能延长变量生命周期5.浏览器事件循环中，以下任务队列优先级最高的是？A.微任务B.宏任务C.UI渲染任务D.网络请求任务6.ReactHooks中，用于处理副作用（如数据获取）的是？A.useStateB.useEffectC.useContextD.useReducer7.HTTPS与HTTP的核心区别在于？A.端口不同B.基于TLS加密传输C.不支持CookieD.响应速度更快8.以下哪种方式无法有效防止XSS攻击？A.输入过滤B.输出编码C.使用CSP策略D.直接渲染用户输入内容9.TypeScript中，以下哪种类型断言语法正确？A.<Type>valueB.valueasTypeC.Type(value)D.以上均正确10.Vite相比Webpack的核心优势不包括？A.基于原生ES模块B.开发时热更新更快C.无需打包整个项目D.默认支持TypeScript编译二、填空题（10题，每题2分）1.HTML5语义化标签中，用于定义导航链接的是________。2.CSS选择器优先级中，优先级高于类选择器的是________和ID选择器。3.JavaScript中，var声明的变量会被提升至作用域顶部，而________（let/const）存在暂时性死区。4.Promise对象的三种状态是pending、________和rejected。5.ES6箭头函数没有自己的this，而是继承自________的this。6.HTTP请求方法中，用于获取资源的是________。7.Webpack中，________用于将非JS文件转换为可处理的模块。8.跨域请求的常见方案包括CORS、JSONP和________。9.Flex布局中，________属性控制项目在交叉轴方向的对齐方式。10.Vue2响应式原理基于Object.defineProperty的________和setter。三、判断题（10题，每题2分）1.typeofnull的结果是"object"。（√/×）2.闭包只能读取外部变量，不能修改。（√/×）3.CSS中!important可以覆盖所有其他样式优先级。（√/×）4.事件捕获阶段是从根节点向目标节点传播。（√/×）5.React中setState是同步更新状态的。（√/×）6.HTTP强缓存命中时，浏览器不会发送请求到服务器。（√/×）7.同源策略限制跨域页面的JS操作。（√/×）8.箭头函数的this指向定义时的外层词法作用域。（√/×）9.Flex布局中，flex-direction:column时主轴为垂直方向。（√/×）10.TypeScript类型断言会改变变量实际类型。（√/×）四、简答题（4题，每题5分）1.请简述浏览器渲染页面的完整过程。2.前端缓存分为哪几类？各自特点是什么？3.列举5种前端性能优化手段并简述原理。4.ReactHooks中useEffect的工作原理是什么？五、讨论题（4题，每题5分）1.作为360前端工程师，如何防范XSS攻击？请结合场景举例。2.大型前端项目的工程化方案应包含哪些模块？如何设计？3.对比React、Vue、Angular三大框架优缺点及适用场景。4.微前端架构在360产品中的应用需考虑哪些关键点？答案和解析：一、单项选择题1.B（201表示资源创建成功）2.C（<main>是主要内容区块）3.A（justify-content控制主轴对齐）4.B（闭包不会必然导致内存泄漏，合理使用可优化性能）5.A（微任务优先级高于宏任务）6.B（useEffect处理副作用）7.B（HTTPS基于TLS加密传输）8.D（直接渲染用户输入会导致XSS）9.D（两种语法均正确）10.D（Vite需配合插件支持TypeScript）二、填空题1.<nav>2.内联样式3.var4.fulfilled5.外层词法作用域6.GET7.loader8.代理服务器9.align-items10.getter三、判断题1.×（typeofnull返回"object"是历史遗留问题，实际应为"null"）2.×（闭包可通过引用修改外部变量）3.√（!important优先级最高）4.√（事件捕获阶段从根节点向目标传播）5.×（React中setState为异步更新）6.√（强缓存直接使用本地资源）7.√（同源策略限制跨域操作）8.√（箭头函数继承外层this）9.√（column为垂直主轴）10.×（类型断言不改变实际类型）四、简答题1.浏览器渲染过程：解析HTML构建DOM树→解析CSS构建CSSOM树→合并DOM+CSSOM生成渲染树→布局（计算元素位置）→绘制（像素渲染）→合成（分层渲染）。关键步骤：DOM/CSSOM合并，渲染树构建，重排重绘优化。2.前端缓存分类：强缓存（Expires/Cache-Control，无网络请求）、协商缓存（ETag/Last-Modified，需服务器验证）、ServiceWorker缓存（离线缓存）、本地存储（localStorage/sessionStorage）。特点：强缓存优先级更高，协商缓存依赖服务器验证。3.优化手段：1.资源压缩（减小体积）；2.懒加载（按需加载）；3.代码分割（Webpack）；4.图片优化（WebP/压缩）；5.减少重排重绘（批量DOM操作）；6.缓存策略（HTTP缓存）。原理：通过减少资源体积或加载时间提升页面响应速度。4.useEffect原理：接收回调函数和依赖数组，组件挂载/更新时执行，依赖变化时重新执行，卸载时执行清理函数。首次渲染后执行，依赖数组为空时仅执行一次，非空时变化时执行。需注意依赖完整性以避免遗漏更新。五、讨论题1.XSS防范：输入过滤（过滤特殊字符）、输出编码（如React自动转义）、CSP策略（限制脚本来源）、避免eval/innerHTML直接渲染用户内容。360安全场景：搜索结果渲染需过滤HTML标签，用户评论区使用content-security-policy限制脚本。2.工程化方案：构建（Webpack/Vite）、部署（CI/CD流程）、协作（Git工作流）、监控（错误捕获Sentry）、代码规范（ESLint+Prettier）。设计：模块化拆分，按需构建，自动化测试覆盖核心业务，线上监控性能指标。3.框架对比：React（组件化强，灵活性高，适合复杂应用），Vue（易上手，文档友好，适合快速开发），Angular（企业级解决方案，内置功能全，适合大型项