聊天泡泡DOM结构应使用flex容器包裹，每个泡泡设position:relative和min-height:24px，禁用box-shadow改用filter:drop-shadow()，发送方右对齐用margin-left:auto，接收方左对齐靠gap控制间距，每条消息需有唯一data-id。
聊天泡泡的 DOM 结构怎么写才不卡顿
直接用 <div> 套 <div> 堆泡泡，滚动几百条后输入框会明显延迟。核心问题是浏览器反复重排重绘，尤其当每个泡泡都带阴影、圆角、动画时。
关键做法是：所有泡泡统一用 display: flex 容器包裹，每个泡泡用 position: relative + min-height: 24px（避免文字换行导致高度抖动），禁用 box-shadow 改用 filter: drop-shadow()（GPU 加速更稳）。
- 发送方泡泡加
margin-left: auto实现右对齐，不要用float或绝对定位 - 接收方泡泡统一左对齐，不设 margin，靠父容器
gap: 8px控制间距 - 每条消息必须有唯一
data-id，方便后续增量渲染或删除，别用数组下标当 key
如何让气泡自动贴边且不重叠
“贴边”不是靠 text-align 解决的，而是靠 flex-direction: column 的主轴方向 + 子项 align-self 控制。重叠问题多出在时间戳或头像没预留空间，导致文字撑开后盖住相邻泡泡。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 泡泡内部用
display: flex; flex-direction: column;，头像/时间戳作为独立子元素，不嵌在文字<p>里 - 时间戳统一放底部，用
margin-top: auto推到底部，字体大小设为11px，颜色#999 - 文字区域用
word-break: break-word+max-width: 70%（发送方设max-width: 70%，接收方同理），防止超长链接或无空格字符串撑破布局
消息滚动到底部的可靠触发时机
scrollIntoView({ behavior: 'smooth' }) 在快速发多条消息时容易失效——因为 DOM 还没完成渲染，就调了滚动。更稳的方式是等框架完成一次渲染周期。
不同场景对应不同写法：
- 原生 JS：用
requestAnimationFrame(() => { messagesEnd.scrollIntoView() })，比setTimeout更准 - React：在
useEffect里操作，依赖项只写新消息 ID 数组，避免重复触发 - Vue：用
nextTick()包裹scrollIntoView，别在v-for的@updated钩子里调 - 务必加防抖：连续追加 3 条以上消息时，只在最后一条插入后滚动一次
移动端点击输入框时页面被顶起怎么压住
iOS Safari 有个经典 bug：软键盘弹出会把 <body> 整体上推，导致聊天记录区域错位甚至消失。这不是 CSS 能单靠 position: fixed 解决的。
真正有效的组合策略：
- 给聊天容器（含消息列表和输入框）整体套一层
position: fixed; bottom: 0; top: 0; width: 100%; - 输入框用
position: absolute; bottom: 0;，而不是放在 flex 容器底部 - 监听
focusin事件，动态给<html>加style="height: 100vh; overflow: hidden;"，失焦再恢复 - Android 需额外处理：检测
window.visualViewport?.height变化，小于原始高度时强制重置容器高度
最常被忽略的是：没关掉输入框的 scrolling 行为。务必给 <textarea> 加 style="resize: none; overflow-y: hidden;"，否则用户手动拉伸会破坏整个布局流。
