OA 选择题 · 即时判分

OA 里的选择题，先在这里练。

621 道原创 OA 风格选择题，覆盖 CS 基础（数据结构与算法、操作系统、数据库、网络、并发、面向对象、Linux 命令行、Git、计算机体系结构、Web 安全、设计模式、Web 前端、机器学习）、读代码（时间复杂度、Python、JavaScript、Java、C++、SQL、NumPy）和数学统计（概率、逻辑推理、统计）。读代码题里问输出的（复杂度题和标为未定义行为的除外），答案都是实际运行得出的。提交后立即判分并给出解析；答过的题按 1、3、7、21 天的间隔回来复习。CPU 调度、页面置换、TCP 和拥塞控制的计算题，可以用操作系统与网络模拟器逐步核对。

只显示：Web 前端 · 查看全部科目

30 道题

响应头 Cache-Control: no-cache 的含义是？
- 缓存一小时后再向服务器验证
- 完全不允许缓存
- 可以缓存，但每次使用前都要先向服务器验证是否过期
- 只允许浏览器缓存，CDN 不能缓存
资源响应头是 Cache-Control: max-age=3600。半小时后再次请求，浏览器会怎么做？
- 向服务器发条件请求，等 304
- 等一小时后再发请求
- 直接使用本地缓存，不联系服务器
- 重新下载完整的资源
浏览器带着 If-None-Match: "abc123" 请求资源，服务器上该资源的 ETag 仍是 "abc123"。服务器应该返回什么？
- 204 No Content
- 304 Not Modified，不带响应体
- 200 OK，并返回完整内容
- 412 Precondition Failed
构建后的文件名带内容哈希（如 app.3f9a1c.js），HTML 引用新文件名。这些 JS 文件最合适的缓存头是？
- Cache-Control: max-age=60
- Cache-Control: max-age=31536000, immutable
- Cache-Control: no-cache
- Cache-Control: no-store
返回用户个人资料的接口，响应头写 Cache-Control: private, max-age=60 表示什么？
- 内容是加密的，只有用户能看
- 只有用户自己的浏览器可以缓存 60 秒，CDN 等共享缓存不能存
- CDN 可以缓存 60 秒，浏览器不能缓存
- 60 秒内禁止访问该接口
关于 localStorage 和 sessionStorage，哪项正确？
- localStorage 默认 24 小时后过期
- localStorage 关掉浏览器后仍在；sessionStorage 属于单个标签页，标签页关闭就清除
- sessionStorage 在同源的所有标签页之间共享
- 两者都会随每次请求自动发给服务器
执行 localStorage.setItem("user", { id: 1 }) 之后，localStorage.getItem("user") 返回什么？
- 字符串 "[object Object]"
- null
- 对象 { id: 1 }
- 字符串 '{"id":1}'
Cookie 设置了 Secure 和 HttpOnly 两个属性，分别起什么作用？
- Secure：只通过 HTTPS 发送；HttpOnly：页面脚本无法读取
- Secure：内容被加密；HttpOnly：只在 HTTP（非 HTTPS）下发送
- Secure：不能跨站发送；HttpOnly：只能由服务器删除
- Secure：只能在本域名使用；HttpOnly：浏览器关闭即失效
在 www.example.com 上设置 Cookie 时没有写 Domain 属性。它会被发给 api.example.com 吗？
- 取决于 Path 属性
- 不会：没写 Domain 时是仅限当前主机（host-only）的 Cookie
- 会，但只有 GET 请求才带
- 会：Cookie 默认发给所有子域名
<body> 里有 <div>，<div> 里有 <button>，三者都用 addEventListener("click", …) 注册了处理函数（默认参数）。点击按钮时，处理函数的执行顺序是？
- button → div → body
- div → button → body
- body → div → button
- 只有 button 的处理函数会执行
在 <ul> 上做事件委托：ul.addEventListener("click", e => …)。用户点击了某个 <li> 里的 <span>，事件处理函数中 e.target 和 e.currentTarget 分别是？
- e.target 是 ul，e.currentTarget 是 span
- e.target 是 li，e.currentTarget 是 ul
- e.target 是 span，e.currentTarget 是 ul
- 两者都是 span
一个列表有上千项，而且会动态增减。用事件委托（在父元素上注册一个监听器）相比给每一项单独注册，主要好处是？
- 可以阻止事件冒泡到 document
- 事件会更早触发
- 子元素的默认行为会被自动取消
- 只需一个监听器，新增的项不用再绑定也能响应
在链接 <a href="/next"> 的点击处理函数里只调用了 e.stopPropagation()，会发生什么？
- 没有任何影响
- 链接不跳转，事件也不再冒泡
- 链接不跳转，但事件仍会冒泡
- 事件不再冒泡到父元素，但链接仍会跳转
父元素用 addEventListener("click", f, true) 注册，子元素用默认方式注册。点击子元素时谁先执行？
- 同时执行
- 父元素的 f 先执行（捕获阶段）
- 只有子元素的执行
- 子元素的先执行
一个 div 的样式是 width: 200px; padding: 20px; border: 5px solid; box-sizing: content-box。它在页面上占的总宽度（不含 margin）是？
- 200px
- 240px
- 250px
- 225px
上下相邻的两个块级元素，上面的 margin-bottom: 20px，下面的 margin-top: 30px。它们之间的垂直间距是？
- 25px
- 30px
- 20px
- 50px
鼠标正悬停在一个链接上，它同时匹配三条规则（都没有 !important）：#nav a { color: red }；.menu .item a { color: blue }；a:hover { color: green }。最终显示什么颜色？
- 取决于规则在文件里的先后顺序
- red
- green
- blue
元素的行内样式是 style="color: red"，样式表里有 p { color: blue !important; }。最终颜色是？
- 先加载的那条
- blue
- red
- 浏览器默认颜色
容器是 display: flex; flex-direction: column;，想让子元素在垂直方向上居中，应该用哪个属性？
- justify-content: center
- align-items: center
- vertical-align: middle
- text-align: center
flex 容器里三个子元素都写了 flex: 1，没有设置宽度。它们怎样分配宽度？
- 按各自内容的宽度比例分配
- 第一个占满，剩下两个宽度为 0
- 每个都是容器宽度的 100%，换成三行
- 平分容器宽度，因为 flex: 1 等于 flex-grow: 1、flex-shrink: 1、flex-basis: 0%
宽 300px 的容器设置 display: grid; grid-template-columns: 1fr 2fr;（没有 gap）。两列各宽多少？
- 300px 和 600px
- 1px 和 2px
- 100px 和 200px
- 150px 和 150px
容器 grid-template-columns: repeat(3, 1fr);，没有定义行，里面放了 7 个子元素。会形成几行？
- 2 行，第 7 个元素被隐藏
- 3 行，最后一行只有 1 个元素
- 7 行，每行一个
- 1 行，多出来的元素溢出
下面哪个样式修改会触发重排（reflow / layout），而不仅仅是重绘？
- 修改 background-color
- 修改 color
- 修改元素的 width
- 修改 visibility
在循环里对每个元素先写 el.style.width = …，紧接着读 el.offsetHeight，页面变得很卡。原因和改法是？
- 每次读取都强制浏览器同步重新布局（布局抖动）；先集中读取，再集中写入
- 循环本身太慢；改用 forEach
- style.width 只能在 CSS 文件里修改
- offsetHeight 会触发网络请求；改用缓存
做动画时，为什么推荐改 transform 和 opacity，而不是 left、top？
- transform 动画由服务器渲染
- transform 和 opacity 通常可以只在合成阶段完成，不触发布局和重绘
- opacity 会降低页面的内存占用
- left 和 top 在现代浏览器里已经不支持动画
关于关键渲染路径，下面哪项正确？
- CSS 文件是异步加载的，不影响首次渲染
- 图片下载完之前页面不会显示任何内容
- <head> 里的外部 CSS 会阻塞渲染：样式表加载完之前，浏览器不会绘制页面内容
- <script> 标签放在哪里对首屏没有影响
<script defer src="a.js"> 和 <script async src="b.js"> 的区别是？
- defer 会阻塞 HTML 解析，async 不会
- async 脚本会在 DOMContentLoaded 之后按顺序执行
- defer 在 HTML 解析完后按出现顺序执行；async 下载完立即执行，多个脚本之间顺序不确定
- 两者都在下载完后立即执行
要一个可点击的按钮，下面哪种写法最好？
- <button type="button">保存</button>
- <span class="btn" onclick="save()">保存</span>
- <div role="button" onclick="save()">保存</div>
- <div onclick="save()">保存</div>
一个只有关闭图标（×，用 SVG 画的）、没有文字的按钮，怎样让读屏器用户知道它是做什么的？
- 给按钮加 aria-hidden="true"
- 给按钮加 title 属性就足够了，其他什么都不用做
- 给 SVG 加 role="button"
- 给按钮加 aria-label="关闭"
表单保存成功后，页面上出现「已保存」的提示。想让读屏器自动读出它，又不打断用户正在听的内容，应该怎么做？
- 给提示加 aria-hidden="true"
- 用 alert() 弹窗显示
- 把提示放进 aria-live="assertive" 的容器里
- 把提示放进带 aria-live="polite"（或 role="status"）的容器里