钉子的生活日记
文章目录

美团暑期前端一面面经整理笔记（六）

1. js == 和 === 的区别

答案

这题核心是“输入防抖 + 请求竞态处理 + 联想列表展示”。

  1. 输入变化后做防抖，避免每次键入都发请求。
  2. 请求返回时要处理乱序问题，避免旧请求覆盖新结果。
  3. 列表项点击后要正确回填输入框，并处理空状态和 loading 态。

2. js 数据类型，区别

答案

JavaScript 数据类型可以分成基本类型和引用类型。

  1. 基本类型包括 number、string、boolean、null、undefined、symbol、bigint。
  2. 引用类型包括对象、数组、函数等。
  3. 基本类型按值存储，引用类型变量里保存的是对象引用。

3. symbol 是什么，应用场景

答案

Symbol 是一种唯一且不可变的基本类型，通常用来避免对象属性名冲突。

  1. 可以作为对象的唯一 key。
  2. 常用于框架内部保留字段和元编程协议，比如 Symbol.iterator。

4. 防抖，如何实现，应用场景

答案

防抖和定时器题的关键是“控制触发频率”和“避免时间漂移”。

  1. 防抖适合输入框联想、搜索建议；节流适合滚动、拖拽。
  2. 轮询或倒计时更推荐递归 setTimeout，因为比 setInterval 更容易控制节奏，避免任务堆积。
  3. 倒计时展示时最好以真实时间戳为准，而不是单纯每次减一。

5. 轮询请求怎么做，setTimeout 还是 setInterval，为什么

答案

防抖和定时器题的关键是“控制触发频率”和“避免时间漂移”。

  1. 防抖适合输入框联想、搜索建议；节流适合滚动、拖拽。
  2. 轮询或倒计时更推荐递归 setTimeout，因为比 setInterval 更容易控制节奏，避免任务堆积。
  3. 倒计时展示时最好以真实时间戳为准，而不是单纯每次减一。

6. 输入 URL 发生什么

答案

从输入 URL 到页面展示，主线一般是：

  1. URL 解析，判断协议和资源地址。
  2. DNS 解析拿到 IP。
  3. 建立 TCP 连接；如果是 HTTPS，还会进行 TLS 握手。
  4. 浏览器发起 HTTP 请求，服务端返回 HTML。
  5. 浏览器解析 HTML 构建 DOM，解析 CSS 构建 CSSOM。
  6. 如果遇到同步脚本，可能会阻塞解析并执行 JS。
  7. DOM 和 CSSOM 合成渲染树，随后做布局、绘制、合成显示。
  8. 页面加载后，还可能继续执行异步请求、图片加载和事件绑定。

7. HTTP 和 HTTPS

答案

HTTPS = HTTP + TLS，核心作用是身份认证、数据加密和完整性校验。

  1. HTTP 明文传输，容易被窃听和篡改；HTTPS 通过证书和加密建立安全连接。
  2. 证书无效常见原因有：过期、域名不匹配、证书链不完整。
  3. SSL/TLS 证书过期后，浏览器无法继续信任服务端身份，所以连接会被警告甚至拦截。

8. 为什么证书能保证安全，对非对称加密的理解

答案

HTTPS = HTTP + TLS，核心作用是身份认证、数据加密和完整性校验。

  1. HTTP 明文传输，容易被窃听和篡改；HTTPS 通过证书和加密建立安全连接。
  2. 证书无效常见原因有：过期、域名不匹配、证书链不完整。
  3. SSL/TLS 证书过期后，浏览器无法继续信任服务端身份，所以连接会被警告甚至拦截。

9. script 标签属性

答案

常见的 script 相关属性要重点区分 async 和 defer。

  1. async：脚本并行下载，下载完成后立即执行，顺序不保证。
  2. defer：脚本并行下载，等 HTML 解析完成后按顺序执行。
  3. type="module" 会把脚本按模块方式加载，天然支持 import/export。

10. 对跨域的理解

答案

浏览器安全策略最核心的是同源策略，它限制不同源脚本随意读取彼此资源。

  1. 跨域常见解决方案是 CORS、反向代理、JSONP（仅限 GET）。
  2. 另外还有 CSP、XSS 防护、CSRF 防护、沙箱 iframe 等安全机制。
  3. 面试里最好补一句：前端只是一层防线，真正的数据权限还是要靠后端控制。

11. 项目中 CSS 怎么命名，CSS 结构是怎么维护的

答案

CSS 命名和维护重点是“可读、可扩展、可避免冲突”。

  1. 常见会用 BEM、模块化 CSS、组件级样式目录。
  2. 样式通常按页面、组件、主题、公共变量分层组织。
  3. 团队里最好统一命名规范和样式边界，不要全局随意污染。

12. 日夜模式切换怎么实现

答案

日夜模式切换常见做法是 CSS 变量配合主题标记。

  1. 把颜色抽成变量。
  2. 通过 class 或 data-theme 切换变量值。
  3. 主题状态可以持久化到 LocalStorage。

13. CSS display 属性有哪些

答案

常见的 display 有：

  1. block
  2. inline
  3. inline-block
  4. flex
  5. grid
  6. none
  7. table 等

面试里重点是知道它们对布局参与方式的影响。

14. SSE 和 socket 区别

答案

SSE 是服务端单向推送，WebSocket 是全双工通信。

  1. SSE 基于 HTTP，更适合通知流、日志流、AI 文本流。
  2. WebSocket 更适合聊天、协同编辑、实时互动。
  3. 两者没有绝对优劣，关键看场景。

15. 在什么场景下 AI 不好，怎么优化

答案

AI 不擅长的场景通常是上下文不足、规则复杂、风险高或强业务约束的场景。

  1. 比如复杂业务建模、线上紧急故障、需要强一致性判断的逻辑。
  2. 优化方式是补充上下文、明确约束、缩小任务范围，并加强人工 review。

16. 同步异步输出顺序

答案

事件循环的主线是：执行一轮宏任务，然后清空微任务队列，必要时进行渲染，再进入下一轮。

  1. 常见宏任务：setTimeout、setInterval、I/O、UI 事件。
  2. 常见微任务：Promise.then、queueMicrotask、MutationObserver。
  3. 所以输出顺序题一般先看同步代码，再看微任务，最后看下一轮宏任务。

17. 带联想列表的防抖输入框

答案

防抖和定时器题的关键是“控制触发频率”和“避免时间漂移”。

  1. 防抖适合输入框联想、搜索建议；节流适合滚动、拖拽。
  2. 轮询或倒计时更推荐递归 setTimeout，因为比 setInterval 更容易控制节奏，避免任务堆积。
  3. 倒计时展示时最好以真实时间戳为准，而不是单纯每次减一。