不能直接用code标签渲染整段日志，因其为行内元素不保留换行缩进，且未转义的HTML字符会导致解析错误或XSS；应使用pre+code组合，配合HTML实体转义与虚拟滚动优化性能。
为什么不能直接用 标签渲染整段日志</H3>
<p><code>code
是行内元素，天生不保留换行、缩进和连续空格。日志里常见的 2026-09-03 18:41:22 ERROR [user-service] Failed to connect DB 这类多字段文本，一旦塞进单个 标签，所有换行都会塌成空格，时间戳、等级、服务名挤在一行，根本没法读。</p>
<p>更危险的是，日志内容若含 <code><error>
或 & 这类字符，没转义就直接插进 code，浏览器会尝试解析标签，轻则格式错乱，重则 DOM 被截断甚至 XSS 漏洞。
-
code 适合标记单个函数名（如 append_log）、命令（如 tail -f）、变量（如 LOG_FILE）
- 整段日志必须用
pre + code 组合：前者保格式，后者表语义
- 任何来自后端的原始日志字符串，插入前必须 HTML 实体转义（
& → &，< → ，<code>> → >）
正确渲染日志行的最小 HTML 结构
code 适合标记单个函数名（如 append_log）、命令（如 tail -f）、变量（如 LOG_FILE）pre + code 组合：前者保格式，后者表语义& → &，< → ，<code>> → >）
每条日志应单独包裹为 pre + code，而不是把几千行日志全塞进一个 pre。这样既利于 CSS 控制单行样式（比如加 hover 背景、点击复制），也避免滚动卡顿。
示例结构：
立即学习“前端免费学习笔记（深入）”；
<div class="log-container"> <pre class="log-line"><code>2026-09-03 18:41:22 INFO [auth] User admin logged in from 192.168.1.100</code></pre> <pre class="log-line"><code>2026-09-03 18:41:25 WARN [gateway] Slow response: 1247ms for /api/users</code></pre> </div>
- 外层
div.log-container设固定高度 +overflow-y: auto，保证滚动容器可控 - 每个
pre.log-line加margin: 0和white-space: pre（防老浏览器兼容问题） - 不要给
code设display: block——它本就是行内元素，强行块级化可能破坏换行行为
高亮 ERROR/WARN 关键字时怎么避免 XSS
不能直接用 innerHTML 插入带 <span> 的高亮结果，否则日志里若含 <script>alert(1)</script> 就执行了。
安全做法分三步：
- 先用
textContent把原始日志写进code元素，确保所有 HTML 字符被原样显示 - 再取
textContent值，用正则匹配ERROR、WARN等关键词，生成已转义的 HTML 片段（例如把ERROR替换为<span class="level-error">ERROR</span>） - 最后用
innerHTML设置该片段——此时内容已无执行风险
关键点：两次操作分离，一次负责“存”，一次负责“标”，中间必须经过实体转义。
滚动性能差？不是 code 的问题，是加载方式错了
日志页面卡死，90% 情况下不是 code 或 pre 导致的，而是前端一次性请求并渲染了几万行。DOM 节点过多，浏览器重排重绘压力爆炸。
- 后端接口必须支持分页（如
/api/logs?offset=0&limit=100）或游标（?cursor=20260903184122） - 前端用
document.createDocumentFragment()批量创建pre节点，再一次性 append 到容器，别逐个appendChild - 超过 500 行时，考虑虚拟滚动：只渲染可视区域 ±20 行，监听
scroll动态替换内容
真正难的从来不是怎么显示，而是怎么让上万行日志不拖垮浏览器——code 只是最后一环，前面链路一塌糊涂，再规范的标签也救不了。
