2026年58同城前端笔试题及答案

2026年58同城前端笔试题及答案

一、单项选择题(总共10题，每题2分)1.以下关于ES6模块导入导出的说法，错误的是（）A.exportdefault只能有一个B.importasmod可以导入所有导出成员C.export可以导出变量、函数、类D.import语句必须放在文件顶部2.关于闭包，下列说法正确的是（）A.闭包会导致内存泄漏，因此应避免使用B.闭包可以访问函数外部的变量，即使外部函数已执行完毕C.箭头函数无法形成闭包D.闭包中的变量会被垃圾回收机制立即回收3.React中，以下哪种Hooks可以在条件语句中使用？（）A.useStateB.useEffectC.useContextD.以上都不可以4.浏览器渲染过程中，以下哪个阶段不属于关键渲染路径？（）A.解析HTML生成DOM树B.解析CSS生成CSSOM树C.执行JavaScript代码D.发送HTTP请求获取资源5.TypeScript中，以下哪种类型定义可以表示任意类型？（）A.anyB.unknownC.neverD.void6.关于HTTP请求，以下说法错误的是（）A.GET请求可以携带请求体，但不推荐B.POST请求的请求体大小没有限制C.PUT请求是幂等的D.DELETE请求是幂等的7.以下哪种前端性能优化手段不属于资源加载优化？（）A.图片懒加载B.代码分割C.缓存策略D.减少重排重绘8.关于XSS攻击，以下说法正确的是（）A.XSS攻击是跨站请求伪造B.存储型XSS是攻击者注入的脚本存储在服务器C.所有XSS攻击都可以通过设置HTTP-onlyCookie防护D.输入过滤可以完全防止XSS攻击9.Webpack中，以下哪个配置项用于指定入口文件？（）A.outputB.entryC.moduleD.plugins10.微信小程序中，页面生命周期函数中，哪个函数在页面加载完成后执行（）A.onLoadB.onShowC.onReadyD.onHide二、填空题(总共10题，每题2分)1.JavaScript中，原型链的顶端是__________。2.React中，setState是__________（同步/异步）更新的，在合成事件和钩子函数中。3.Vue3中，用于响应式数据的核心API是__________。4.HTTP状态码中，401表示__________，403表示__________。5.TypeScript中，泛型的作用是__________。6.浏览器缓存中，强缓存的响应头是__________和__________。7.防抖的核心是__________，节流的核心是__________。8.常见的跨域解决方案有__________、__________、__________等。9.微信小程序中，页面栈的最大深度是__________。10.前端安全中，CSRF攻击的核心是__________。三、判断题(总共10题，每题2分)1.箭头函数的this指向定义时的上下文，而非调用时的上下文。（）2.React中，类组件的render方法必须返回一个React元素。（）3.Vue2中，响应式系统是基于Object.defineProperty实现的，无法监听数组的索引变化。（）4.HTTP的OPTIONS请求用于预检请求，判断服务器是否允许跨域。（）5.TypeScript中，接口（interface）和类型别名（type）完全等价，可以互相替换。（）6.浏览器的事件冒泡是从事件目标向文档根节点传播。（）7.前端性能指标LCP（LargestContentfulPaint）衡量的是页面首次渲染的时间。（）8.设置HTTP-onlyCookie可以有效防止CSRF攻击。（）9.微信小程序的分包加载可以减小主包体积，提高启动速度。（）10.Webpack的loader用于处理非JavaScript文件，plugin用于扩展Webpack功能。（）四、简答题(总共4题，每题5分)1.请简述闭包的原理，并列举至少两个常见的应用场景。2.ReactHooks中useEffect的依赖项有什么作用？如果忽略依赖项会导致什么问题？3.请列举至少5种前端性能优化的常见手段，并简要说明其中一种的实现原理。4.请简述微信小程序与H5的区别，以及它们各自的适用场景。五、讨论题(总共4题，每题5分)1.如何实现一个高性能的长列表渲染（虚拟列表）？请说明核心思路和关键步骤。2.前端工程化中，如何处理多环境（开发、测试、生产）的配置？请列举至少两种方案并说明优缺点。3.跨域问题的产生原因是什么？请列举至少三种解决方案，并分析它们的优缺点。4.请对比XSS和CSRF攻击的区别，并说明各自的防护措施。答案及解析一、单项选择题1.D解析：import语句可放在文件任意位置，只要在使用前执行，无需强制顶部。2.B解析：闭包保留外部函数词法环境，内部函数可访问外部变量；闭包合理使用不导致泄漏；箭头函数可形成闭包；变量需等引用消失才回收。3.D解析：ReactHooks必须在组件顶层调用，不能在条件、循环、嵌套函数中使用，否则破坏调用顺序。4.D解析：关键渲染路径含HTML/CSS解析、渲染树合成、布局绘制；HTTP请求属于资源获取，非渲染路径。5.A解析：any表示任意类型（无类型检查）；unknown是安全any；never表示永不存在的值；void表示无返回值。6.B解析：POST请求体大小受服务器配置限制，非无限制。7.D解析：减少重排重绘属于渲染优化，非资源加载优化。8.B解析：XSS是跨站脚本，CSRF是请求伪造；存储型XSS脚本存储在服务器；HTTP-onlyCookie仅防Cookie窃取；输入过滤不能完全防XSS。9.B解析：entry指定入口，output指定输出，module配置loader，plugins配置插件。10.C解析：onLoad页面加载触发，onShow显示触发，onReady加载完成（DOM渲染完成）触发，onHide隐藏触发。二、填空题1.Ototype2.异步3.ref/reactive4.未授权；禁止访问5.实现类型复用，支持多种类型6.Cache-Control；Expires7.延迟执行（重置定时器）；限制执行频率（固定时间一次）8.CORS；JSONP；代理服务器9.1010.利用用户登录状态伪造请求三、判断题1.√解析：箭头函数无自身this，继承父级上下文this。2.√解析：类组件render必须返回React元素（或null/undefined）。3.×解析：Vue2可监听数组push/pop等方法，无法监听索引和长度变化。4.√解析：OPTIONS预检判断服务器是否允许跨域。5.×解析：接口支持继承/声明合并，类型别名支持联合/映射类型，不完全等价。6.√解析：事件冒泡从目标向根节点传播。7.×解析：LCP衡量最大内容元素加载时间，首次渲染是FP。8.×解析：HTTP-onlyCookie仅防Cookie窃取，CSRF需Token验证等。9.√解析：小程序分包减小主包体积，提高启动速度。10.√解析：loader处理非JS文件，plugin扩展Webpack功能。四、简答题1.闭包原理：函数内部函数访问外部变量，外部函数执行后内部函数保留对外部变量的引用。应用场景：①防抖节流（保留定时器引用）；②模块化（隐藏内部变量，暴露接口）；③循环事件绑定（保存循环变量值）。2.useEffect依赖项作用：指定变量变化时执行effect，避免重复执行。忽略依赖项（空数组）会导致effect仅执行一次，无法响应后续变化；依赖缺失会导致使用旧变量值，出现bug。3.优化手段：图片懒加载、代码分割、缓存策略、减少重排重绘、资源压缩。实现原理（图片懒加载）：img设data-src，监听滚动，图片进入视口时将data-src赋值给src，按需加载。4.区别：①环境：小程序在微信容器，H5在浏览器；②性能：小程序原生渲染优于H5；③权限：小程序可调用微信API，H5受限；④分发：小程序依赖微信生态，H5依赖URL。适用场景：小程序适合高频、需原生能力（如58小程序）；H5适合轻量、低频次（如活动页）。五、讨论题1.虚拟列表核心思路：仅渲染视口可见项，减少DOM数量。关键步骤：①计算视口高度和项高度（固定/动态）；②确定可见项起始/结束索引；③渲染可见项，通过绝对定位模拟滚动（top=起始索引×项高）；④监听滚动更新可见索引；⑤动态高度时缓存项高度，避免重复计算。2.多环境配置方案：①环境变量+Webpack：process.env.NODE_ENV区分环境，设置API_URL等变量，优点简单，缺点客户端暴露；②配置文件+脚本切换：不同环境对应config.dev.js等文件，npm脚本切换，优点安全，缺点手动切换；③后端动态返回：前端请求后端获取配置，优点灵活，缺点增加请求。3.跨域原因：浏览器同源策略（协议/域名/端口相同）限制。解决方案：①CORS：服务器设Access-Control-Allow-Origin等头，支持所有方法，需服务器配置；②JSONP：script标签跨域，兼容性好，仅