📚 八股

1. 自我介绍

• 简要介绍了个人的背景、技术栈、项目经历。

2. 移动端做过哪些优化？

• 优化了应用的启动速度、内存使用和性能问题，使用了懒加载、图片懒加载、按需加载等技术来减少页面渲染时间。
• 针对不同设备做了适配优化，使用了响应式设计和媒体查询。

3. 隐藏一个元素有哪些方法？有什么不同？

• display: none：元素完全从文档流中移除，不占据空间。
• visibility: hidden：元素仍占据空间，只是不可见。
• opacity: 0：元素不可见，但仍占据空间并可交互。
• position: absolute; left: -9999px：将元素移出视口，仍然占据空间。

4. Sass 是什么？和 CSS 比有什么优势？Sass 是怎么编译成 CSS 的？

• Sass 是一种 CSS 预处理器，提供了变量、嵌套规则、混合宏等功能，使得 CSS 更加灵活和模块化。
• 与传统 CSS 相比，Sass 更具可维护性和可扩展性。Sass 编译成 CSS 是通过 Sass 编译器，将 .scss 或 .sass 文件转换成标准的 .css 文件。

5. JS 是一门怎么样的语言？

• JavaScript 是一门动态类型、基于原型的脚本语言，主要用于客户端脚本和前端开发。支持事件驱动、异步编程和闭包等特性。

6. 说一下对闭包的理解

• 闭包是 JavaScript 中的一个重要概念，指的是一个函数和它的词法作用域的组合。闭包可以让函数访问外部函数的变量，即使外部函数已经执行完毕。

7. 一个闭包的输出题（搞忘了）

8. 说一下异步编程有哪些解决方案

• 回调函数：传统的异步解决方案，但容易出现回调地狱。
• Promise：改进了回调函数的使用，支持链式调用，解决回调地狱问题。
• async/await：基于 Promise 的语法糖，使异步代码更加简洁易读。

9. Promise.all 的实现口述，reject 的错误是什么

• Promise.all 会并行执行多个 Promise，当所有 Promise 都成功时，返回一个包含所有结果的数组；如果有任何一个 Promise 被拒绝，Promise.all 会立即返回失败，并带有拒绝的错误信息。

10. 浏览器打开一个 tab 的有哪些进程？

• 浏览器进程、渲染进程、GPU 进程、插件进程等，每个进程独立运行以保证稳定性和性能。

11. HTTP 的请求方法有哪些？详细讲一下

• GET：请求指定资源。
• POST：向指定资源提交数据。
• PUT：更新指定资源。
• DELETE：删除指定资源。
• PATCH：部分更新指定资源。

12. 常见的状态码

• 200 OK：请求成功。
• 301 Moved Permanently：永久重定向。
• 404 Not Found：资源未找到。
• 500 Internal Server Error：服务器内部错误。

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

• HTTP/1.0：每个请求都需要建立一个新的连接。
• HTTP/1.1：支持持久连接，减少了建立连接的次数。
• HTTP/2：支持 multiplexing（多路复用），允许多个请求和响应通过同一个 TCP 连接传输。头部压缩通过 HPACK 算法实现。

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

• SSL 证书通过公钥和私钥进行加密与解密，确保数据传输的安全性。证书由受信任的证书颁发机构（CA）签发，并且包含网站的公钥。

15. 说一下 CDN 的作用和原理

• CDN（内容分发网络）通过将静态资源缓存到离用户更近的服务器上，加速资源的加载时间。它通过负载均衡、缓存策略和智能路由等方式提高网站性能和稳定性。

16. 浏览器安全怎么保证的？网络攻击有哪些？服务区攻击缓存

• 浏览器安全主要通过 CSP（内容安全策略）、同源策略和 HTTPS 等方式保障。常见的网络攻击有 XSS（跨站脚本攻击）、CSRF（跨站请求伪造）、DDoS（分布式拒绝服务攻击）等。

17. 用过哪些框架？为什么选择 React？

• 介绍了常用的前端框架，如 Vue、Angular，并解释了选择 React 的原因，主要是因为 React 提供了虚拟 DOM 和组件化的开发模式。

18. 讲一下 React（直接说 React 架构了 React 设计原理里面的）

• React 的设计原理基于声明式编程、虚拟 DOM、单向数据流等，构建组件化的 UI，提升开发效率。

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

• React 16 引入了时间切片（Time Slicing），使得渲染过程能够被拆分成多个小任务，通过 requestIdleCallback 等 API 来在空闲时间段执行渲染，避免卡顿。

20. useState 怎么保证上个状态的？

• useState 会返回一个函数，用来更新状态。React 会合并上一个状态和新的状态，确保状态更新过程的正确性。

21. Hooks 使用有哪些限制？

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

22. useMemo 和 useCallback 区别

• useMemo 用于缓存计算结果，避免重复计算；useCallback 用于缓存函数实例，避免函数引用发生变化。

23. React 项目做过哪些优化？

• 优化了性能、代码分割、懒加载和虚拟列表等，减少了页面加载时间和渲染时间。

24. SSR 的原理和优点，SSR 造成服务器压力怎么解决？

• SSR（服务器端渲染）可以加速首屏渲染，提高 SEO，解决了客户端渲染的性能瓶颈。通过使用 RSC（React Server Components）等技术，减少服务器压力。

🖊️ 手撕

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

function compressRange(arr) {
  let result = [];
  let start = arr[0], end = arr[0];

  for (let i = 1; i < arr.length; i++) {
    if (arr[i] === end + 1) {
      end = arr[i];
    } else {
      if (start === end) {
        result.push(`${start}`);
      } else {
        result.push(`${start}->${end}`);
      }
      start = arr[i];
      end = arr[i];
    }
  }

  if (start === end) {
    result.push(`${start}`);
  } else {
    result.push(`${start}->${end}`);
  }

  return result;
}

console.log(compressRange([0, 1, 2, 4, 5, 7, 11, 13, 14]));