问题1.Vue列表组件渲染比较慢怎么办
graph TD A[列表渲染慢] --> B{数据量是否过大？} B -->|是| C[使用虚拟滚动] B -->|否| D[检查组件结构] D --> E[是否复杂组件？] E -->|是| F[拆分子组件 + v-once] E -->|否| G[检查响应式数据] G --> H[冻结数据 + 优化 Key] H --> I[使用性能工具定位瓶颈]
Vue列表渲染慢通常有几个原因：数据量过大、DOM操作频繁、组件结构复杂、重复渲染等
1. 首先想到的是虚拟滚动。当列表数据量很大时，一次性渲染所有元素会导致DOM节点过多，占用大量内存，影响性能。虚拟滚动只渲染可视区域内的元素，可以显著减少DOM节点数量。用户可能没有使用虚拟滚动，或者实现方式不够高效。这时候推荐使用成熟的库如vue-virtual-scroller或vxe-table，这些库已经优化过，比自己实现更可靠。
2.然后是列表优化。Vue的v-for指令在渲染列表时，如果没有正确的key，可能会导致不必要的DOM操作。需要提醒用户确保每个列表项都有唯一且稳定的key，避免使用索引作为key。此外，减少不必要的响应式数据，使用Object.freeze冻结数据，可以避免Vue的响应式系统带来的开销。
3.组件拆分也是一个重要点。如果列表项组件过于复杂，包含大量计算或子组件，每次渲染都会消耗较多资源。建议将复杂组件拆分成更小的子组件，利用Vue的异步组件或延迟加载，只在需要时加载，这样可以减少初始渲染的压力。
4.性能分析工具的使用也不可忽视。Vue Devtools的性能分析功能可以帮助定位瓶颈。通过录制性能时间线，查看哪些组件渲染时间过长。同时，Chrome的Performance面板可以分析JS执行时间和布局重绘情况，帮助找出具体问题。
5.数据分页或懒加载。如果一次性加载所有数据，必然导致渲染缓慢。分页加载或滚动懒加载可以按需加载数据，减少初始负载。需要评估用户的应用场景，是否适合分页或者无限滚动，并给出相应建议。
6.计算属性和缓存的合理使用。避免在模板内进行复杂计算，转而使用计算属性，并考虑缓存结果，减少重复计算。另外，使用v-once指令渲染静态内容，避免不必要的更新。
7.第三方组件的影响。如果用户使用了第三方UI库的复杂组件，如表或树形组件，这些组件可能自带性能问题。建议检查并更换为更高效的库，或者针对性的优化配置，比如关闭不必要的特性。
8.内存泄漏的可能性也不能排除。长时间运行的SPA中，未销毁的组件或事件监听可能导致内存累积。需要检查是否有及时销毁组件和取消订阅事件，使用Vue的beforeUnmount钩子进行清理。
9.最后，如果所有优化措施都无效，可能需要更底层的优化，比如避免使用v-if而用v-show来减少销毁重建的开销，或者直接使用原生JS操作DOM。不过这些方法可能会牺牲开发体验，需谨慎使用。
问题2.页面加载比较慢是为什么，怎么解决
graph LR A[页面加载慢] --> B{资源是否过大？} B -->|是| C[压缩图片/代码] B -->|否| D{请求数量是否过多？} D -->|是| E[合并请求/开启HTTP2] D -->|否| F{TTFB是否高？} F -->|是| G[CDN/缓存/后端优化] F -->|否| H[检查长任务和渲染阻塞]
按照 资源优化 → 网络优化 → 渲染优化 → 代码执行优化 的优先级逐步处理，多数场景下可显著提升加载速度。
问题3.怎么让一个盒子占满整个高度
1.占满 视口高度（整个屏幕） height: 100vh; /* 直接使用视口单位 */
2.占满 父容器高度（需确保父级有明确高度）
.parent {height: 500px; /* 父级必须有固定或百分比高度 */}
.child {height: 100%; /* 继承父级高度 */}
3.动态填充 剩余高度（经典布局场景） 不举例说明
4.Grid 方案 grid-template-rows: auto 1fr auto;
（定义了一个包含三行的网格容器，第一行和最后一行的高度会自动调整以适应内容，而中间行会占据所有剩余的空间。这种布局特别适合于需要显示不同高度内容的情况，例如标题和内容区域。
问题4.Promise执行顺序
graph TD A[执行同步代码] --> B[微任务队列是否为空?] B -->|是| C[执行下一个宏任务] B -->|否| D[取出并执行微任务] D --> E[微任务中是否产生新微任务?] E -->|是| B E -->|否| B
- 先要理解JavaScript中Promise的执行顺序。Promise和异步编程有关，但具体执行顺序是怎样的呢？比如，当有多个Promise和同步代码混合在一起时，它们会按什么顺序执行？
- 首先，我应该回忆一下事件循环（Event Loop）的基本概念。 JavaScript是单线程的，事件循环负责处理异步任务。 同步代码会立即执行，而异步任务会被放入任务队列中，等到主线程空闲时才会执行。
- 那Promise属于哪种异步任务呢？我记得Promise的回调属于微任务（microtask），而像setTimeout这样的属于宏任务（macrotask）。微任务会在当前宏任务执行完毕后立即执行，而宏任务则需要等到下一个事件循环。
问题5.Position
Position是CSS中用于控制元素定位的重要属性，常见的值有static、relative、absolute、fixed、sticky，可能还有比较少用的inherit或者initial之类的，不过主要的是前五个。
- static（默认）：元素遵循正常文档流，不受 top、left 等偏移属性影响。
- relative：相对自身原位置偏移，不脱离文档流，周围元素仍按原位置布局。
- absolute：脱离文档流，相对于最近的非 static 祖先元素定位，常用于精准定位（如弹窗）。
- fixed：脱离文档流，相对于**视口（viewport）**定位（如固定导航栏）。
- sticky：混合定位，滚动到阈值前为 relative，之后变为 fixed（如吸顶标题）。
- 问题：fixed 和 sticky 的区别？
- 答：fixed：始终相对于视口定位，不受滚动影响。sticky：在父容器内滚动到阈值（如 top: 10px）前为 relative，之后变为 fixed，滚动出父容器后失效。
问题6.如何实现元素居中？和垂直居中？
absolute + transform（兼容性好）：.box {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%); }
flex 布局（现代首选）：.parent { display: flex;justify-content: center;align-items: center; }
1. 使用Flexbox
2. 使用Grid布局
3. 绝对定位 + transform
4. 绝对定位 + margin auto（已知尺寸）
5. 表格布局（display: table/table-cell）
6. line-height（适用于单行文本）
7. padding法
8. margin + calc计算
问题7.flex=1代表什么 具体的参数
flex：1，其实就是 flex-grow:1;flex-shrink:1;flex-basis:0% 这三个属性的简写
问题8.怎么让左边元素固定宽度的同时，右边自适应
**首推 Flex/Grid**：强调现代布局方案的优势（代码简洁、维护性好）。
问题9.line-heigt
**基础问题（概念与用法）**
**`line-height` 的作用是什么？**
- 控制行内元素的行高（即文本行的高度），影响文本垂直方向的空间分配和布局。
**`line-height` 的取值有哪些形式？**
- 无单位数字（如 `1.5`）、固定值（如 `24px`）、百分比（如 `150%`）、`normal`（默认值，通常约 `1.2`，取决于字体）。
**`line-height: 1.5` 和 `line-height: 150%` 的区别是什么？**
- **无单位值（`1.5`）** ：子元素继承的是计算后的值（如父元素字体 `16px`，子元素继承 `1.5` → 实际行高为 `子字体 × 1.5`）。
- **百分比（`150%`）** ：子元素继承的是父元素计算后的固定值（如父字体 `16px` → 行高 `24px`，子元素无论字体多大，行高始终是 `24px`）。
问题10.Css可以继承的元素有哪些
常见的可继承属性包括字体相关的，比如font-family、font-size、font-weight，颜色color，文本对齐text-align，行高line-height，还有可见性visibility等。而像盒模型相关的属性，如width、height、margin、padding这些通常是不继承的。
问题11.移动端的1px怎么解决
**1. 使用 `transform: scale()` 缩放（推荐）**
**原理**：通过伪元素（`::after` 或 `::before`）生成边框，再用 `transform` 缩放至实际需要的粗细。
