📖 八股

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. 观察者模式应用案例

• 在前端应用中，类似于事件监听，多个组件可以订阅同一个事件，当事件发生时，所有订阅者都会被通知更新。