HTML导入（<link rel="import">）已被废弃，不能替代文件解析；合法路径是用户通过<input type="file">或拖放获取File实例，再用FileReader或Streams API解析。
HTML导入不能替代文件解析
HTML导入（<link rel="import">）早已被主流浏览器废弃，Chrome 73 起彻底移除，Firefox 和 Safari 从未支持。它本质是资源预加载机制，只负责把 HTML 文档作为文本或 DOM 片段引入，**不执行脚本、不解析表单数据、不处理编码转换、不校验结构合法性**——这些恰恰是文件解析（如读取 input[type="file"] 的 File 对象、用 FileReader 解析 CSV/JSON、或通过 XMLHttpRequest 获取并解析远程文件）的核心职责。
想绕过 File API 直接“导入”本地文件？不行
浏览器安全模型禁止网页脚本直接访问本地文件系统路径。所谓“导入”，必须依赖用户主动触发的 <input type="file"> 或拖放事件获取 File 实例，再交给 FileReader 或 Streams API 处理。试图用 <link href="file:///..."> 或 <iframe src="file:///"> 会触发 CORS 阻断或空响应，现代浏览器直接拒绝加载。
- 错误现象：
Failed to load resource: net::ERR_FILE_NOT_FOUND或Blocked a frame with origin "null" from accessing a cross-origin frame - 唯一合法入口：用户选择文件后得到的
event.target.files[0] - 替代方案只有服务端中转（如上传到后端再返回结构化数据），但那已不属于前端“导入”范畴
用 fetch() + Response.arrayBuffer() 替代老旧的 FileReader 解析大文件
对远程文件（如 JSON、CSV、二进制模型），fetch() 比 XMLHttpRequest 更简洁；配合 Response.arrayBuffer() 和 TextDecoder，能避免 FileReader 的回调地狱和内存拷贝开销，尤其适合 >10MB 文件。
fetch('/data.csv')
.then(res => res.arrayBuffer())
.then(buf => {
const decoder = new TextDecoder('utf-8');
const text = decoder.decode(buf);
return parseCSV(text); // 自定义解析逻辑
});
-
arrayBuffer()比text()更可控：避免 UTF-8 BOM 或换行符自动修正导致的解析偏移 - 注意
TextDecoder不支持 GBK 等编码，中文 Windows 文件需后端转 UTF-8 或前端用iconv-lite（需打包进 JS） - 流式处理大文件要用
res.body.getReader()，否则仍会全量加载进内存
HTML模板导入（<template>）和文件解析完全无关
有人混淆 <template> 标签的“导入”语义——它只是声明一段惰性 HTML 片段，document.importNode() 只是克隆 DOM 节点，和解析外部文件内容毫无关系。它解决的是组件复用问题，不是数据提取问题。
立即学习“前端免费学习笔记（深入）”；
- 典型误用：
<template id="data-tpl"><script>fetch("data.json")...</script></template>——<template>内脚本根本不会执行 - 正确做法：先完成文件解析，再用解析结果渲染
<template>中的结构 - 现代替代：直接用
customElements.define()封装解析逻辑，而非依赖模板静态内容
File 实例 → FileReader 或 Streams API → 解码 → 结构化处理。所有想绕过这一步的“导入”尝试，都会撞上浏览器沙箱的硬边界。 
