2026年19前端面试题及答案

2026年19前端面试题及答案

一、单项选择题（共10题，每题2分）1.TypeScript中，以下哪种方式可以约束泛型函数的两个参数类型一致？A.直接使用any类型B.使用单个泛型参数T约束两个参数C.使用unknown类型D.使用void类型2.Vue3中，替代Vue2的this.$emit的CompositionAPI方法是？A.defineEmitsB.emitC.useEmitD.onEmit3.React18中，实现并发渲染的核心API是？A.useStateB.useEffectC.createRootD.useMemo4.国内主流的微前端框架是？A.QiankunB.Single-SPAC.ReactMicroFrontendsD.VueMicroApps5.WebAssembly的编译源语言不包括？A.C/C++B.RustC.TypeScriptD.Go6.前端性能指标LCP的全称是？A.LargestContentfulPaintB.LongestContentfulPaintC.LargestComponentPaintD.LongestComponentPaint7.支持一次编码编译为小程序、H5、App的跨端框架是？A.ReactNativeB.UniAppC.FlutterD.Cordova8.前端集成大模型时，处理流式响应的常见方式是？A.一次性请求所有结果B.使用EventSourceC.监听fetch的response.body.getReaderD.使用XMLHttpRequest的onprogress9.CSS中实现容器查询的语法是？A.@mediaB.@containerC.@viewportD.@import10.Vite默认构建产物不包括？A.ESMB.CommonJSC.IIFED.UMD二、填空题（共10题，每题2分）1.Vue3响应式系统的核心是基于________实现的。2.React18中，自动批处理默认不处理的更新类型是________（如setTimeout内的更新）。3.TypeScript中，将any转换为具体类型的语法是________（类型断言）。4.微前端基座应用的核心作用是________（加载、路由分发子应用）。5.WebAssembly二进制文件的后缀是________。6.性能指标FID的全称是________。7.UniApp中跨端条件编译的语法是________（如/ifdefMP-WEIXIN/）。8.大模型API请求头Authorization通常携带________（格式：BearerToken）。9.CSS逻辑属性中表示“开始侧”的属性是________。10.Vite自定义插件的核心钩子函数是________（如config、configureServer）。三、判断题（共10题，每题2分）1.Vue3完全摒弃了OptionsAPI，仅支持CompositionAPI。（）2.React18的createRoot方法支持并发渲染。（）3.TypeScript的unknown类型比any更安全，需类型检查后才能使用。（）4.微前端子应用必须独立部署，不能与基座同服务器。（）5.WebAssembly可以直接操作浏览器DOM。（）6.优化LCP仅需关注首屏图片，与字体无关。（）7.UniApp支持编译为微信、支付宝小程序及H5、App。（）8.大模型流式响应需监听response.body.getReader的read方法。（）9.CSS@container查询需父元素设置container-type才能生效。（）10.Vite开发服务器用原生ES模块，无需打包，启动更快。（）四、简答题（共4题，每题5分）1.对比Vue3CompositionAPI与OptionsAPI的优势。2.React18的并发特性有哪些，如何提升用户体验？3.TypeScript泛型的作用及常见使用场景。4.前端首屏加载优化的3种核心方法。五、讨论题（共4题，每题5分）1.微前端架构在大型项目中的实践难点及解决方案。2.前端集成大模型（如GPT）需考虑哪些问题？3.UniApp、Taro、ReactNative的优缺点对比及适用场景。4.WebAssembly在前端的应用场景及当前挑战。答案与解析一、单项选择题答案1.B解析：单个泛型参数T可约束两个参数类型一致，如functionfn<T>(a:T,b:T):T{}。2.A解析：Vue3CompositionAPI中，通过defineEmits声明事件，子组件用emit触发。3.C解析：React18用createRoot替代ReactDOM.render，支持并发渲染。4.A解析：Qiankun是阿里开源的国内主流微前端框架，兼容Vue/React等。5.C解析：TypeScript需编译为JS，不能直接编译为WebAssembly，常见源语言为C/C++、Rust、Go。6.A解析：LCP是最大内容绘制，衡量首屏主要内容加载完成的时间。7.B解析：UniApp支持一次编码编译为多端，包括小程序、H5、App。8.C解析：fetch的response.body.getReader可逐段读取流式响应数据。9.B解析：@container是CSS容器查询语法，用于基于父容器尺寸调整样式。10.B解析：Vite默认构建产物为ESM、IIFE、UMD，不包含CommonJS。二、填空题答案1.Proxy解析：Vue3用Proxy替代Vue2的Object.defineProperty，支持数组/对象的深层响应。2.异步操作（如setTimeout、Promise）解析：React18自动批处理同步更新，异步更新默认不批处理。3.类型断言（如asT或<T>）解析：将any转换为具体类型，需确保类型安全。4.加载子应用、路由分发、共享资源解析：基座是微前端的核心调度者，管理子应用生命周期。5..wasm解析：WebAssembly二进制文件后缀为.wasm，可在浏览器中高效运行。6.FirstInputDelay解析：首次输入延迟，衡量用户首次交互到浏览器响应的时间。7./ifdef平台标识/代码/endif/解析：如MP-WEIXIN表示微信小程序平台。8.BearerToken解析：大模型API通常要求在Authorization头中携带Bearer格式的认证令牌。9.inline-start解析：CSS逻辑属性，替代left/right，适配从右到左的布局。10.config、configureServer、build解析：Vite插件通过钩子函数介入构建流程。三、判断题答案1.×解析：Vue3同时支持OptionsAPI和CompositionAPI，兼容Vue2项目迁移。2.√解析：createRoot是React18并发渲染的入口，支持时间切片等特性。3.√解析：unknown类型无法直接调用方法，需类型断言或检查后才能使用，比any更安全。4.×解析：子应用可与基座同服务器部署，只要路径区分即可。5.×解析：WebAssembly需通过JS桥接才能操作DOM，不能直接访问浏览器API。6.×解析：LCP还受字体加载影响，需优化字体加载（如预加载）。7.√解析：UniApp支持多端编译，覆盖主流小程序、H5和App平台。8.√解析：通过getReader的read方法逐段读取流式响应，实现打字机效果。9.√解析：父元素需设置container-type（如size），才能在子元素中使用@container查询。10.√解析：Vite基于原生ES模块，开发时无需打包，启动速度远快于Webpack。四、简答题答案1.对比Vue3CompositionAPI与OptionsAPI的优势：OptionsAPI通过data、methods等选项组织代码，逻辑分散；CompositionAPI通过函数式组织，逻辑集中（如同一功能的代码放在一个函数中）。CompositionAPI支持复用（如自定义hooks）、类型推断更友好、支持更好的代码拆分，适合大型项目复杂逻辑的管理；OptionsAPI更易入门，适合小型项目。2.React18的并发特性及用户体验提升：核心特性包括时间切片（将渲染任务拆分为小块，避免阻塞主线程）、自动批处理（合并同步更新，减少渲染次数）、Transitions（标记低优先级更新，优先处理用户交互）。提升体验：用户输入（如打字）时，低优先级更新（如列表渲染）不会阻塞，交互更流畅；页面切换时，不会因渲染耗时导致卡顿。3.TypeScript泛型的作用及场景：泛型用于创建可复用的组件，支持多种类型而不丢失类型安全。常见场景：①泛型函数（如通用的数组操作函数）；②泛型接口/类（如通用的容器类）；③泛型约束（如约束泛型参数实现特定接口）。例如，functionmap<T,U>(arr:T[],fn:(item:T)=>U):U[]{}，支持不同类型数组的映射。4.前端首屏加载优化的3种方法：①资源懒加载：首屏仅加载必要资源（如图片用loading="lazy"，非首屏组件动态导入）；②代码拆分：用Vite/Webpack的代码分割，将首屏代码单独打包；③静态资源优化：图片压缩（WebP格式）、字体预加载（linkrel="preload"）、CSS内联首屏样式，减少请求数量。五、讨论题答案1.微前端实践难点及解决方案：难点：①全局资源冲突（如样式、变量）；②子应用通信复杂；③路由管理同步困难；④性能overhead。解决方案：①样式隔离（如Qiankun的沙箱、CSSModules）；②通信方案（基座与子应用用props传递，子应用间用全局状态管理或EventBus）；③路由同步（基座监听路由变化，加载对应子应用）；④性能优化（子应用预加载、缓存静态资源）。2.前端集成大模型需考虑的问题：①认证安全：API密钥需后端存储，前端通过代理请求，避免密钥暴露；②流式响应处理：用ReadableStream实现打字机效果，避免等待全量结果；③限流与成本：设置请求频率限制，避免过度调用；④错误处理：网络超时、API限流、格式错误等场景的兜底逻辑；⑤性能优化：大模型响应可能较大，需按需加载，避免阻塞主线程。3.跨端框架优缺点及适用场景：-UniApp：优点（多端覆盖广、语法简单），缺点（性能略逊于原生）；适用场景：快速迭代的中小型项目、需要多端兼容的业务（如电商、资讯）。-Taro：优点（React语法、支持多端），缺点（小程序端兼容性需处理）；适用场景：React技术栈的多端项目。-ReactNative：优点（原生性能、React语法