个人介绍

• 简单介绍自己的背景、技能和实习经历。可以突出与面试职位相关的经验和技术栈。

讲一下 history 路由和 hash 路由

• History 路由：通过浏览器的 history.pushState() 和 history.replaceState() 进行路由切换，不会产生页面刷新。支持浏览器的前进、后退操作，URL 没有 #。
• Hash 路由：通过 URL 中的 # 来进行路由切换，改变的只是哈希值。每次跳转都会产生页面刷新，不支持浏览器前进、后退操作（需要自己管理）。

讲一下 TS？TS 和 JS 的区别

• TS (TypeScript) 是 JavaScript 的超集，添加了类型系统。TS 提供静态类型检查，可以在编译时捕获错误。JS 是动态语言，没有类型检查。
• TS 代码在编译时会转译成 JS 代码，JS 没有强制类型约束。

开发时埋点流程（实习时的）

• 确定需要埋点的事件（如用户行为、按钮点击、页面访问等）。
• 在合适的地方添加埋点代码（通常通过统一的埋点函数）。
• 后端接收数据并存储，前端发送请求到服务器。
• 数据分析后，生成报表，帮助产品和运营分析数据。

Lottie Web 怎么封装的和普通动画的区别

• Lottie Web：基于 JSON 文件的动画，通常由 After Effects 和 Bodymovin 插件生成。Lottie 可以通过 lottie-web 库来渲染动画。
• 和普通 CSS/JS 动画的区别在于，Lottie 动画是矢量图，质量较高，且不需要复杂的代码，容易集成。

开发时做过哪些优化

• 减少不必要的渲染，使用 React 的 shouldComponentUpdate 或 React.memo。
• 图片和文件资源的懒加载，减少页面初次加载时间。
• 使用 Webpack 进行打包优化（代码分割、压缩等）。

刮卡效果怎么做的（Canvas）

• 使用 Canvas 元素绘制覆盖层，通过监听鼠标事件（如 mousemove）擦除一部分覆盖层，展示底部内容。
• 用 clearRect() 方法清除指定区域，实现刮卡效果。

开发时有没有遇到过性能问题

• 常见性能问题：页面渲染卡顿，异步请求导致的 UI 阻塞，内存泄漏等。
• 解决方案：优化组件渲染，使用懒加载、减少 DOM 操作、异步请求优化等。

React 做过哪些优化

• 使用 React.memo 或 PureComponent 避免不必要的渲染。
• 使用懒加载和代码分割（React.lazy）。
• 使用 useCallback 和 useMemo 优化函数和数据的传递。

HTML 怎么做优化

• 压缩 HTML 文件，减少不必要的空格、注释等。
• 使用异步加载 JavaScript 和 CSS 文件。
• 使用图片压缩，避免大图片占用过多带宽。

事件循环机制

• JavaScript 是单线程的，事件循环机制保证了异步任务的执行顺序。
• 主线程执行栈、宏任务队列和微任务队列交替执行。微任务（如 Promise）会在每个宏任务执行后立即执行。

防抖节流以及应用场景

• 防抖：在事件触发后的延迟时间内如果有新的触发，则重新计时。适用于输入框搜索等场景。
• 节流：控制事件触发的频率，通常用于滚动、窗口大小调整等场景。

前端模块化

• 将代码分为多个模块，提高代码的复用性和可维护性。
• 常见的模块化方法：CommonJS、AMD、ES Modules（ES6）。

HTTP 和 HTTPS 它们的区别？

• HTTP 是明文传输，存在安全隐患。
• HTTPS 在 HTTP 上添加了 SSL/TLS 加密，确保数据传输的安全性。

HTTP 2.0 有哪些新特性

• 多路复用：在一个连接上发送多个请求和响应。
• 头部压缩：减少头部信息的冗余。
• 服务器推送：服务器可以主动推送资源到客户端。

HTTP 常用状态码

• 200：成功
• 404：未找到
• 500：服务器错误
• 301：永久重定向
• 403：禁止访问

强缓存和协商缓存

• 强缓存：浏览器根据缓存策略（如 Cache-Control、Expires）直接从缓存中获取资源，不发送请求。
• 协商缓存：浏览器发送请求到服务器，服务器判断缓存是否有效，若无变化返回 304。

移动端做过哪些优化

• 使用媒体查询做响应式设计，适配不同屏幕尺寸。
• 通过懒加载和图片压缩提升性能。
• 使用 Touch 事件代替传统的鼠标事件。

自适应怎么做的

• 使用百分比宽度、vh/vw 单位、媒体查询等手段实现页面自适应。

flex grow 和 flex shrink

• flex-grow：定义项目的放大比例。
• flex-shrink：定义项目的缩小比例。

CSS 选择器权重

• 权重由元素选择器、类选择器、ID选择器和内联样式决定，ID选择器的权重最大，内联样式权重最高。

元素垂直居中的方法

• 使用 Flexbox 或 Grid 布局。
• 通过 position: absolute 和 transform。
• line-height 与 height 相等的方法。

盒模型

• 盒模型包括：content、padding、border 和 margin，可以通过 box-sizing 属性控制是否包括 padding 和 border。

SASS 的编译流程

• SASS 文件通过 SASS 编译器编译为标准的 CSS 文件。

props 和 state 区别 怎么修改 props

• props 是父组件传递给子组件的数据，不可修改。
• state 是组件内部的数据，可以通过 setState 修改。

常用 hooks

• useState：声明状态。
• useEffect：副作用处理。
• useContext：跨组件共享状态。
• useReducer：复杂状态管理。

useMemo 和 useCallback 什么时候使用

• useMemo：缓存计算结果，防止不必要的重复计算。
• useCallback：缓存函数，避免子组件不必要的重新渲染。

React 和 Vue 的区别

• React 更关注组件的构建和渲染，使用虚拟 DOM，灵活性较高。
• Vue 提供了更完整的解决方案，包括响应式数据绑定、指令等。React 从 15 到 16 的架构变化，主要是引入了 Fiber 算法。

hooks 的好处

• 可以在函数组件中使用状态和生命周期等功能，提升代码的复用性，避免组件嵌套。

git 常用指令 开发过程中碰到同事修改文件怎么处理？ git rebase 是干什么的？

• git pull：拉取远程代码。
• git rebase：将本地提交移到最新的远程提交之上，避免生成额外的合并提交。

常用的设计模式（说了观察者模式）

• 观察者模式：允许对象在发生变化时通知其他依赖对象，常用于事件系统。

观察者模式应用案例

• 前端的事件订阅与发布、Vue 的响应式数据绑定。