收件箱渲染慢应结合虚拟滚动与documentfragment优化：对超50条邮件仅渲染视口及缓冲区节点，用document.createdocumentfragment批量插入；状态变更立即发单条请求，失败时本地保留并加视觉提示。

收件箱列表渲染慢，DOM 节点过多卡顿怎么办

直接用 innerHTML 拼接几百条邮件会触发频繁重排，尤其在低端设备上滚动卡顿明显。关键不是“要不要用模板”，而是控制单次渲染量和复用机制。

• 用 document.createDocumentFragment() 批量插入节点，避免逐条 appendChild
• 对超过 50 条的收件箱启用虚拟滚动：只渲染视口内 + 上下各 5 条，监听 scroll 动态更新 scrollTop 对应的 startIdx 和 endIdx
• 每封邮件 DOM 结构尽量扁平，避免嵌套 div 套 div；用 display: contents 替代无语义包裹层

点击邮件切换选中状态，但 shift + 点击连续选择失效

原生 click 事件无法感知 shiftKey 状态变化，必须监听 mousedown 并结合 event.shiftKey 判断。

• 给每封邮件绑定 mousedown 而非 click，防止鼠标按下时 shift 键已按下的状态被忽略
• 记录上一次点击的索引 lastClickedIndex，当 shiftKey 为 true 时，用 Math.min/max 计算区间并批量更新 selected 状态
• 注意：Safari 对 mousedown 的 shiftKey 支持稳定，但某些安卓 WebView 可能需 fallback 到监听 keydown 捕获 Shift 键

标记已读/未读后，UI 更新但服务端没同步

前端 toggle isRead 状态后，若只改 DOM 不发请求，刷新页面就丢状态——这不是“交互不完善”，是数据流断裂。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 每次状态变更立即触发 fetch，URL 形如 /api/messages/${id}/read，method 用 PATCH 或 PUT
• 失败时保留本地状态但加视觉提示（比如邮件项加 class="sync-failed"），避免用户误以为操作成功
• 不要等所有邮件批量提交：单条操作就单条发请求，否则某一封失败会导致整批回滚逻辑复杂

响应式收件箱在小屏上折叠操作栏，但按钮错位或被截断

单纯用 display: none 隐藏工具栏会破坏布局流，导致右侧内容突然左移产生抖动；用 visibility: hidden 又占空间。

• 用 transform: scale(0) + opacity: 0 配合 transition 实现平滑收起，同时设 pointer-events: none 防止误触
• 操作按钮图标优先用 inline SVG，避免 img 标签在缩放时模糊；文字标签在 max-width: 480px 下隐藏，仅留图标
• 测试真机：iOS Safari 的 vh 在地址栏展开/收起时会跳变，建议用 100dvh 或 JS 动态计算可用高度

收件箱交互真正的难点不在样式或动画，而在于状态同步的时机和粒度——用户点一下，背后至少涉及 DOM 更新、内存状态变更、网络请求、错误降级四个层面，漏掉任一环，体验就断在某个环节。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！