mm 2026笔试-前端开发 - lingの知识库

CSS 相关

题目 1：容器宽度自适应与限制

题干： 设置一个容器，使其宽度占屏幕宽度的 80%，但最大宽度不超过 500px，以下哪个 CSS 写法是正确的？

选项：

A. width: 80%;
B. width: 80vw;
C. width: 80%; max-width: 500px;
D. width: calc(80% - 500px);

答案： C ✅

解析：

选项	说明
A	仅设置 80% 宽度，无最大宽度限制，不符合 "最大不超过 500px" 的要求
B	80vw 是视口宽度的 80%，同样无最大宽度限制
C	`width: 80%` 控制基础宽度，`max-width: 500px` 限制最大宽度，完全符合需求
D	`calc(80% - 500px)` 计算逻辑错误，无法实现目标效果

题目 2：CSS Grid 响应式列表布局

题干： 实现一个书籍列表布局，要求每行最多显示 4 本书，当屏幕宽度变窄时，列数自动减少为 2 本，以下哪个 CSS 写法最符合需求？

选项：

A. grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))
B. grid-template-columns: repeat(4, 1fr)
C. grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
D. grid-template-columns: 1fr 1fr 1fr 1fr

答案： C ✅

解析：

选项	说明
A	auto-fill 会创建尽可能多的列，但不会折叠空列，窄屏可能出现空白列
B/D	固定 4 列，无法自适应调整列数
C	auto-fit 自动适配列数并折叠空列，minmax(200px, 1fr) 控制列宽范围（最小 200px，最大均分空间），符合响应式需求

题目 3：CSS 样式优先级

题干： 以下 HTML 元素最终显示的文字颜色是什么？

<div id="one" class="two" style="color:red">我是什么颜色</div>

选项：

A. yellow
B. green
C. pink
D. red

答案： 红色 ✅

解析： CSS 样式优先级从高到低：行内样式（style=""）> ID 选择器（#one）> 类选择器（.two）> 标签选择器（div）。行内样式 color:red 优先级最高，因此文字为红色。

题目 4：大屏数据可视化布局重构

题干： 重构大屏数据可视化页面，要求左侧导航可折叠、右侧图表区域保持 16:9 宽高比、多端自适应（PC / 平板 / 大屏），且解决折叠时图表抖动、高分屏下元素溢出的问题，以下哪种方案最优？

选项：

A. 使用 Flexbox 嵌套布局，通过 calc() 动态计算尺寸，用 transition 实现折叠动画
B. 组合使用 Grid 布局定义宏观结构，Flexbox 处理局部对齐，通过 CSS 自定义属性维护比例系统，应用容器查询和视窗单位进行响应式适配
C. 采用 CSS Grid 定义布局模板，结合 aspect-ratio 属性控制图表区域，使用 CSS 容器查询处理多端适配
D. 使用 JavaScript 监听 resize 事件动态计算尺寸，通过 transform 缩放整个画布，利用 will-change 优化动画性能

答案： B ✅

解析：

选项	说明
A	Flexbox 适合一维布局，难以统一管理比例系统，无法解决复杂适配问题
B	Grid 管宏观布局、Flexbox 管局部对齐、CSS 自定义属性统一比例、容器查询 / 视窗单位适配多端，是最优组合
C	仅 Grid + aspect-ratio 缺乏局部对齐和比例统一管理
D	JS 动态计算增加性能开销，transform 缩放易导致图表模糊

Vue 相关

题目 1：Vue watch 配置项

题干： 关于 Vue 中 watch 的 immediate 和 deep 属性，以下说法错误的是？

选项：

A. immediate 属性表示在 watch 首次绑定数据时，是否执行 handler 方法
B. immediate 值为 false 时，表示在 watch 声明时就立即执行 handler 方法
C. immediate 值为 true 时，表示在数据发生变化时才执行 handler 方法
D. deep 属性表示进行深度监听，目的是为了发现对象内部值的变化，复杂类型的数据时使用

答案： B、C ✅（错误选项）

解析：

选项	说明
A	正确，immediate: true 初始化时立即执行 handler
B	错误，immediate: false 是默认值，仅数据变化时执行 handler
C	错误，immediate: true 初始化时执行一次，数据变化时也执行
D	正确，deep: true 用于监听对象 / 数组内部属性变化

题目 2：Vue 动态样式绑定（表单按钮）

题干： 表单验证场景中，当所有字段验证通过（formValid 为 true）时，提交按钮背景色为绿色，否则为灰色，以下哪个写法正确？

选项：

A. v-bind:style="{ backgroundColor: formValid ? 'green' : 'gray' }"
B. v-if="formValid" style="background-color: green"
C. v-model="formValid" style="background-color: green"
D. v-for="formValid" style="background-color: green"

答案： A ✅

解析：

选项	说明
A	动态绑定 style，通过三元表达式根据 formValid 切换背景色，符合需求
B	v-if 控制元素渲染，而非样式，formValid 为 false 时按钮会被移除
C	v-model 用于表单双向绑定，无法控制样式
D	v-for 用于循环渲染，与样式无关

