必须校验content-type和长度再解析html，避免将非html内容当html解析导致内存爆满或卡死；超长html需分块解析注入，禁用data-uri图片，优先使用语义化标签降低dom构建开销。
解析前必须校验 Content-Type 和长度
直接调用 DOMParser.parseFromString 或 Gumbo 解析超长响应体，十有八九会爆内存或卡死，根本原因不是 HTML 太长，而是你把 PDF、ZIP、JSON 甚至二进制流当 HTML 解了。浏览器和解析器不会主动拒绝非 HTML 内容，只会硬啃。
实操建议：在发起请求后、调用解析前，必须检查 webResponse.ContentType 是否匹配 text/html 或 application/xhtml+xml（忽略大小写和 charset 参数）；若不匹配，直接跳过解析。
-
ContentLength不为 null 且 > 1048576（1MB），强制跳过 -
ContentLength为 null（如 chunked 编码），需设置流读取超时 + 字节计数器，累计读取超 1MB 后主动终止 - 用正则粗筛可疑输入：
/<!--[\s\S]{10000,}?-->/，命中即截断或拒入
超长 HTML 字符串不能直接 innerHTML = str
把几 MB 的 HTML 字符串直接赋给 element.innerHTML，等于把整个 DOM 构建、样式计算、布局全压进一次同步调用。Chrome 很可能抛 RangeError: Maximum call stack size exceeded，或主线程卡死数秒——这不是 JS 写得差，是浏览器机制决定的。
正确做法是分块解析注入：DOMParser 先转成文档，再按语义结构切片，用 <template></template> 按需克隆注入。
- 服务端返回的 HTML 片段，先塞进临时
template：const tmp = document.createElement('template'); tmp.innerHTML = htmlStr; - 取
tmp.content.cloneNode(true)，确保标签自动补全（比如<table><tr><td> 自动加 <code><tbody>） <li>千万别直接 <code>appendChild(template.content)，它会“搬走”内容，第二次调用返回空 Fragment - 含
<table> 或 <code><pre class="brush:php;toolbar:false;"><code></code> 的块，换用 <code>HTMLSemanticPreservingSplitter</code>，否则跨行表格会被切碎 <h3>避免 Data-URI 图片拖垮解析</h3> <p>大量 <code>data:image/xxx;base64,...</code> 不是“能用就行”，而是解析阶段就卡住。Tokenizer 需把整个 base64 字符串当一个超长文本令牌处理，单个超过 64KB 就可能触发 Chromium 内部缓冲区重分配，带来 GC 暂停；100 个 20KB 的 Data-URI，实测解析耗时增加 300ms+。</p> <p>更关键的是：<code>loading="lazy"</code> 对 Data-URI 完全无效——只要标签被解析进 DOM，解码就立即开始，哪怕它在视口外、<code>display: none</code> 或包在 <code><template></template></code> 里。</p> </pre> <ul> <li>真要优化，放弃 Data-URI，改用网络图片 + <code>fetchpriority="high"（首屏）或low（非首屏） - 确保服务端支持 Brotli + HTTP/2，压缩率和传输效率远高于内联 base64
- 若必须保留内联，限制单个 Data-URI 长度，前端预处理时对超长值截断并打日志
DOM 节点超千时别堆 div，用语义标签减负
DOM 节点数超千导致卡顿，根源不在 HTML “不规范”，而在浏览器构建 DOM 树时线性耗时上升。每多 100 个节点，解析就多花 20–40ms；而一堆无意义的 <div class="wrapper"><div class="inner"><div class="content">，会让解析器反复比对 class 名和层级关系，进一步拖慢节奏。
<p>浏览器对 <code><header></header>、<nav></nav>、<section></section>、<article></article> 有解析路径优化，能预判结构意图，减少回溯确认开销。
- 把
<div class="main-header"> 替换为 <code><header class="main-header"></header>，类名保留用于样式兼容 - 禁止混用：不要写
<section><div> <h2>，<code><h2></h2>必须是<section></section>的直接子元素 - CMS 导出的 HTML 中大量
<div data-id="xxx">，若无 JS 绑定，就是纯解析负担，可批量移除 <li>模板残留如 <code>{{header}}、<!--#include-->，虽不报错，但会逐字扫描跳过，千行注释 ≈ 多花 5ms
解析超长页面最易被忽略的一点：不是“怎么快点解析”，而是“怎么不让浏览器一次性扛全部”。校验、切片、语义化、替换内联资源，每一步都在把压力从主线程上卸下来。一旦漏掉其中一环，比如忘了 clone
<template>.content</template>，或放任 Data-URI 在首屏存在，问题就会静默发生——控制台没报错，但用户已经卡住了。
