HTML动态流制作进阶教程详解

常见错误是把所有数据硬编码进 HTML，导致改一条动态就得改源码；或者用 innerHTML 拼接字符串，结果 XSS 风险高、DOM 更新慢、时间戳格式混乱。

• 用语义化标签：每条动态用
  包裹，动作主体用

  ，内容区用

  ，时间戳放 （便于机器解析）
• CSS 时间线靠伪元素实现：::before 在
  左侧画竖线 + 圆点，避免额外 DOM 节点
• JS 渲染时别直接 element.innerHTML = htmlString，优先用 document.createElement + textContent（防 XSS），再用 append() 批量插入

如何让 Activity Feed 支持分页和无限滚动（不卡顿）

用户一拉到底就卡住，八成是每次滚动都触发了全量重绘，或者没做节流/取消重复请求。真正的“无限滚动”不是监听 scroll 后立刻发请求，而是检测底部可见区域 + 防抖 + 请求锁。

关键点不在“怎么加 loading”，而在“什么时候不该发请求”：

• 用 IntersectionObserver 监听最后一条
  是否进入视口，比 scrollTop + clientHeight >= scrollHeight 更精准、不触发重排
• 加个 isFetching 标志位：上一个请求还没回来时，新触发的观察回调直接 return
• 后端返回必须带 next_cursor 或 has_more: true，前端不能靠“当前条数 % 页面大小 === 0”来猜是否还有下一页
• 首次加载建议限制在 20 条以内；滚动加载每次最多 10 条——太多会明显感知到 DOM 批量插入延迟

为什么时间戳总显示错？怎么统一处理 ISO 8601 / Unix timestamp / 本地时区

后端给的时间字段五花八门："2024-05-20T14:30:00+08:00"、1716215400、甚至 "2024-05-20 14:30"，JS 的 new Date() 对空格分隔格式解析不可靠，直接导致 toLocaleTimeString() 显示成 00:00。

• 接收数据后第一件事：统一转成 Date 实例。推荐用 new Date(timestamp)，它能正确解析 ISO 字符串和秒级/毫秒级数字（注意 Unix timestamp 是秒，JS Date 要毫秒，所以乘 1000）
• 显示时别用 date.toString()——它依赖系统 locale 且含时区信息。用 date.toLocaleString('zh-CN', { month: 'short', day: 'numeric', hour: '2-digit', minute: '2-digit' })
• 如果要求“2 小时前”“昨天”这类相对时间，别手写计算逻辑，用 Intl.RelativeTimeFormat（现代浏览器支持），fallback 方案才用 moment.js 或 dayjs

图片、链接、@ 用户这些富文本内容怎么安全渲染

Activity Feed 里常有用户提交的带链接、图片、@username 的内容，直接 innerHTML 渲染等于开后门。XSS 不是理论风险——只要某条动态里有 ，整个页面就沦陷。

• 服务端应做基础过滤（如移除 on* 事件属性），但前端仍需二次防护：用 DOMPurify.sanitize(htmlString) 再塞进 innerHTML
• @ 用户需要正则提取 /@(\w+)/g，但替换时必须用 document.createTextNode 拼接文本节点 + document.createElement('a') 插入链接，不能拼 HTML 字符串
• 图片加载失败要兜底：，否则留白破坏卡片高度一致性
• 链接统一加 rel="noopener noreferrer"，防止新窗口劫持 window.opener

最易被忽略的是：Activity Feed 的“动态”本质是异步数据流，HTML 结构只是快照。任何依赖 DOM 状态（比如靠 querySelectorAll('.feed-item').length 判断是否到底）的逻辑，在并发加载、错误重试、状态回滚时都会出错。真正可靠的依据只有数据层的 hasMore 和 cursor。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~