用语义化 包裹会话项，每项为带 role="button"、tabindex="0" 和 aria-label 的 ；css 用 transform/opacity 实现状态动画，伪元素画红点，contain: layout style paint 提升长列表性能，documentfragment 增量更新，伪元素 ::before 扩展移动端点击热区。
怎么用 HTML + CSS 实现可滚动的私信会话列表
纯 HTML 无法实现“私信对话列表”的交互逻辑（比如点击切换会话、标记已读），但结构和视觉层必须由 HTML 承载，且要为后续 JS 驱动留出清晰语义和可访问性基础。关键不是堆砌 div，而是用语义化容器表达“这是一个会话集合”。
推荐用 <ol></ol> 包裹会话项——因为会话有自然时间顺序（最新在顶），<li> 每项代表一个独立会话。不要用 <ul></ul> 或无序 div 套嵌，否则屏幕阅读器无法传达顺序关系，也影响键盘导航。
每个会话项内必须包含：aria-label（例如 “与张三的对话，最后一条消息：你好，2分钟前”）、tabindex="0"（确保可聚焦）、以及明确的 role="button"（如果该 li 可点击切换会话）。
容易踩的坑：
– 直接给 li 绑 click 但没加 role 和 tabindex，导致键盘用户无法操作；
– 用图片头像但没写 alt，或写成空字符串却没加 aria-hidden="true"；
– 时间戳用纯文本如 “2m”，没辅以 datetime 属性（<time datetime="2024-05-20T14:32">2m</time>），影响机器解析。
CSS 如何让会话项支持悬停、选中、未读红点且不卡顿
核心是避免触发重排（reflow）。所有动画/状态变化尽量只用 transform 和 opacity，禁用 width、height、left、top 等会触发布局计算的属性。
未读红点统一用伪元素 ::after 实现，而非额外 DOM 节点：
.conversation-item.unread::after {
content: "";
position: absolute;
top: 8px;
right: 8px;
width: 8px;
height: 8px;
background: #ff4d4f;
border-radius: 50%;
box-shadow: 0 0 0 2px #fff;
}
悬停反馈建议用 background-color + opacity 微调，别加边框或改变 padding——否则会引发布局偏移；选中态（当前激活会话）用独立 class（如 .active）控制背景色和左侧高亮条，且高亮条用 transform: scaleX(1) 实现，而不是靠 width 动画。
性能注意点：
– 列表超过 50 项时，务必启用 contain: layout style paint 在容器上；
– 红点绝对定位需父容器设 position: relative，但别在每项都套 div 再设，直接用 li 自身；
– 避免在 :hover 里查 DOM 或触发 JS 计算。
为什么不能用 innerHTML 批量渲染会话列表
因为会丢失事件绑定、破坏焦点管理、且无法增量更新。每次用 innerHTML = longString 渲染整个列表，等于销毁所有已有 li 元素，连带清掉 JS 绑定的 click handler、已缓存的 DOM 引用、甚至正在播放的语音消息状态。
正确做法是用 DocumentFragment 批量创建新节点，再比对旧列表做最小化 DOM 更新：
- 维护一个本地数组
conversations，按时间倒序排列； - 遍历该数组，对每一项调用
createConversationItemEl(conversation)（返回已绑定事件、含 aria 的li）； - 用
Map缓存旧li的 key（如conversation.id）→ DOM 元素映射； - 插入新节点时，复用已存在的 DOM（如未读数变更只需改文本和 class），仅新增/删除必要项。
常见错误：
– 把时间格式化逻辑写在模板字符串里（`${formatTime(c.lastMsg.time)}`），导致每次渲染都执行函数；应提前计算好并存入数据对象；
– 用 querySelectorAll(".conversation-item") 重新取所有项来高亮当前会话，而不是直接操作缓存的 DOM 引用；
– 忘记清理旧 li 上的 event listener，造成内存泄漏。
移动端点击区域太小？用 CSS 隔离点击热区和视觉内容
移动端手指点击需要至少 44×44px 的响应区域，但设计稿里头像可能只有 32px，名字文字行高紧凑。硬撑尺寸会破坏 UI，正确解法是分离“可点击区域”和“可见内容”。
做法：给 li 设 padding: 12px 16px，内部用 display: flex 布局，头像、信息、时间各自独立；再用 ::before 伪元素撑开点击热区：
.conversation-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
}
这样整个 li 都是可点击区域，但视觉内容仍按设计稿大小渲染。同时必须加 touch-action: manipulation 到 li 上，防止 iOS Safari 300ms 延迟。
容易忽略的细节：
– 没给 li 设 min-height，导致极短会话（如只有系统通知）点击区塌陷；
– 用 pointer-events: none 在子元素上屏蔽干扰，但忘了在头像 img 上加 pointer-events: auto（否则头像点不了）；
– 横向滚动列表（如多联系人标签页）时，热区伪元素没随滚动更新位置，需配合 will-change: transform 或用 position: fixed 替代。
真正难的不是写出能显示的列表，而是让每一次点击都有确定性反馈、每一次滚动都不掉帧、每一个未读状态都同步准确——这些全藏在 HTML 结构选择和 CSS 层叠规则里，而不是 JS 逻辑行数里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