题目 3：Vue 3 服务端渲染（SSR）性能优化

题干： 高流量促销活动场景下，Vue 3 SSR 页面出现服务器过载、首屏渲染延迟的问题，以下哪种优化策略最优？

选项：

A. 流式渲染（renderToStream）+ Transfer-Encoding: chunked
B. 异步组件加载 + 客户端 hydration 重试机制
C. renderToString + 服务器端内存缓存
D. 静态站点生成（SSG）+ 托管到 CDN

答案： C ✅

解析：

选项	说明
A	流式渲染优化传输过程，未解决服务器过载问题
B	客户端优化，对服务器性能无帮助
C	缓存完整 HTML 响应，避免重复渲染，大幅降低服务器 CPU / 内存消耗，适配高流量场景
D	SSG 适合静态内容，促销页面多为动态数据（价格 / 库存），灵活性不足

题目 4：Vue 高频事件优化（mousemove）

题干： Vue 组件中绑定高频 mousemove 事件导致 UI 卡顿，以下哪种方案能最小化性能开销并保证状态同步？

选项：

A. 通过 provide/inject 定义事件总线，子组件触发自定义事件
B. 在组件模板中使用 @mousemove.passive 修饰符绑定处理函数，结合防抖逻辑
C. 为每个目标元素添加独立的 @mousemove 监听器，并在处理函数内调用 event.stopPropagation()
D. 在 setup() 中使用 window.addEventListener 绑定事件，在 onUnmounted 中移除监听器，并利用 requestAnimationFrame 节流

答案： D ✅

解析：

选项	说明
A	事件总线仅解决通信问题，无性能优化作用
B	passive 适配滚动事件，对 mousemove 无效，且未结合 requestAnimationFrame 优化渲染时机
C	多监听器增加内存占用，stopPropagation 仅阻止冒泡，无性能优化作用
D	卸载时移除监听器避免内存泄漏，requestAnimationFrame 节流控制触发频率，减少重绘开销

TypeScript 相关

题目 1：TypeScript 类型推断规则

题干： 以下哪个不是 TypeScript 的类型推断规则？

选项：

A. 如果初始化时没有类型和赋值，推断为 any 类型
B. 如果初始化时有赋值但没有类型，推断为该值的类型
C. 如果是在大多数分支中推断出的类型，就使用那个类型
D. 如果初始化时有类型但没有赋值，推断为 unknown 类型

答案： C ✅（错误选项）

解析：

A/B/D：均为 TypeScript 核心类型推断规则
C：TypeScript 会根据所有分支计算联合类型，而非 "大多数分支" 的类型，因此该说法错误

JavaScript 基础与 DOM 操作

题目 1：fetch API 获取 JSON 数据

题干： 使用 fetch API 从 https://api.example.com/users 获取用户数据，并打印 JSON 格式的结果到控制台，以下哪个写法正确？

选项：

A. fetch('https://api.example.com/users').then(data => console.log(data))
B. fetch('https://api.example.com/users').then(response => response.json()).then(data => console.log(data))
C. fetch('https://api.example.com/users').then(response => console.log(response))
D. console.log(fetch('https://api.example.com/users'))

答案： B ✅

解析：

选项	说明
A	fetch 返回 Response 对象，未解析为 JSON，打印的是响应对象而非数据
B	response.json() 将响应体解析为 JSON，第二个 then 接收并打印数据，符合需求
C	打印 Response 对象，非 JSON 数据
D	打印 Promise 对象，无法获取实际数据

题目 2：为对象添加独立方法（音乐播放器）

题干： 音乐播放器项目中，每首歌曲对象共享原型方法 play，需为某一首歌曲单独添加 pause 方法（不影响其他歌曲），以下哪种方式正确？

选项：

A. 修改原型链中的原型对象
B. 直接为该歌曲对象添加 pause 方法
C. 使用 Object.setPrototypeOf() 方法
D. 使用 class 关键字并继承歌曲类

答案： B ✅

解析：

选项	说明
A	修改原型会让所有歌曲对象继承 pause 方法，不符合 "仅某一首" 的需求
B	直接给单个对象添加方法，仅作用于该对象，无副作用
C	setPrototypeOf 修改原型，影响其他对象
D	继承类需实例化新对象，无法给已有对象添加方法

题目 3：高频 DOM 更新性能优化

题干： 实时监控系统中，每秒需更新 5000+ DOM 元素，导致频繁样式计算和布局抖动，以下哪种方案最优？

选项：

A. 使用 document.createElement 逐个创建元素后直接追加到容器，通过 will-change: transform 强制提升图层
B. 将容器设为 display: none 后通过 innerHTML 全量替换，操作完成再恢复显示
C. 创建离屏 Canvas 进行数据绘制，通过位图快照替换 DOM 内容，同时维护隐藏的 DOM 副本
D. 采用文档碎片（document.createDocumentFragment）批量构建节点，使用 requestPostAnimationFrame 控制插入时机

答案： D ✅

