必须校验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> 按需克隆注入。
立即学习“前端免费学习笔记（深入）”；
- 服务端返回的 HTML 片段，先塞进临时
template：const tmp = document.createElement('template'); tmp.innerHTML = htmlStr; - 取
tmp.content.cloneNode(true)，确保标签自动补全（比如<table><tr><td>自动加<tbody>） - 千万别直接
appendChild(template.content)，它会“搬走”内容，第二次调用返回空 Fragment - 含
<table>或<pre><code>的块，换用HTMLSemanticPreservingSplitter，否则跨行表格会被切碎
避免 Data-URI 图片拖垮解析
大量 data:image/xxx;base64,... 不是“能用就行”，而是解析阶段就卡住。Tokenizer 需把整个 base64 字符串当一个超长文本令牌处理，单个超过 64KB 就可能触发 Chromium 内部缓冲区重分配，带来 GC 暂停；100 个 20KB 的 Data-URI，实测解析耗时增加 300ms+。
更关键的是：loading="lazy" 对 Data-URI 完全无效——只要标签被解析进 DOM，解码就立即开始，哪怕它在视口外、display: none 或包在 <template> 里。
- 真要优化，放弃 Data-URI，改用网络图片 +
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 名和层级关系，进一步拖慢节奏。
浏览器对 <header>、<nav>、<section>、<article> 有解析路径优化，能预判结构意图，减少回溯确认开销。
- 把
<div class="main-header">替换为<header class="main-header">，类名保留用于样式兼容 - 禁止混用：不要写
<section><div><h2>，<h2>必须是<section>的直接子元素 - CMS 导出的 HTML 中大量
<div data-id="xxx">，若无 JS 绑定，就是纯解析负担，可批量移除 - 模板残留如
{{header}}、<!--#include-->，虽不报错，但会逐字扫描跳过，千行注释 ≈ 多花 5ms
<template>.content，或放任 Data-URI 在首屏存在，问题就会静默发生——控制台没报错，但用户已经卡住了。 
