哔哩哔哩-大会员中心-前端一面
📖 八股
1. 个人介绍
- 简要介绍个人背景、教育经历、实习经历以及相关的技术栈。
2. 讲一下 History 路由和 Hash 路由
- History 路由：基于 HTML5 的
history.pushState和history.replaceState，支持更灵活的 URL 路由控制，且没有#号，URL 更简洁。 - Hash 路由：基于 URL 中的
#符号，浏览器通过监听hashchange事件来进行路由跳转，兼容性好但 URL 有#，不够美观。
3. 讲一下 TS？TS 和 JS 的区别
- TypeScript：是 JavaScript 的超集，增加了静态类型检查，支持类型推导、接口、类等特性，帮助开发者减少错误。
- TS 和 JS 的区别：TS 支持静态类型，编译时检查类型，JS 是动态类型语言，编写时没有类型检查，运行时才会检查。
4. 开发时候埋点流程（实习时候的）
- 在前端代码中加入埋点代码，收集用户行为数据。
- 使用工具如 Google Analytics、手动记录事件等，收集页面访问、点击事件、用户行为等数据。
5. Lottie Web 怎么封装的 和普通动画的区别
- Lottie 是基于 JSON 格式的动画，可以通过 JavaScript 加载和控制，具有更高的性能。
- 与普通 CSS 或 JavaScript 动画相比，Lottie 动画的优点在于流畅性、轻量性，且支持矢量动画，不会因为尺寸变化而失真。
6. 开发时候做过哪些优化
- 前端优化包括懒加载、按需加载、图片懒加载、缓存策略、减少重绘重排、代码分割、使用 Web Worker、减少 DOM 操作等。
7. 刮卡效果怎么做的（Canvas）
- 使用 HTML5 的
<canvas>元素，通过 JavaScript 绘制遮罩层，并监听鼠标事件来模拟刮卡的效果，实时更新被刮开的部分。
8. 开发时候有没有遇到过性能问题
- 遇到过页面加载缓慢、滚动卡顿等问题。通过使用 Chrome DevTools 进行性能分析，优化图片大小、懒加载、减少 DOM 更新等方式来解决。
9. React 做过哪些优化
- 优化了 React 的渲染性能，使用 React.memo、shouldComponentUpdate、useMemo、useCallback 等，避免不必要的组件重新渲染。
10. HTML 怎么做优化
- 优化 HTML 结构，减少冗余标签，确保语义化，使用合适的标签，避免过多的 DOM 节点。
11. 事件循环机制
- JavaScript 的事件循环机制包括 宏任务（macrotasks） 和 微任务（microtasks），微任务优先于宏任务执行，确保浏览器能够响应 UI 更新。
12. 防抖节流以及应用场景
- 防抖：多个触发事件中，只有最后一次会被执行，应用场景如输入框联想搜索。
- 节流：控制一定时间内只能触发一次事件，应用场景如滚动监听、窗口大小变化。
13. 前端模块化
- 将前端代码拆分成小的模块，使用
import和export导入导出模块。常见的模块化规范有 CommonJS、ES6 Module、AMD、CMD 等。
14. HTTP 和 HTTPS 它们的区别？
- HTTP：超文本传输协议，数据在传输过程中是明文的。
- HTTPS：安全超文本传输协议，在 HTTP 上加上了 SSL/TLS 加密，确保数据传输的安全性。
15. HTTP2.0 有哪些新特性？
- 支持多路复用（一个连接处理多个请求），头部压缩，服务器推送，减少延迟，提升性能。
16. HTTP 常用状态码
- 200 OK：请求成功。
- 301 Moved Permanently：永久重定向。
- 400 Bad Request：错误的请求。
- 404 Not Found：找不到资源。
- 500 Internal Server Error：服务器内部错误。
17. 强缓存和协商缓存
- 强缓存：通过 HTTP 头部中的
Cache-Control和Expires设置，浏览器会直接使用缓存，不发起请求。 - 协商缓存：浏览器发送请求时，会带上缓存信息（如
If-None-Match或If-Modified-Since），服务器判断是否返回新资源。
18. 移动端做过哪些优化
- 图片懒加载、减少 HTTP 请求、合理使用缓存、通过自适应布局和媒体查询做适配。
19. 自适应怎么做的
- 使用
@media媒体查询实现响应式布局，适配不同屏幕尺寸，使用viewport元标签控制视口大小。
20. flex grow 和 flex shrink
- flex-grow：项目在主轴方向上的扩展能力，值越大，分配到的空间越多。
- flex-shrink：项目在主轴方向上的收缩能力，值越大，空间不足时收缩的越多。
21. CSS 选择器权重
- CSS 权重根据选择器的类型进行计算，内联样式的权重大于 ID 选择器，ID 选择器大于类选择器和伪类选择器，类选择器大于元素选择器。
22. 元素垂直居中的方法
- 使用 Flexbox：
display: flex; align-items: center; justify-content: center; - 使用 Grid：
display: grid; place-items: center; - 使用
position: absolute和transform：position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
23. 盒模型
- 盒模型由外边距（margin）、边框（border）、内边距（padding）和内容（content）组成，元素的总宽度和高度由这些部分共同决定。
24. Sass 的编译流程
- Sass 代码（
.scss或.sass）通过 Sass 编译器转换成标准的 CSS 文件，浏览器最终加载的是编译后的 CSS。
25. Props 和 State 区别，怎么修改 Props
- Props：是组件外部传入的参数，是只读的，不能修改。
- State：是组件内部的状态，使用
this.setState()修改。 - 修改 Props 是不允许的，父组件通过更新 Props 来触发子组件的重新渲染。
26. 常用 hooks
useState、useEffect、useContext、useReducer、useRef、useMemo、useCallback。
27. useMemo 和 useCallback 什么时候使用
- useMemo：用于缓存计算结果，避免重复计算。
- useCallback：用于缓存函数实例，避免重新创建函数引用。
28. React 和 Vue 的区别（React 从 15 到 16 的架构变化）
- React：主要是 UI 库，注重组件化，采用虚拟 DOM 和声明式编程。16 版本引入了 Fiber 架构，优化了渲染性能。
- Vue：也是组件化的 UI 库，支持模板语法，灵活性更高。
29. Hooks 的好处
- 使函数组件具备类组件的能力，减少冗余代码，提升组件复用性，简化逻辑。
30. Git 常用指令，开发过程中碰到同事修改文件怎么处理？Git rebase 是干什么的？
- 常用指令：
git clone、git pull、git push、git commit、git branch、git merge。 - Git rebase：将一个分支的更改应用到另一个分支的顶部，避免了多次合并产生的复杂历史。
31. 常用的设计模式（说了观察者模式）
- 设计模式有很多，如单例模式、工厂模式、观察者模式等。观察者模式用于一对多的关系，一个对象状态变化时，其他相关对象会收到通知并自动更新。
32. 观察者模式应用案例
- 在前端应用中，类似于事件监听，多个组件可以订阅同一个事件，当事件发生时，所有订阅者都会被通知更新。