面试官提问环节

基础环节

自我介绍

psss

虚拟滚动的实现方案，不定高的虚拟滚动呢？

虚拟滚动的核心思路是只渲染可视区域内的元素，主要实现方案如下：

  1. 固定高度的虚拟滚动：
  • 计算可视区域能显示的元素数量
  • 根据滚动位置计算起始索引
  • 使用transform设置偏移量
  • 只渲染可视区域的元素
  1. 不定高度的虚拟滚动：
  • 预估每项的高度
  • 第一次渲染后缓存真实高度
  • 使用动态位置计算
  • 可以借助IntersectionObserver优化
  • 处理快速滚动时的位置计算

你是如何封装这些组件的，思路、注意的点？

组件封装的主要思路和注意点：

  1. 设计原则：
  • 单一职责
  • 高内聚低耦合
  • 接口设计要简单明确
  • 考虑组件的可扩展性
  1. 具体实践：
  • 提取公共逻辑到hooks
  • 使用TypeScript做好类型定义
  • 做好错误边界处理
  • 提供完整的文档和示例
  • 考虑性能优化（memo、useMemo等）
  1. 注意点：
  • 避免过度设计
  • 保持向下兼容
  • 做好测试用例
  • 考虑极端场景

现在用的webpack还是vite构建的项目？为什么用vite？

选择Vite的原因：

  1. 开发体验更好：
  • 基于ESM的开发服务器
  • 冷启动速度快
  • HMR更快
  • 按需编译
  1. 构建性能优化：
  • 使用esbuild预构建依赖
  • 生产环境使用Rollup构建
  • 天然支持TypeScript
  1. 相比Webpack优势：
  • 开发环境无需打包
  • 配置更简单
  • 内置更多功能
  • 构建速度更快

自适应模块用到了element-resize-detector库，看过他的源码吗？为什么快？

element-resize-detector的核心原理：

  1. 实现方式：
  • 对象方式：创建object元素监听resize事件
  • scroll方式：监听scroll事件实现
  1. 性能优化：
  • 使用RAF优化回调执行
  • 批量处理resize事件
  • 优化DOM操作
  • 使用事件委托

说说性能优化方案，图片压缩怎么做的，用到什么插件了，还是？

性能优化的主要方案：

  1. 资源优化：
  • 图片压缩（使用image-webpack-loader）
  • 懒加载（Intersection Observer）
  • WebP格式转换
  • CDN加速
  1. 代码优化：
  • Tree Shaking
  • 代码分割
  • 路由懒加载
  • 组件按需加载
  1. 图片压缩具体实现：
  • 开发环境：sharp库
  • 构建阶段：image-webpack-loader
  • 运行时：canvas压缩
  • 使用tinypng API

分包后，子包还是很大怎么办？怎么优化

大型包的优化策略：

  1. 代码层面：
  • 进一步代码分割
  • 动态import
  • 提取公共依赖
  • 移除未使用代码
  1. 依赖优化：
  • 使用更轻量的替代库
  • 按需引入
  • 移除重复依赖
  • 考虑使用CDN
  1. 构建优化：
  • 启用压缩
  • 使用现代格式（如ES modules）
  • 优化资源缓存
  • 考虑使用HTTP/2

说说https缓存策略怎么实现

HTTPS缓存策略实现：

  1. 强缓存：
  • Cache-Control
  • Expires
  • 适用于静态资源
  1. 协商缓存：
  • ETag / If-None-Match
  • Last-Modified / If-Modified-Since
  • 适用于动态资源
  1. 最佳实践：
  • 合理设置缓存时间
  • 使用版本号或hash
  • 区分资源类型
  • 配置CDN缓存

webWorker 是什么场景使用的？内网存在的跨域问题如何解决，（为什么blob 流可以处理跨域）

WebWorker使用场景：

  1. 适用场景：
  • 大量计算
  • 文件处理
  • 数据加密
  • 实时数据处理
  1. 跨域解决方案：
  • 使用Blob URL创建Worker
  • 配置正确的CORS头
  • 使用同源策略
  • 代理服务
  1. Blob处理跨域原理：
  • Blob URL属于同源
  • 不受跨域限制
  • 安全性由浏览器保证

基于react 组件，如何实现低代码开发中的画布

低代码画布实现方案：

  1. 核心功能：
  • 拖拽功能（react-dnd）
  • 组件渲染器
  • 属性配置面板
  • 布局系统
  1. 技术实现：
  • 组件注册机制
  • 状态管理
  • 事件系统
  • 数据流转
  1. 优化方案：
  • 组件懒加载
  • 渲染优化
  • 状态缓存
  • 操作历史记录

如何一个页面同时加载几十个组件（低码项目）怎么去优化？

多组件优化策略：

  1. 加载优化：
  • 组件懒加载
  • 分批渲染
  • 虚拟列表
  • 预加载策略
  1. 渲染优化：
  • React.memo
  • 使用骨架屏
  • 优化重渲染
  • 合理使用Suspense
  1. 性能监控：
  • 性能指标收集
  • 渲染时间优化
  • 内存占用监控
  • 性能瓶颈分析

react的redux、zustand、mobx 的使用场景有什么不同？让你开发一个项目，你该怎么选择的？

状态管理方案选择：

  1. Redux：
  • 适合大型应用
  • 需要严格的数据流
  • 需要中间件
  • 团队协作要求高
  1. Zustand：
  • 轻量级应用
  • 简单状态管理
  • 快速开发
  • 学习成本低
  1. MobX：
  • 响应式编程
  • 面向对象
  • 灵活性高
  • 适合复杂业务

选择依据：

  • 项目规模
  • 团队熟悉度
  • 性能要求
  • 开发效率

看你的项目用的微前端？看样子你很熟悉微前端，说说qiankun、无界的实现方案，如何实现js、css 隔离的，子系统之间如何通信的

微前端实现方案对比：

  1. qiankun：
  • 基于single-spa
  • 沙箱机制
  • 样式隔离
  • 预加载能力
  1. 无界方案：
  • iframe方案
  • 纯web组件
  • 性能更好
  • 隔离更彻底
  1. 隔离实现：
  • JS沙箱：快照、Proxy
  • CSS隔离：Shadow DOM、前缀
  • 通信：发布订阅、Props传递
  • 全局状态：统一状态管理