2.19 前端面试复盘（四）
面试官提问环节基础环节自我介绍psss
虚拟滚动的实现方案，不定高的虚拟滚动呢？虚拟滚动的核心思路是只渲染可视区域内的元素，主要实现方案如下：
固定高度的虚拟滚动：
计算可视区域能显示的元素数量
根据滚动位置计算起始索引
使用transform设置偏移量
只渲染可视区域的元素
不定高度的虚拟滚动：
预估每项的高度
第一次渲染后缓存真实高度
使用动态位置计算
可以借助IntersectionObserver优化
处理快速滚动时的位置计算
你是如何封装这些组件的，思路、注意的点？组件封装的主要思路和注意点：
设计原则：
单一职责
高内聚低耦合
接口设计要简单明确
考虑组件的可扩展性
具体实践：
提取公共逻辑到hooks
使用TypeScript做好类型定义
做好错误边界处理
提供完整的文档和示例
考虑性能优化（memo、useMemo等）
注意点：
避免过度设计
保持向下兼容
做好测试用例
考虑极端场景
现在用的webpack还是vite构建的项目？为什么用vite？选择Vite的原因：
开发体验更好：
基于ESM的开发服务器
冷启动速度快
H ...
2.19 前端面试复盘（四）
面试官提问环节基础环节自我介绍重点突出以下几点：
技术栈：Vue/React全家桶、TypeScript等
项目经验：重点项目的业务价值和技术难点
个人特点：学习能力、团队协作等
离职原因建议从以下角度回答：
寻求更好的发展机会
希望接触更有挑战性的项目
对新技术栈有追求
技术难点讨论RBAC权限系统设计1. 动态路由的导入实现要点：
后端返回权限菜单数据
前端进行路由表的动态组装
路由守卫进行权限校验
404处理机制
2. 按钮级别权限设计实现方案：
自定义指令实现
权限数据统一管理
组件级别的权限控制
HOC高阶组件封装
3. 权限实时性优化方案当管理员修改用户权限时：
WebSocket实时推送方案
定时轮询检查方案
关键操作权限二次校验
权限缓存更新策略
4. 登录流程优化针对异步等待时间优化：
路由懒加载
并行请求处理
骨架屏loading
路由表缓存策略
技术细节问答移动端适配方案rem换算相关：
基准值计算方式
不同设备下的根字体大小计算
viewport的配置
媒体查询的配合使用
1px问题解决方案产生原因：
设备物理像素和CSS ...
如何实现高性能的虚拟滚动？
一、虚拟滚动原理虚拟滚动（Virtual Scrolling）是一种用于优化长列表性能的技术，其核心思想是：只渲染可视区域内的列表项，当用户滚动时动态更新列表项的内容。这种技术可以显著减少 DOM 节点数量，提高页面性能。
1. 基本概念
可视区域：用户当前能看到的列表区域
缓冲区：可视区域外预渲染的额外项
虚拟列表：实际渲染在 DOM 中的列表项
偏移量：用于模拟真实滚动位置的空白区域
二、基础实现1. 简单虚拟滚动1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071class VirtualScroll { constructor(options) { this.containerHeight = options.height; // 容器高度 this.itemHeight = options.itemHeight; // 每项高度 ...
2.15 前端面试复盘（三）
面试官提问环节面试官：说说你对 Vue 响应式的理解？Vue 的响应式系统是其核心特性之一，我主要从以下几个方面来理解：
Vue2 的响应式实现1234567891011121314151617181920212223242526// 核心是通过 Object.defineProperty 来劫持对象的属性function defineReactive(obj, key, val) { // 每个属性对应一个 dep 用来收集依赖 const dep = new Dep() Object.defineProperty(obj, key, { get() { // 收集依赖 if (Dep.target) { dep.depend() } return val }, set(newVal) { if (newVal === val) return val = newVal // 通知更新 dep.n ...
2.15 前端面试复盘（二）
WebSocket 技术要点总结WebSocket 连接管理详解心跳检测与断线重连机制1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162class WebSocketClient { constructor(url) { this.url = url; this.ws = null; this.heartbeatTimer = null; this.reconnectAttempts = 0; // 配置参数 this.config = { heartbeatInterval: 30000, reconnectInterval: 3000, maxReconnectAttempts: 5 ...
2.15 面对职场矛盾，要不要宣泄怒气
面对职场矛盾，要不要宣泄怒气？？？职场怒气管理决策模型123456789graph TD A[产生怒气] --> B{价值评估} B -->|公司价值>情绪成本| C[理性处理] B -->|情绪成本>公司价值| D[考虑离职] C --> E[三步处理法] E --> F[24小时冷静期] E --> G[结构化表达] E --> H[寻求第三方案] D --> I[优雅退出策略]
替代宣泄的方案（更职业的处理方式）1. 结构化沟通模板123456789// 非暴力沟通四步法[观察] + [感受] + [需求] + [请求]示例："张总，最近三次方案讨论会上（观察），您都直接否定了我的提案（观察），这让我感到困惑和受挫（感受）。我希望能够更好地理解项目方向（需求），能否请您具体说明期望的方案标准？（请求）"
2. 情绪转化工具12345678// 怒气值转化公式：有效行动 = (怒气能量 × 专业素养) / 情绪管理能力实施步骤：1. ...
2.15 前端面试复盘（一）
前端面试技术要点总结自我介绍您好，我是XX，26岁，本科学历，是一名拥有3年工作经验的前端开发工程师。我熟练掌握 Vue 全家桶，有 Vue2、Vue3 的实际项目开发经验。同时也具备 React 及其生态系统的开发经验，包括 Hooks、Redux/Mobx 等状态管理方案。在工作经历中，我参与过企业中台系统、官网、数据可视化大屏等多个重要项目的开发。熟悉 Element UI、Ant Design 等主流组件库，对前端工程化有较深理解，能够熟练使用 Webpack、Vite 等构建工具进行项目优化。在可视化领域，我有丰富的 ECharts 使用经验。此外，我也参与过小程序和 APP 的开发工作。我注重代码质量和开发效率，有较强的业务理解能力和团队协作精神。目前正在寻找前端开发相关的工作机会，期望薪资范围在14-16k。
离职原因“我上一家公司是集团的子公司，虽然有转正编的机会，但主要使用的是公司内部封闭的技术框架，这限制了我在主流技术方面的成长。考虑到个人的职业发展，我希望能到一个技术氛围更好的平台，接触更多业界主流的技术栈和项目，同时也期望能获得更好的发展机会。”
项目 ...
微前端子应用如何部署？
微前端子应用如何部署？微前端子应用的部署方案主要有以下几种：
1. 独立部署模式这是最常见的部署方式，每个子应用独立部署到不同的服务器或 CDN。
123456789101112131415// 主应用配置registerMicroApps([ { name: 'app1', entry: 'https://app1.example.com', // 独立域名 container: '#container', activeRule: '/app1' }, { name: 'app2', entry: 'https://app2.example.com', // 独立域名 container: '#container', activeRule: '/app2' }]);
部署流程：
子应用单独打包
部署到独立的服务器/CD ...
qiankun如何实现css隔离？
qiankun如何实现css隔离？qiankun 提供了三种 CSS 隔离方案，用于解决微应用之间的样式冲突问题：
1. Shadow DOM 隔离这是最严格的隔离方式，通过 Web Components 的 Shadow DOM 特性实现完全隔离。
12345678910111213registerMicroApps([ { name: 'app1', entry: '//localhost:8080', container: '#container', activeRule: '/app1', props: { sandbox: { strictStyleIsolation: true // 开启 Shadow DOM 隔离 } } }]);
工作原理：
为微应用的容器创建一个 Shadow DOM
微应用的所有内容都在 Shadow DOM 中运行
CSS 完全隔离 ...
qiankun如何实现js隔离？
qiankun如何实现js隔离？qiankun 提供了两种 JavaScript 隔离方式：
快照沙箱 (SnapshotSandbox)
适用于单实例场景
工作原理：12345678910111213141516171819202122232425262728293031323334class SnapshotSandbox { constructor() { this.windowSnapshot = {}; this.modifyPropsMap = {}; } // 激活沙箱 active() { // 1. 保存当前 window 状态 for (const prop in window) { this.windowSnapshot[prop] = window[prop]; } // 2. 恢复之前的状态 Object.keys(this.modifyPropsMap).forEach(prop = ...
