2026年6年前端面试题及答案

2026年6年前端面试题及答案

一、单项选择题（总共10题，每题2分）1.以下哪个不是HTML5的新特性？（）A.`<canvas>`B.本地存储C.`<header>`标签D.XHTML2.CSS中，优先级最高的选择器是？（）A.内联样式B.ID选择器C.类选择器D.标签选择器3.JavaScript中，Promise的状态不包括？（）A.pendingB.fulfilledC.rejectedD.resolved4.Vue中，组件挂载到DOM后调用的生命周期钩子是？（）A.createdB.mountedC.beforeUpdateD.updated5.React函数组件的状态管理方式是？（）A.`useState`B.`this.state`C.ReduxD.MobX6.不属于跨域解决方案的是？（）A.CORSB.JSONPC.WebSocketD.代理服务器7.ES6中，不属于变量声明方式的是？（）A.`let`B.`var`C.`const`D.`static`8.关于Webpack的描述错误的是？（）A.可打包CSS文件B.可处理图片资源C.是模块打包工具D.仅用于React项目9.CSS实现弹性布局的属性是？（）A.`display:flex`B.`display:grid`C.`display:table`D.`display:inline-block`10.HTTP状态码404表示？（）A.服务器内部错误B.资源未找到C.权限不足D.请求超时二、填空题（总共10题，每题2分）1.CSS选择器优先级从高到低依次为：________、________、________、________。2.JavaScript中，普通函数调用时`this`指向________，箭头函数中`this`指向________。3.Vue双向数据绑定基于________和________实现。4.React全局状态管理库常见的有________和________。5.HTTP协议中，________状态码表示请求成功，________状态码表示重定向。6.Web组件的三大核心技术是：________、________、________。7.常见的CSS预处理器有________、________、________。8.减少CSS重排的方法包括________和________。9.JavaScript事件循环中，宏任务包括________、________，微任务包括________、________。10.CommonJS模块导出方式为________，导入方式为________；ES6模块导出方式为________，导入方式为________。三、判断题（总共10题，每题2分）1.ES6中`let`没有变量提升。（）2.Vue生命周期钩子`created`在`mounted`之前执行。（）3.React纯组件（`PureComponent`）会对`props`和`state`进行深度比较。（）4.HTTP/2的特点包括二进制帧、多路复用、头部压缩。（）5.CSS的BFC可解决`margin`重叠问题。（）6.事件委托利用事件冒泡将子元素事件委托给父元素。（）7.CommonJS模块导入导出是动态的，ES6模块是静态的。（）8.WebWorker可在主线程中操作DOM。（）9.TypeScript类型断言可将变量断言为任意不兼容类型。（）10.PWA的核心特性包括离线可用、推送通知、添加到主屏幕。（）四、简答题（总共4题，每题5分）1.解释JavaScript闭包的概念及应用场景。2.简述Vue和React的设计理念主要区别。3.列举至少4种前端性能优化策略。4.说明HTTP缓存的原理及强缓存、协商缓存的区别。五、讨论题（总共4题，每题5分）1.谈谈前端工程化的实践和工具链，以及如何提升开发效率。2.分析单页应用（SPA）的优缺点，并提出优化方案。3.探讨WebAssembly（WASM）的应用前景及解决的前端问题。4.列举前端常见安全问题及防范措施。答案及解析一、单项选择题答案1.D（XHTML是HTML的严格版本，非HTML5新特性）2.A（内联样式优先级最高，其次为ID选择器、类选择器、标签选择器）3.D（Promise状态为`pending`、`fulfilled`、`rejected`，`resolved`是`resolve`的结果，非状态）4.B（`mounted`在组件挂载到DOM后调用，`created`在实例创建后调用）5.A（函数组件通过`useState`管理状态，`this.state`是类组件语法）6.C（WebSocket是通信协议，非跨域解决方案，CORS、JSONP、代理是跨域方法）7.D（`static`是类的静态属性，非变量声明方式）8.D（Webpack可用于任何前端项目，不局限于React）9.A（`display:flex`是弹性布局，`grid`是网格布局）10.B（404表示资源未找到，500为服务器错误，403为权限不足，408为请求超时）二、填空题答案1.内联样式、ID选择器、类/伪类/属性选择器、标签/伪元素选择器2.`window`（非严格模式）、定义时的外层`this`（箭头函数`this`由外层作用域决定）3.数据劫持（`Object.defineProperty`）、发布-订阅模式（观察者模式）4.Redux、MobX（或Recoil、ContextAPI）5.2xx（如200）、3xx（如301、302）6.自定义元素（CustomElements）、ShadowDOM、HTML模板（`<template>`）7.Sass、Less、Stylus（或PostCSS）8.避免频繁操作DOM、批量修改样式（或使用`classList`修改样式）9.`setTimeout`、`setInterval`（或DOM渲染、I/O）；`Promise.then`、`MutationObserver`（或`process.nextTick`）10.`module.exports`/`exports`、`require`；`export`/`exportdefault`、`import`三、判断题答案1.×（`let`有变量提升，但存在暂存死区，不可在声明前使用）2.√（`created`在实例创建后调用，`mounted`在挂载后调用，顺序为`created`→`mounted`）3.×（React纯组件是浅比较，仅比较引用，不深度比较对象内容）4.√（HTTP/2核心特性包括二进制帧、多路复用、头部压缩、服务器推送）5.√（BFC可包含内部`margin`，避免与外部元素的`margin`重叠）6.√（事件委托利用事件冒泡，将子元素事件处理委托给父元素，减少事件监听数量）7.√（CommonJS是运行时动态加载，ES6模块是编译时静态分析，导入导出需在顶层）8.×（WebWorker运行在独立线程，无法访问DOM，需通过`postMessage`与主线程通信）9.×（TypeScript类型断言需类型兼容，否则编译报错（严格模式下））10.√（PWA核心特性包括离线缓存（ServiceWorker）、推送通知、添加到主屏幕）四、简答题答案（每题约200字）1.闭包：函数与其词法作用域的组合，内部函数可访问外部函数的变量（即使外部函数执行完毕）。形成条件：函数嵌套、内部函数引用外部变量、内部函数被外部引用。应用场景：①模块化（封装私有变量，如计数器：`constcounter=()=>{letcount=0;return()=>++count;};`）；②延迟执行（如`setTimeout`中使用外部变量）；③函数柯里化（参数复用，如`constadd=x=>y=>x+y;`）。2.Vue与React设计理念区别：Vue是渐进式框架，强调易用性，支持模板语法，双向数据绑定简化表单，适合从简单组件到复杂应用的渐进扩展。React是单向数据流，强调组件化和函数式编程，通过虚拟DOM和diff算法优化性能，状态管理更可预测，适合大型应用的状态维护。VueAPI偏向声明式，React用JSX将逻辑与UI结合；Vue响应式系统自动追踪依赖，React需手动触发更新（`setState`）。3.前端性能优化策略：①资源优化：压缩代码、图片懒加载（如`IntersectionObserver`）、使用WebP格式；②缓存策略：HTTP缓存（强缓存、协商缓存）、ServiceWorker离线缓存；③渲染优化：减少重排（批量修改样式、用`transform`代替`top/left`）、虚拟列表（如`react-virtualized`）、骨架屏；④代码优化：避免内存泄漏（及时清理事件监听）、异步编程（`Promise`/`async/await`）、代码分割（Webpack懒加载）；⑤网络优化：HTTP/2、CDN加速、合并资源减少请求数。4.HTTP缓存原理及强缓存、协商缓存区别：原理：客户端首次请求资源时，服务器返回资源及缓存策略（如`Cache-Control`/`Expires`）；后续请求时，客户端根据策略判断是否使用缓存。-强缓存：由`Cache-Control:max-age`（或`Expires`）控制，客户端直接使用缓存，状态码200（fromcache），优先级高于协商缓存。-协商缓存：由`ETag`/`Last-Modified`和`If-None-Match`/`If-Modified-Since`控制，客户端带验证头请求服务器，若资源未变则返回304，使用缓存。五、讨论题答案（每题约200字）1.前端工程化实践与工具链：工具链包括Git（版本控制）、Webpack/Vite（构建）、ESLint/Prettier（代码规范）、Jest/Cypress（测试）、CI/CD（持续集成）。实践：用脚手架（如`create-react-app`）初始化项目，Webpack打包资源、代码分割；ESLint检查代码质量，Prettier统一格式；Jest做单元测试，Cypress做端到端测试；CI/CD自动部署。提升效率：统一开发规范，减少重复工作，自动化构建和测试，便于团队协作，保证项目可维护性，支持快速迭代。2.SPA优缺点及优化：优点：页面切换流畅，用户体验接近原生，开发效率高（组件化）。缺点：首屏加载慢（需加载大量JS）、SEO差、内存管理复杂。优化：①首屏：SSR/SSG（服务端渲染/静态生成）、代码分割（懒加载）；②SEO：预渲染（如`prerender-spa-plugin`）或SSR输出HTML；③性能：虚拟列表、懒加载图片，ServiceWorker缓存；④内存：及时卸载组件、清理事件监听，避免泄漏。通过优化，SPA可兼顾体验与性能。3.WebAssembly（WASM）应用前景：WASM是二进制指令格式，可在浏览器高效运行。前景：在游戏（3D渲染、物理引擎）、音视频处理（编解码）、科学计算（大数据分析）、区块链（合约执行）等领域应用。解决前端性能瓶颈（如复杂计算、图形渲染），支持C/C++/Rust等语言编译为WASM，复用现有库，提升计算密集型任务效率，结合WebGL实现高性能图形应用，未来可能成为前端与原生应用竞争的技术，拓展前端能力边界。