面试题#

自我介绍
移动端做过哪些优化？
- 图片懒加载，减少不必要的图片加载。
- CSS 动画的硬件加速（使用 transform 和 opacity）。
- 合理使用缓存，减少网络请求。
- 使用 requestIdleCallback 来优化空闲时间的性能。
- 减少重绘和回流，避免频繁的 DOM 操作。
隐藏一个元素有哪些方法？有什么不同？
- display: none;：完全从页面中移除，页面布局会重新计算。
- visibility: hidden;：元素不可见，但仍占据空间。
- opacity: 0;：元素不可见，仍占据空间且可接收事件。
- position: absolute; left: -9999px;：将元素移出视口，不占据正常布局空间。
Sass是什么？和CSS比有什么优势？Sass是怎么编译成CSS的？
- Sass 是一个 CSS 预处理器，增加了变量、嵌套、混合等功能。
- 优势：
  - 支持变量，减少重复代码。
  - 支持嵌套，提升代码可读性。
  - 支持继承，避免冗余样式。
- 编译过程：Sass 文件通过 Sass 编译器（如 node-sass）转化为标准的 CSS 文件。
JS 是一门怎么样的语言？
- JS 是一门解释型的、基于事件驱动、非阻塞 I/O 的编程语言，广泛应用于 Web 开发，支持面向对象编程、函数式编程等。
说一下对闭包的理解
- 闭包是函数和声明该函数的词法作用域的组合。它使得函数能够记住并访问创建时的作用域，即使函数在外部被调用时，仍能访问到函数内的变量。
一个闭包的输出题
这里需要具体题目才能解答。
说一下异步编程有哪些解决方案
- 回调函数
- Promise
- Async/Await
- 事件驱动编程（Node.js 中的事件循环）
Promise.all 的实现口述，reject 的错误是什么
- Promise.all 会将多个 promise 按照给定顺序执行，返回一个新的 promise。
- 如果所有 promise 都成功，则返回结果数组；如果任何一个 promise 被拒绝，则直接 reject 并返回第一个错误。
浏览器打开一个 tab 的有哪些进程

浏览器主进程（负责 UI 渲染和管理浏览器的状态）
渲染进程（每个标签页会有一个渲染进程，用来渲染网页内容）
网络进程（负责 HTTP 请求和响应）
GPU 进程（用于图形渲染）

HTTP 的请求方法有哪些，详细讲一下

GET：请求资源，不带请求体。
POST：提交数据，通常带有请求体。
PUT：更新资源，带有请求体。
DELETE：删除资源。
PATCH：部分更新资源。
OPTIONS：查询支持的 HTTP 方法。

常见的状态码

200：请求成功。
301：永久重定向。
404：未找到资源。
500：服务器错误。

HTTP 有哪些版本，各有什么特性，HTTP2.0 的头部压缩怎么实现的

HTTP/1.x：每次请求和响应都建立独立连接。
HTTP/2：支持多路复用，减少延迟，头部压缩（使用 HPACK 编码）。

讲一下 HTTPS SSL 证书是怎么验证的

SSL 证书通过公钥和私钥对实现加密通信，浏览器验证证书的有效性（颁发机构、有效期、域名匹配）。

说一下 CDN 的作用和原理

CDN（内容分发网络）通过在全球布置多个缓存节点，将静态资源缓存到离用户更近的地方，提升加载速度和减轻服务器负担。

浏览器安全怎么保证的（记不清了，好像只说了一个密码加密），网络攻击有哪些，服务区攻击缓存

安全保障：加密传输（如 HTTPS）、跨域资源共享（CORS）、内容安全策略（CSP）等。
网络攻击：常见攻击包括 DDoS、SQL 注入、XSS、CSRF 等。
服务端缓存攻击：攻击者通过滥用缓存或缓存泄露来绕过安全控制。

用过哪些框架，为什么选择 React

用过 Vue、Angular 等，选择 React 因为它的组件化、单向数据流和灵活性，适用于构建大型应用。

讲一下 React（直接说 React 架构和 React 设计原理）

React 是一个声明式的、组件化的 JavaScript 库，用于构建 UI。
其核心概念包括：虚拟 DOM、组件生命周期、状态管理和 JSX。

React 16 中的时间切片是怎么实现的（requestIdleCallback），时间切片怎么存储的

React 16 引入时间切片以优化性能。利用 requestIdleCallback 在浏览器空闲时分配任务，时间切片通过调度器实现，存储为队列。

useState 怎么保证上个状态的

useState 是异步更新的，React 会合并更新队列，确保状态更新基于上一个状态。

hooks 使用有哪些限制

只能在函数组件或自定义 Hook 中使用。
不能在循环、条件语句中使用。

useMemo 和 useCallback 区别

useMemo 用于缓存计算结果，避免不必要的重复计算。
useCallback 用于缓存函数，避免在每次渲染时重新创建函数。

React 项目做过哪些优化

代码拆分，懒加载。
组件优化，使用 React.memo 和 useMemo。
路由懒加载。
性能监控与调试工具（如 React Profiler）。

SSR 的原理和优点，SSR 造成服务器压力怎么解决（讲了一下 RSC）

SSR（服务端渲染）是将 HTML 页面在服务器端渲染好，直接返回给客户端，提升 SEO 和首屏加载速度。
解决服务器压力可以使用静态生成（Static Generation）或增量静态再生（ISR）。

手撕题：给一个递增数组 [0,1,2,4,5,7,11,13,14] 输出成 ['0->2','4->5','7','11','13->14']

const arr = [0,1,2,4,5,7,11,13,14];
const result = [];
let start = arr[0];
for (let i = 1; i <= arr.length; i++) {
  if (arr[i] !== arr[i - 1] + 1) {
    if (start === arr[i - 1]) {
      result.push(`${start}`);
    } else {
      result.push(`${start}->${arr[i - 1]}`);
    }
    if (i < arr.length) start = arr[i];
  }
}
console.log(result);  // ['0->2', '4->5', '7', '11', '13->14']

反问#

部门作息
部门是做 toB 还是 toC？
有没有需要提升的地方？