固件升级频率低的设备需手动验证浏览器环境并降级工具配置：先用最小HTML获取userAgent和documentMode等特征值，再选用ES5+DOM Level 2兼容的重构方案，禁用现代API依赖，必要时采用sed或PowerShell手动替换。
固件升级频率低的设备（如工业控制面板、POS终端、嵌入式HMI）往往锁死浏览器内核版本，导致现代 HTML 重构工具直接报错或静默失效——这不是代码写错了，而是工具依赖的 DOM API 根本不存在。
查清目标设备真实运行时环境
别信厂商宣传页写的“支持 HTML5”，要拿到实际运行环境的 navigator.userAgent 和 document.documentMode（IE）或 self.chrome（Chromium 内核）等特征值：
- 用最小 HTML 文件（仅含
<script>console.log(navigator.userAgent, document.documentMode)</script>）在目标设备浏览器中打开，截图控制台输出 - 若返回
Mozilla/5.0 (Windows NT 6.1; Trident/7.0; ...)且document.documentMode === 7，说明是 IE11 兼容模式，禁用Promise、fetch、class语法 - 若返回
Mozilla/5.0 (X11; Linux armv7l) AppleWebKit/537.36 (KHTML, like Gecko)...但无chrome属性，大概率是 QtWebEngine 或 WebKitGTK 旧版，IntersectionObserver和ResizeObserver极可能未实现
选能降级到 ES5 + DOM Level 2 的重构工具
多数“HTML 重构工具”默认生成 ES6+ 语法和现代 DOM 方法，对固件冻结设备就是毒药。必须手动验证其输出是否可被目标环境执行：
-
html-minifier-terser需显式配置{ collapseWhitespace: true, minifyCSS: true, minifyJS: { compress: false, mangle: false, output: { ascii_only: true } } }，否则默认启用ecma: 2020导致箭头函数无法解析 -
purgecss的 CLI 版本若输出querySelectorAll(':is(.btn)')，老内核会直接抛SyntaxError；应改用--keyframes --font-face模式 + 手动白名单保留.btn, .btn-primary - 拒绝使用依赖
customElements.define()的工具（如某些 Svelte/Vite 插件），除非确认目标固件已启用dom.webcomponents.enabled（Firefox ESR）或about:flags#enable-experimental-web-platform-features（Chromium）
绕过固件限制的轻量兜底方案
当所有工具都报错时，最稳的方式是放弃“自动重构”，改用可预测、可审计的手动替换链：
立即学习“前端免费学习笔记（深入）”；
- 用
sed -i 's/<div class="container">/<section class="container">/g' *.html（Linux/macOS）或 PowerShell 的(Get-Content a.html) -replace '<div class="container">', '<section class="container">' | Set-Content a.html批量语义化替换，不触发 JS 解析 - 对
<img src="a.jpg">补srcset：用 Python 脚本读取同目录下a@2x.jpg文件是否存在，存在则插入srcset="a.jpg, a@2x.jpg 2x"，不依赖浏览器matchMediaAPI - 用原生
document.write('<style>...</style>')注入关键修复样式（如强制main宽度），比外部 CSS 文件加载更早介入渲染流程
固件不动，工具就得动——真正兼容的 HTML 重构不是“一键升级”，而是清楚知道哪一行输出会被哪个内核吃掉、哪条正则会因 DOM Level 差异崩掉。每次替换前，在目标设备上开一个空白页，console.log() 试跑关键 API，比看文档管用十倍。