解析：

选项	说明
A	逐个追加触发多次重排，性能差
B	display: none 恢复时一次性大规模重排，仍会卡顿，且丢失元素状态
C	Canvas 不适合交互场景，隐藏 DOM 副本增加内存占用
D	文档碎片批量构建节点（一次重排），requestPostAnimationFrame 控制渲染时机，避免布局抖动

题目 4：新闻网站异步加载更多

题干： 开发新闻网站时，需实现 "点击加载更多" 功能，要求不刷新页面加载新内容，以下哪种方案最合适？

选项：

A. 预加载所有新闻并设置为 display: none，点击按钮切换为 display: block
B. 使用分页技术和静态页面，点击按钮导航到新页面
C. 使用 JavaScript 和 Fetch API 监听按钮点击，异步请求下一批新闻并添加到当前列表
D. 使用 <iframe> 加载新的新闻页面

答案： C ✅

解析：

选项	说明
A	预加载所有新闻导致初始加载慢，浪费带宽
B	导航到新页面触发全页刷新，不符合需求
C	AJAX 异步请求 + 追加内容，实现无刷新加载，是标准方案
D	`<iframe>` 体验差，不利于 SEO 和性能优化

性能优化相关

题目 1：高并发实时金融数据处理

题干： 金融监控系统需处理高并发实时数据流，保证数据实时性、渲染性能和代码可维护性，以下哪些方案正确？

选项：

A. 使用 WebSocket 进行数据推送，结合 Redux 实现状态管理，并使用 memoization 技术优化渲染性能
B. 使用 AJAX 定时轮询数据，结合 Vue 的响应式机制，确保每次数据更新都直接触发 UI 更新
C. 使用 Service Worker 进行数据缓存，结合自定义事件进行数据更新，并在每次更新时重绘整个 UI
D. 使用 GraphQL 订阅进行数据推送，结合高阶函数封装数据处理逻辑，同时利用虚拟 DOM 减少重绘次数

答案： A、D ✅

解析：

选项	说明
A	WebSocket 实时推送 + Redux 状态管理 + 记忆化优化渲染，符合需求
B	AJAX 轮询延迟高、服务器压力大，每次更新触发 UI 导致频繁重绘
C	Service Worker 适合离线缓存，全量重绘性能差
D	GraphQL 订阅按需推送 + 高阶函数封装逻辑 + 虚拟 DOM 减少重绘，符合需求

数据处理相关

题目 1：学生成绩统计

题干： 给定学生成绩数组，计算 classOne 为 true 的学生的语文 + 数学总分。

输入：

const studentList = [
  { id: 5, name: "Alex", chineseScore: 98, mathScore: 56, classOne: true },
  { id: 82, name: "Bob", chineseScore: 73, mathScore: 99, classOne: true },
  { id: 22, name: "Cindy", chineseScore: 20, mathScore: 59, classOne: false }
];

要求： 使用 JavaScript 内置方法实现。

答案：

// 筛选 + 累加
const totalScore = studentList
  .filter(student => student.classOne) // 筛选一班学生
  .reduce((sum, student) => sum + student.chineseScore + student.mathScore, 0); // 累加总分

console.log(totalScore); // 输出：326

解析：

filter：过滤出 classOne: true 的学生
reduce：遍历筛选结果，累加语文和数学成绩，初始值为 0

题目 2：购物车商品归类

题干： 给定购物车数组，将同名商品归类到同一数组中（以商品名称为键）。

输入：

const shoppingCart = [
  {name: 'Apple', price: 1.99, quantity: 3},
  {name: 'Apple', price: 1.99, quantity: 3},
  {name: 'Xiomi', price: 2.99, quantity: 2},
  {name: 'Samsung', price: 3.99, quantity: 1},
  {name: 'Tesla', price: 3.99, quantity: 1},
  {name: 'Tesla', price: 4.99, quantity: 4},
  {name: 'Nokia', price: 4.99, quantity: 4}
];

要求： 使用 reduce 实现归类。

答案：

const groupedCart = shoppingCart.reduce((result, item) => {
  // 若当前商品名称未在结果中，初始化空数组
  if (!result[item.name]) {
    result[item.name] = [];
  }
  // 将当前商品添加到对应数组
  result[item.name].push(item);
  return result;
}, {}); // 初始值为空对象

console.log(groupedCart);

输出：

{
  Apple: [ {name: 'Apple', price: 1.99, quantity: 3}, {name: 'Apple', price: 1.99, quantity: 3} ],
  Xiomi: [ {name: 'Xiomi', price: 2.99, quantity: 2} ],
  Samsung: [ {name: 'Samsung', price: 3.99, quantity: 1} ],
  Tesla: [ {name: 'Tesla', price: 3.99, quantity: 1}, {name: 'Tesla', price: 4.99, quantity: 4} ],
  Nokia: [ {name: 'Nokia', price: 4.99, quantity: 4} ]
}

解析： reduce 遍历数组，以商品名称为键构建对象，将同名商品收集到对应数组中，实现归类。