HTML imports（）自Chrome 73起已被彻底移除，现代浏览器均不支持；应改用fetch+DOMParser按需解析HTML片段，提取目标节点并安全插入，避免副作用与性能陷阱。
HTML导入（import）早已被废弃，别再用它了
Chrome 73 起彻底移除了 HTMLImports API，所有现代浏览器都不再支持 <link rel="import">。如果你在调试时看到 Failed to load resource: net::ERR_UNKNOWN_URL_SCHEME 或控制台静默失败，基本就是这个原因。它不是“性能差”，而是根本跑不起来。
替代方案：用 fetch + DOMParser 手动解析 HTML 片段
这是目前最可控、兼容性最好（IE11+）、且能真正做“文件解析优化”的方式。关键不是加载快，而是避免整页重排、按需提取节点、跳过无用内容。
常见错误现象：
– 直接 innerHTML = responseText 导致脚本执行、样式污染、事件丢失
– 用 document.write 破坏页面生命周期
– 没过滤 <script></script> 或 <style></style>，引发重复执行或冲突
- 只取
内部内容（或指定id的区块），丢弃和全局副作用 - 用
DOMParser解析为文档对象，再用querySelector提取目标节点，比正则安全可靠 - 插入前调用
element.remove()清理旧节点，避免内存泄漏
fetch('widget.html')
.then(r => r.text())
.then(html => {
const parser = new DOMParser();
const doc = parser.parseFromString(html, 'text/html');
const widget = doc.querySelector('#main-content'); // 只取需要的部分
if (widget) {
document.getElementById('container').replaceChildren(widget);
}
});
import 曾经的性能陷阱：为什么它慢得不可接受
即使在还支持它的旧版 Chrome 中，<link rel="import"> 也会触发完整 HTML 解析、脚本执行、样式计算和布局——哪怕你只想要一个 <div>。它没有“按需解析”机制，也没有作用域隔离。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>每个 import 都是独立文档上下文，但共享主页面的 <code>window，导致变量污染风险高
href 必须是静态字符串async 和 defer 均不生效，阻塞渲染真要“优化 HTML 文件解析”，重点在服务端和构建阶段
客户端解析永远比不上服务端预处理。与其折腾已废弃的机制，不如把逻辑前移到构建或后端：
- 用构建工具（如 Vite、Webpack）将 HTML 片段编译为 JS 模块：
import MyWidget from './widget.html?raw' - 服务端返回 JSON 包裹的 HTML 字符串，并附带
content-type: application/json，规避 MIME 类型校验问题 - 对高频片段启用 ETag / Cache-Control，让
fetch复用强缓存，而非反复解析 - 避免在
DOMContentLoaded前发起大量 HTML fetch，改用requestIdleCallback或IntersectionObserver懒加载
最容易被忽略的一点：DOMParser 解析出的节点默认不继承当前文档的 CSS 作用域，class 和 id 会保留，但样式需显式引入或内联。别指望它自动套用主页面的 theme.css。
