2026年4399校招前端笔试题目及答案

2026年4399校招前端笔试题目及答案

一、单项选择题（总共10题，每题2分）1.以下关于ES6中`let`和`var`的区别，说法错误的是？A.`let`声明的变量有块级作用域B.`var`声明的变量存在变量提升C.`let`声明的变量不能重复声明D.`var`声明的变量在全局作用域下会成为`window`的属性，`let`不会2.以下CSS布局方式中，不能实现垂直居中的是？A.Flex布局的`align-items:center`B.Grid布局的`place-items:center`C.`position:absolute`配合`top:50%`和`transform:translateY(-50%)`D.`float:right`3.Promise的状态不包括以下哪个？A.`pending`B.`fulfilled`C.`rejected`D.`waiting`4.Vue中，以下哪个生命周期钩子在组件挂载完成后调用？A.`created`B.`mounted`C.`beforeMount`D.`updated`5.React中，`useState`Hook的作用是？A.用于处理副作用B.用于创建状态和更新状态的函数C.用于缓存函数结果D.用于获取DOM节点6.HTTP状态码中，`403`表示什么？A.未找到资源B.服务器内部错误C.禁止访问D.请求超时7.webpack中，`loader`的作用是？A.优化打包后的代码B.处理非JS文件，如CSS、图片等C.定义打包的入口和出口D.分割代码，实现按需加载8.JavaScript的事件循环中，宏任务不包括以下哪个？A.`setTimeout`B.DOM渲染C.`Promise.then`D.`script`标签执行9.解决前端跨域问题的方案中，不包括以下哪个？A.CORSB.JSONPC.代理服务器D.`localStorage`10.TypeScript中，以下哪种类型是联合类型？A.`number|string`B.`{name:string}`C.`[string,number]`D.`(x:number)=>number`二、填空题（总共10题，每题2分）1.CSS选择器的优先级从高到低依次是：______、______、______、元素选择器。2.ES6中，______方法可以将类数组对象或可迭代对象转换为真正的数组。3.Vue的双向数据绑定主要是通过______和______来实现的。4.React的虚拟DOM在______和______阶段会进行对比，以确定需要更新的真实DOM。5.HTTP的强缓存通过______和______响应头来设置。6.webpack中，`loader`用于______，`plugin`用于______。7.事件委托的原理是利用______，将子元素的事件绑定到______上。8.CSS3中，______属性可以实现元素的阴影效果，______属性可以实现元素的圆角。9.TypeScript中，______关键字用于断言一个变量的类型，有两种形式：______和______。10.前端性能优化中，______和______是衡量页面加载速度的重要指标。三、判断题（总共10题，每题2分）1.`let`声明的变量和`var`声明的变量一样，都存在变量提升。（）2.CSS的Flex布局和Grid布局都可以实现复杂的页面布局，Flex更适合一维布局，Grid更适合二维布局。（）3.Promise的状态一旦从`pending`变为`fulfilled`或`rejected`，就不能再改变。（）4.Vue中，父组件的`mounted`钩子一定在子组件的`mounted`钩子之后执行。（）5.React的Hook必须在函数组件的顶层调用，不能在循环、条件或嵌套函数中调用。（）6.HTTP的GET请求和POST请求的主要区别在于GET请求没有请求体，POST请求有请求体。（）7.webpack的`mode`为`production`时，会自动开启代码压缩、TreeShaking等优化。（）8.JavaScript的事件冒泡是从目标元素向祖先元素传播，事件捕获则相反。（）9.CSS的BFC（块格式化上下文）可以解决`margin`重叠和浮动元素的影响等问题。（）10.TypeScript的类型断言和类型转换是完全相同的概念。（）四、简答题（总共4题，每题5分）1.请简述Vue的响应式原理。2.请说明React中Hook的使用场景，并举例说明`useState`和`useEffect`的用法。3.请列举至少四种前端性能优化的方法，并简要说明。4.请简述webpack的配置优化方向，并举例说明如何优化打包速度。五、讨论题（总共4题，每题5分）1.请分析单页应用（SPA）的优缺点，并说明如何优化SPA的性能问题。2.请谈谈前端工程化的实践内容，包括代码规范、模块化、自动化构建等方面。3.请对比几种前端跨域解决方案（如CORS、JSONP、代理服务器）的优缺点及适用场景。4.请阐述微前端的架构设计思路，以及在实际项目中如何落地微前端方案。答案及解析一、单项选择题答案及解析1.D。解析：`var`声明的变量在全局作用域下会成为`window`的属性，`let`声明的变量不会；但`let`有块级作用域、不能重复声明，`var`有变量提升，`let`无变量提升（存在暂时性死区）。2.D。解析：`float`用于元素的左右浮动，无法实现垂直居中；其他选项均可通过Flex、Grid或定位+转换实现垂直居中。3.D。解析：Promise的状态包括`pending`（进行中）、`fulfilled`（已完成）、`rejected`（已拒绝），无`waiting`状态。4.B。解析：`mounted`在组件挂载完成后调用；`created`在实例创建后，`beforeMount`在挂载前，`updated`在更新后。5.B。解析：`useState`用于创建状态和更新状态的函数；`useEffect`处理副作用，`useMemo`缓存函数结果，`useRef`获取DOM节点。6.C。解析：403表示“禁止访问”；404表示“未找到资源”，500表示“服务器内部错误”，408表示“请求超时”。7.B。解析：`loader`用于处理非JS文件（如CSS、图片）；`plugin`用于扩展webpack功能（如打包优化、资源管理）。8.C。解析：`Promise.then`属于微任务；宏任务包括`setTimeout`、`script`执行、DOM渲染等。9.D。解析：`localStorage`是本地存储，与跨域无关；CORS、JSONP、代理服务器均为跨域方案。10.A。解析：联合类型用`|`连接（如`number|string`）；B是对象类型，C是元组类型，D是函数类型。二、填空题答案1.内联样式（`style`属性）、ID选择器、类选择器（或伪类/属性选择器）2.`Array.from`3.数据劫持（`Object.defineProperty`）、发布-订阅模式（或观察者模式）4.渲染（`render`）、提交（`commit`）（或“diff阶段”“更新阶段”）5.`Expires`、`Cache-Control`6.处理非JS模块（如转换CSS、图片等）、扩展webpack功能（如打包优化、资源管理）7.事件冒泡、父元素（或祖先元素/容器元素）8.`box-shadow`、`border-radius`9.`as`、`<类型>变量`（如`<string>value`）、`变量as类型`（如`valueasstring`）10.首屏加载时间（`FirstContentfulPaint`）、完全加载时间（或`LCP`/`FCP`等）三、判断题答案及解析1.×。解析：`let`无变量提升，存在暂时性死区；`var`有变量提升。2.√。解析：Flex适合一维（行/列）布局，Grid适合二维（行列）布局，二者均可实现复杂布局。3.√。解析：Promise状态一旦从`pending`变为`fulfilled`或`rejected`，则不可再变。4.√。解析：父子组件生命周期顺序为：父`created`→子`created`→父`beforeMount`→子`beforeMount`→子`mounted`→父`mounted`，因此父的`mounted`在子的`mounted`之后执行。5.√。解析：Hook必须在函数组件顶层调用，否则会导致状态管理错误。6.×。解析：GET和POST的区别不仅在于请求体（GET也可带请求体，但不推荐），还包括参数位置、缓存、安全性等。7.√。解析：`production`模式会自动开启代码压缩、TreeShaking、作用域提升等优化。8.√。解析：事件冒泡从目标元素向祖先元素传播（由内向外），事件捕获相反（由外向内）。9.√。解析：BFC可隔离内部元素，解决`margin`重叠、浮动元素导致的父元素高度塌陷等问题。10.×。解析：类型断言是“编译时提示”，不改变运行时类型；类型转换是“运行时改变类型”，二者概念不同。四、简答题答案（每题约200字）1.Vue的响应式原理：基于数据劫持和发布-订阅模式。通过`Object.defineProperty()`对数据对象的属性进行劫持，在`getter`中收集依赖（`Watcher`），在`setter`中触发依赖更新。数组则通过重写变异方法（如`push`、`splice`）触发更新。当数据变化时，通知所有订阅的`Watcher`，`Watcher`再触发视图更新，实现双向绑定的核心逻辑。2.ReactHook的使用场景及示例：Hook让函数组件拥有状态和生命周期能力。`useState`用于管理状态（如`const[count,setCount]=useState(0)`，`setCount`更新状态）；`useEffect`用于处理副作用（如组件挂载后请求数据、订阅事件，卸载时清理）。示例：```jsxuseEffect(()=>{fetchData();//挂载时请求数据return()=>{/卸载时清理订阅/};},[依赖项]);//依赖变化时重新执行```Hook还可用于缓存函数（`useMemo`）、获取DOM（`useRef`）等，提升函数组件的灵活性。3.前端性能优化方法：-资源优化：压缩CSS/JS/图片，使用CDN（内容分发网络）。-代码优化：减少重绘重排（如批量操作DOM）、事件委托（减少事件绑定）、懒加载（图片/路由懒加载）。-缓存优化：利用HTTP缓存（强缓存`Expires/Cache-Control`、协商缓存`ETag/Last-Modified`）、ServiceWorker缓存。-打包优化：webpack的TreeShaking（移除未使用代码）、代码分割（`splitChunks`）、懒加载（`import()`）。-首屏优化：服务端渲染（SSR）、预渲染，减少首屏JS体积。4.webpack配置优化方向及打包速度优化：-优化方向：打包速度（多线程编译、缓存）、打包体积（TreeShaking、代码分割）、兼容性（Babel配置）。-打包速度优化：使用`happypack`/`thread-loader`多线程编译；用`cache-loader`缓存loader结果；升级webpack至v4+（内置优化）；设置`mode:'production'`开启默认优化；减少不必要的loader（如仅在生产环境启用压缩）。五、讨论题答案（每题约200字）1.SPA的优缺点及优化：-优点：用户体验好（无刷新）、前后端分离、开发效率高。-缺点：首屏加载慢（需加载大量JS）、SEO差、缓存管理复杂。-优化：首屏优化（SSR/预渲染）、路由懒加载（`import()`分割代码）、缓存策略（HTTP缓存、ServiceWorker）、SEO优化（SSR生成静态页面，或使用Nuxt/Next.js）。2.前端工程化实践：-代码规范：用ESLint/Prettier规范代码，GitHooks（如husky）拦截不规范提交。-模块化：ES6Module/CommonJS，组件化开发（Vue/React组件）。-自动化构建：webpack/rollup打包，自动压缩、优化资源；CI/CD（Jenkins/GitLabCI）自动测试、部署。-测试：单元测试（Jest）、端到端测试