2025场景面试题跟练(二)

如何实现电梯导航

“混动跟随导航”或“电梯导航”通常指的是在网页或应用中实现一种交互效果：当用户滚动页面时，侧边导航栏会根据当前内容区域自动高亮对应的导航项，同时点击导航项也能平滑滚动到对应的内容区域

工作原理

1. HTML：导航栏的<a>标签通过href="#id"与内容区域的id对应。
2. CSS：导航栏固定在页面左侧，.active类用于高亮当前项。
3. JavaScript：

• 点击导航时，通过scrollIntoView实现平滑滚动。
• IntersectionObserver监听每个内容区域的可见性，当某个区域进入视口时，自动为对应的导航项添加active类。

效果

退出浏览器之前，发送积压的埋点数据请求，如何做？

1. 埋点数据最好定期发送避免积压过多
2. 对于监控页面停留时长等必须在unload时发送的，可以使用window.addEventListener('beforeunload', ...)监听页面卸载事件，通过navigator.sendBeacon在事件触发时发送积压数据,如果不支持sendBeacon，可以回退到同步XMLHttpRequest（但不推荐，因为可能被浏览器中断）

在网络带宽一定的情况下，切片上传和整体上传消费的时间?

在网络带宽一定的情况下，消费时间要考虑文件大小，切片策略，网络稳定性和服务端处理时间。总的来说：

• 整体上传适合小文件或速度要求不高的场景，耗时主要由文件和大小决定
• 分片上传适合大文件或网络不稳定的场景，通过并发和分片显著降低耗时，但需要合理配置切片大小和并发数

整体上传

$T_{\text{整体}} = \frac S B+ L$

1. S是文件大小
2. B是带宽
3. L是网络连接，延迟服务器处理等额外开销

分片上传

$T_{\text{切片}} = \frac{S}{B \cdot N} + L_{\text{切片}} + O_{\text{管理}}$

1. N是切片数量
2. O是切片合并等策略管理的时间
3. L是每个切片连接、网络延迟的时间和

大文件切片上传的时间，确定切片的数量，有哪些考虑因素

1. 明确文件大小和带宽：计算理论上传时间。
2. 评估并发能力：确定最大并发数。
3. 测试网络延迟和服务器性能：避免请求过多或过少。
4. 选择初始切片大小：建议从5MB开始。
5. 动态调整：根据实际上传时间和失败率优化切片数量。
6. 考虑容错性：网络不稳定时增加切片数量。

长文本溢出展开收起如何实现

实现原理

1. 如果内容处于收起状态，判定是否超出，超出省略
2. 如果内容处于展开，一般要确定容器高度，让超出内容自动折行滚动

效果