字节跳动-抖音直播-前端一面
📚 八股
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]));