袋鼠云前端实习一二面面经，一本正经胡说八道

袋鼠云前端实习一面和二面主要考察技术基础、项目经验、学习能力和源码理解，面试问题涵盖TypeScript、React、CSS、HTTP协议、构建工具、性能优化等多个方面。 具体内容如下：

• 自我介绍：简要阐述个人教育背景、技术栈、项目经历及个人优势。
• TypeScript知识考察：

  考察对TypeScript的熟悉程度，包括基础类型、接口、泛型等核心概念的使用。

• React Hooks：

  需掌握useState、useEffect等常用Hooks的用法及注意事项。

  例如，useEffect的依赖项数组如何影响副作用的执行时机。

• CSS实现颗粒度相关：

  考察对CSS细节控樱谨制的掌握，如盒模型、层叠上下文、动画等。

• 水平垂直居中：

  需列举多种实现方式，如Flexbox、Grid、绝对定位+transform等，并说明适用场景。

• HTTP和HTTPS协议的区别：

  安全性：HTTPS通过SSL/TLS加密传输数据，防止数据被窃取或篡改；HTTP为明文传输，存在安全风险。

  端口：HTTPS默认使用443端口，HTTP默认使用80端口。

  证书：HTTPS需要数字证书（由CA机构颁发），HTTP无需证书。

• HTTP1.1和HTTP2.0的区别：

  多路复用：HTTP2.0支持多路复用，允许同时发送多个请求和响应，避免HTTP1.1的队头阻塞问题。

  头部压缩：HTTP2.0使用HPACK算法压缩头部，减少传输数据量。

  服务器推送：HTTP2.0支持服务器主动推送资源，减少客户端请求次数。

• 平常怎么学习：

  需说明学习方式（如阅读文档、实践项目、参与开源等）及学习频率。

• 是否去GitHub上学习别人的项目：

  考察对开源社区的参与度，可举例说明学习过的项目及收获。

• 反问环节：

  可询问团队技术栈、项目方向、实习内容等，展现主动性。

• 自我介绍：进一步突出技术深度或项目亮点，与一面内容形成互补。
• React类组件和函数组件使用的区别：

  生命周期：类组件有完整的生命周期塌隐方法（如componentDidMount）；函数组件通过Hooks模拟生命周期。

  状态管理：类组件使用this.state和setState；函数组件使用useState。

  复用逻辑：函数组件更易通过自定义Hooks复用逻辑，类组件需借助高阶组件或Render Props。

• useEffect都可以模拟哪些生命周期：

  componentDidMount：依赖项数组为空时，useEffect在组件挂载后执行一次。

  componentDidUpdate：依赖项数组包含特定状态时，useEffect在状态更新后执行。

  componentWillUnmount：通过返回清理函数，useEffect可模脊衫基拟组件卸载前的逻辑。

• useLayoutEffect模拟类组件哪个生命周期：

  useLayoutEffect在DOM更新后同步执行，类似于componentDidMount和componentDidUpdate，但执行时机更早（在浏览器绘制前）。

• Redux实现原理：

  Store：单一数据源，存储应用状态。

  Action：描述状态变化的普通对象。

  Reducer：纯函数，接收当前状态和Action，返回新状态。

  Dispatch：触发状态更新的方法，将Action传递给Reducer。

• 项目拷打：

  需深入讲解项目架构、技术选型、遇到的问题及解决方案。

• Vite和Webpack区别，为什么Vite打包更快：

  启动速度：Vite利用浏览器原生ES模块，开发环境无需打包，启动更快；Webpack需打包所有依赖，启动较慢。

  生产构建：Vite使用Rollup进行生产构建，支持多页面和代码分割；Webpack功能更全面，但配置复杂。

  HMR（热更新）：Vite的HMR基于ES模块，仅更新变更文件；Webpack需重新构建整个模块链。

• 平时怎么学习：

  需结合具体案例说明学习方法（如通过源码理解原理、通过实践巩固知识）。

• 是否看过Redux源码、Vue-cli源码、React源码：

  若未看过源码，可说明学习计划（如计划通过阅读文档或简单项目逐步深入）。

• 项目中做了哪些性能优化，还能实现哪些性能优化：

  已实现：如代码分割、懒加载、缓存策略、减少重绘回流等。

  可优化：如使用Web Workers处理耗时任务、优化图片资源、采用CDN加速等。

• 路由懒加载怎么实现的：

  React：使用React.lazy和Suspense动态加载组件。

  Vue：使用defineAsyncComponent或路由配置中的component: () => import()。

• 各种性能优化方面的问题：

  可能涉及加载优化、渲染优化、缓存优化等，需结合项目经验回答。

• 反问环节：

  可询问团队对实习生的期望、项目技术难点、个人发展建议等。