用+做语义化时间轴最稳妥，因其天然匹配“有序事件流”语义，配合标签、reversed属性及伪元素实现竖线节点，兼顾可访问性、SEO与多端兼容。
用 <ol></ol> + <li> 做语义化时间轴最稳妥
html 本身没有 <timeline></timeline> 标签，但时间轴本质是「有序事件流」，<ol></ol> 天然匹配这个语义。用 <div> 堆砌反而丢失结构信息，影响可访问性和 seo。
<p>常见错误是直接套用 CSS 框架的“timeline 组件”结构，结果里面全是 <code><div> 嵌套，屏幕阅读器读不出顺序，打印时也容易错乱。
<ul>
<li>
<code><ol></ol> 的 reversed 属性能快速倒序（比如展示“最近 5 条动态”）
<li> 里用 <time></time> 包裹日期，浏览器能识别并可能触发日历提示<ol></ol> 设 list-style: none 后完全不管 fallback —— 纯文本环境下仍应保持数字序号可读CSS 实现垂直线+节点的关键样式组合
纯靠 Flex/Grid 排版容易在缩放或小屏下错位，核心是让时间线主干（竖线）脱离文档流，节点对齐靠 position: relative + left/transform 微调。
典型坑：用 border-left 给 <ol></ol> 加竖线，结果每项左边都多出一像素，节点悬停时左右抖动。
- 推荐竖线用
::before伪元素画在<ol></ol>上，宽度设2px，height: 100% - 节点圆点用
<li>::after</li>，position: absolute定位，避免影响文字流 - 移动端断点要重置竖线位置 —— 比如小屏改用顶部横线 + 左右堆叠内容，别硬撑垂直布局
时间轴内容过多时怎么避免滚动卡顿
长列表时间轴（比如 100+ 条历史记录）直接渲染会拖慢首屏，但又不能简单分页——用户需要上下滑动浏览连续时间流。
立即学习“前端免费学习笔记（深入）”；
关键不是“懒加载”，而是控制 DOM 节点数。原生 IntersectionObserver 比监听 scroll 事件更轻量。
- 初始只渲染视口内及上下各 3 项，其余用占位
<li class="placeholder"> - 监听
<li>进入视口时，用fetch()按需加载对应数据并替换占位符 - 避免给每个
<li>都绑IntersectionObserver实例 —— 共享一个实例，用observe()批量注册
IE11 下时间轴错位的三个硬伤点
IE11 不支持 gap、aspect-ratio、position: sticky，但时间轴常用到这些。不处理的话，竖线偏移、节点重叠、年份标签跑飞是常态。
别指望 autoprefixer，得手动降级方案。
-
flex-direction: column配合align-items: flex-start替代gap控制间距 - 节点圆点用
background+ 固定宽高，别依赖aspect-ratio做响应式缩放 - 竖线伪元素必须加
zoom: 1触发 IE hasLayout，否则在 zoom=125% 时消失
时间轴看着简单，真正要兼顾语义、性能、兼容性，每个节点的位置、尺寸、加载时机都得抠到像素和毫秒级。写完别急着测效果，先关掉 CSS 看纯 HTML 输出是否还保有逻辑顺序。
