S14-A02 · 可视化与内容渲染

适用读者：要做动画、代码高亮、Markdown 渲染或服务端 HTML 解析的人。
前置：S14-B02。
覆盖旧文：389(138 GSAP) 385(84 v-viewer) 384(72 highlight.js) 616(45 markdown-it) 633(151 jsoup) 357(42 Axios) = 532 点。
覆盖扩展：E-S14-011（动画选型）、E-S14-012（渲染链路）。
上一篇：S14-A01 · 前端部署与缓存策略
下一篇：S14-X01 · 前端八股与路线。

1. 一句话结论

渲染链路的每一层都在"把一种格式变成另一种格式"：Markdown → HTML（markdown-it）→ 高亮（highlight.js）→ 展示（v-viewer）。动画则要按"复杂度"选工具。

2. 渲染链路（E-S14-012）

Markdown 源文件
  → markdown-it 渲染 HTML
  → highlight.js 给代码块加样式
  → 前端展示（图片用 v-viewer 放大）

组件	职责	注意
markdown-it	MD → HTML	需配 `highlight` 钩子
highlight.js	代码着色	体积大（按需引入语言）
v-viewer	图片点击放大	依赖 viewerjs
jsoup（Java）	HTML 解析/清洗	服务端渲染或防 XSS 清洗

"为什么服务端也要 HTML 处理"：抓取第三方内容、或在写库前清洗富文本（jsoup 的 Safelist）。

3. 动画选型（E-S14-011）

需求	选
进场/退场（简单）	Animate.css（B04，零 JS）
时间轴/滚动联动/精确控制	GSAP
图表/数据可视化	专用图表库（ECharts 等）
微交互（hover/焦点）	CSS transition

判据："动画需要"编排"（多元素按时间轴）吗？" 需要 → GSAP；只是"出现一下" → CSS/Animate.css。

代价：GSAP 体积不小（数十 KB 级），只在需要的页面懒加载（J01）。

4. HTTP 客户端：Axios（A-357）

能力	说明
拦截器	统一加 token/处理 401
取消请求	`AbortController`
自动 JSON	免手动 `JSON.parse`

与原生 fetch 的关系：fetch 更轻，但拦截器/超时要自己写。判据："项目里请求多吗？" 多 → Axios。

5. 安全边界（贯穿全系列）

风险	防法
`v-html` 注入（B02）	净化（DOMPurify）/ 服务端清洗（jsoup）
Markdown 里的原始 HTML	`markdown-it` 配 `html: false`
图片外链	限制域名/代理

"Markdown 渲染也会 XSS"：因为 Markdown 允许内联 HTML——默认关掉 html 选项。

6. 五个误区

误区	真相
"Markdown 渲染天然安全"	允许内联 HTML 时有 XSS
"highlight.js 全量引入没关系"	体积大，按需引入语言
"GSAP 适合所有动画"	简单动画用 CSS 更划算
"Axios 比 fetch 更先进"	只是封装更全
"v-viewer 只是放大图片"	还处理手势/缩放/多图切换

7. 自检（架构师版）

渲染链路的四个环节？
什么时候用 GSAP、什么时候用 CSS？
markdown-it 的 XSS 风险怎么防？
Axios 相比 fetch 多什么？
服务端为什么要做 HTML 清洗？

8. 下一篇

S14-X01 · 前端八股与路线

最后一篇是附录索引，随后进入 S15（Linux 与运维）。

本篇属于系列《S14 · 前端与可视化》。旧文来源：A-389/385/384/616/633/357；扩展点 E-S14-011/012。