Web Worker 如何不单独创建文件直接在当前代码中创建一、面试题1. 创建 Web Worker 时一定要单独创建一个 JavaScript 文件吗核心思路一句话不一定。Worker 不要求必须加载真实的.js文件只要提供一个浏览器能够加载的脚本 URL可以把内联代码交给 Worker 执行。把 Worker 代码写成字符串可以通过两种方式生成 URLBlob URLData URLWorker 代码字符串 ↓ ┌───────────────┐ │ Blob URL │ │ Data URL │ └───────┬───────┘ ↓ new Worker(url) ↓ 浏览器加载 Worker 脚本 ↓ Worker 独立线程执行面试时不要把重点放在“URL 是什么”上真正的核心是“把内联代码变成 Worker 可以加载的脚本资源”。二、方案一Blob URL这是实际开发中更常用的内联 Worker 方案。1. 完整示例// Worker 中需要执行的代码。// 这里使用字符串保存 Worker 脚本。constworkerCode// Worker 线程中监听主线程发送过来的消息 self.onmessage function (event) { const number event.data; // 执行一个比较耗时的计算 const result number * number; // 将计算结果发送回主线程 self.postMessage(result); };;// 将字符串转换成 Blob。// text/javascript 表示这个 Blob 中保存的是 JavaScript 代码。constblobnewBlob([workerCode],{type:text/javascript});// 根据 Blob 创建一个临时的 object URL。// 这个 URL 指向浏览器内存中的 Blob 数据。constworkerUrlURL.createObjectURL(blob);// 使用这个 URL 创建 Worker。// Worker 会把 Blob 中的内容当成 JavaScript 脚本执行。constworkernewWorker(workerUrl);// 主线程向 Worker 发送数据。worker.postMessage(10);// 接收 Worker 返回的结果。worker.onmessagefunction(event){console.log(Worker计算结果,event.data);};// Worker 不再使用后释放 Worker。worker.terminate();// object URL 不再使用后也应该释放。URL.revokeObjectURL(workerUrl);运行结果Worker计算结果1002. Blob URL 底层原理这里非常容易被面试官追问。Worker代码 ↓ JavaScript字符串 ↓ Blob ↓ URL.createObjectURL() ↓ blob:http://example.com/xxxx ↓ new Worker(workerUrl) ↓ 浏览器加载Blob中的JavaScript ↓ Worker执行2.1.Blob是什么Blob可以理解成浏览器中的一块不可变二进制数据。例如constblobnewBlob([console.log(hello worker)],{type:text/javascript});这里 Blob 中保存的就是console.log(hello worker)然后consturlURL.createObjectURL(blob);浏览器为这块 Blob 数据创建一个临时 URLblob:https://example.com/xxxx-xxxx-xxxx于是newWorker(url);就相当于告诉浏览器“请把这个 URL 对应的 JavaScript 资源作为 Worker 脚本加载。”3. 为什么URL.createObjectURL()可以做到核心原理URL.createObjectURL()并不是把 Blob 内容转换成真正的服务器地址。它只是建立URL ↓ 浏览器内部的 Blob 数据之间的映射。因此constblobnewBlob([console.log(hello)]);consturlURL.createObjectURL(blob);得到的blob:...是一个浏览器内部管理的临时资源地址。它不需要创建真实.js文件上传服务器发起 HTTP 请求获取文件所以特别适合动态生成 Worker 脚本。三、方案二Data URL第二种方式是直接把 Worker 代码放进 Data URL。例如// Worker代码直接写成字符串constworkerCodeself.onmessage function (event) { const result event.data * 2; self.postMessage(result); };;// 将代码拼接成 Data URL。// encodeURIComponent 可以避免代码中的特殊字符破坏 URL。constworkerUrldata:text/javascript;charsetutf-8,encodeURIComponent(workerCode);// 使用 Data URL 创建 Worker。constworkernewWorker(workerUrl);// 向 Worker 发送数据。worker.postMessage(10);// 接收 Worker 返回的数据。worker.onmessagefunction(event){console.log(结果,event.data);};// 不再使用时关闭 Worker。worker.terminate();输出结果20Data URL 到底是什么Data URL 的基本格式是data:[媒体类型][;参数][;base64],数据例如data:text/javascript,console.log(hello)也可以data:text/javascript;base64,Y29uc29sZS5sb2coJ2hlbGxvJyk所以Data URL ├── 可以直接放经过URL编码的数据 └── 也可以使用Base64编码的数据Base64 只是 Data URL 的一种数据编码形式而不是 Data URL 本身。四、Blob URL 和 Data URL 怎么选对比Blob URLData URL是否需要 Blob是否是否需要编码通常不需要手动编码通常需要 URL 编码或 Base64数据存储方式浏览器内部 BlobURL 本身携带数据大段代码更合适URL 会比较长可读性较好较差实际开发更常见适合简单场景实际建议一般优先使用 Blob URL。因为 Worker 代码比较长时Data URL 会导致 URL 本身变得非常长而 Blob URL 更适合承载较大的脚本内容。五、Blob URL 为什么需要revoke这是一个很容易被追问的边界问题。创建consturlURL.createObjectURL(blob);浏览器会维护blob URL ↓ Blob数据的引用。如果创建大量 Blob URL却一直不释放URL.createObjectURL(...)URL.createObjectURL(...)URL.createObjectURL(...)...可能造成不必要的资源占用。因此不再使用时URL.revokeObjectURL(url);释放这个 object URL。但是要注意一个细节不要刚创建 Worker 就立即constworkernewWorker(url);URL.revokeObjectURL(url);更稳妥的做法是确保 Worker 已经完成加载/不再需要这个 URL 后再释放。例如可以监听worker.addEventListener(error,(){URL.revokeObjectURL(url);});或者在 Worker 生命周期明确结束后释放。六、实际工程中为什么需要这个方案这才是这道题真正有价值的地方。普通项目main.js worker.js完全没有问题。例如constworkernewWorker(./worker.js);但是在工程化项目中源代码 ↓ 构建工具 ↓ 打包 ↓ 代码分割 ↓ 压缩 ↓ 资源处理 ↓ 部署Worker 文件需要被构建工具正确识别和处理。现代工程中更推荐使用构建工具原生的 Worker 支持而不是手动拼接 Blob URL。例如constworkernewWorker(newURL(./worker.js,import.meta.url),{type:module});这是现代工程化项目中非常重要的一种方式。七、工程化方案优先使用模块化 Worker如果项目使用现代构建工具推荐constworkernewWorker(newURL(./worker.js,import.meta.url),{type:module});worker.postMessage(hello);worker.onmessage(event){console.log(event.data);};worker.js// Worker线程代码self.onmessage(event){console.log(收到主线程消息,event.data);// 将结果发送回主线程self.postMessage(Worker处理完成);};这种方式的优势是源码阶段 main.js worker.js ↓ 构建工具识别 Worker 依赖 ↓ 自动处理路径 ↓ 代码分割 / 压缩 / 哈希 ↓ 生成最终资源Worker 是否单独生成文件是构建策略问题而不是 Worker API 的限制。八、什么时候使用 Blob Worker1. 动态生成 Worker例如constworkerCodeself.onmessage ({ data }) { self.postMessage(data * data); };;Worker 代码是运行时动态产生的。2. Demo / 工具代码例如在线代码编辑器浏览器实验工具动态脚本执行临时计算 Worker3. 某些特殊工程化场景构建工具无法方便处理动态 Worker 脚本时可以考虑 Blob URL。九、什么时候不应该使用 Blob Worker如果 Worker 是固定代码src/ ├── main.js └── worker.js直接newWorker(newURL(./worker.js,import.meta.url),{type:module});通常更合理。原因独立文件 ├── 类型检查 ├── 模块化 ├── 构建工具处理 ├── Source Map ├── 缓存 ├── 代码分割 └── 调试而 Blob Worker字符串 ↓ Blob ↓ Object URL会让类型检查调试模块依赖代码维护变得更加麻烦。十、边界场景Worker 代码需要 import 怎么办普通 WorkerconstworkernewWorker(./worker.js);如果需要模块constworkernewWorker(./worker.js,{type:module});工程化环境推荐constworkernewWorker(newURL(./worker.js,import.meta.url),{type:module});这样worker.js可以使用import{calculate}from./utils.js;self.onmessage(event){constresultcalculate(event.data);self.postMessage(result);};这也是为什么固定 Worker 代码优先使用独立模块文件。十一、结构化逻辑思维这道题可以按照下面的思路回答问题 │ ├─ new Worker() 是否必须传真实 .js 文件 │ │ │ └─ 不是 │ ├─ Worker 真正需要什么 │ │ │ └─ 一个能够加载 Worker 脚本的 URL │ ├─ 当前只有代码字符串怎么办 │ │ │ ├─ Blob URL │ │ │ └─ Data URL │ ├─ Blob URL 怎么实现 │ │ │ ├─ Worker代码 → 字符串 │ ├─ 字符串 → Blob │ ├─ Blob → URL.createObjectURL() │ └─ URL → new Worker() │ ├─ Data URL 怎么实现 │ │ │ ├─ Worker代码 │ ├─ URL编码 / Base64 │ └─ data:text/javascript,... → new Worker() │ └─ 工程项目怎么办 │ ├─ 固定Worker代码 │ └─ 优先独立 worker.js 构建工具处理 │ └─ 动态Worker代码 └─ Blob URL更合适十二、面试官追问Blob URL 和 Data URL 的本质区别是什么可以直接回答两者本质上都是把原本需要通过文件 URL 获取的 Worker 脚本转换成浏览器可以加载的 URL。区别是 Blob URL 指向浏览器内部的 Blob 数据而 Data URL 直接把数据编码在 URL 本身里面。实际开发中对于较大的 Worker 脚本我通常优先使用 Blob URL。十二、面试官追问为什么不能直接把字符串传给 Workerconstcodeconsole.log(hello);;newWorker(code);这里的code会被当成一个URL字符串而不是 JavaScript 源码。也就是说浏览器会尝试把console.log(hello);理解成 Worker 脚本地址而不是执行这段代码。所以必须先变成字符串 ↓ Blob URL / Data URL ↓ Worker脚本URL十三、面试官追问为什么 Worker 可以执行 Blob 中的 JavaScript因为newWorker(url)的核心语义不是“读取某个磁盘文件。”而是加载这个 URL 指向的脚本资源并在 Worker 全局环境中执行。因此只要 URL 能提供合法的 JavaScript 脚本资源就不一定非得是真实的.js文件。十四、最终面试版满分答案面试题创建 Web Worker 时一定要单独创建一个 JavaScript 文件吗不一定。new Worker()真正需要的是一个能够加载 Worker 脚本的 URL而不是必须存在一个真实的.js文件。如果不想单独创建 Worker 文件可以把 Worker 代码写成字符串再通过Blob URL或Data URL转换成脚本 URL。1. 核心流程Worker代码字符串 ↓ 生成脚本URL ↓ new Worker(url) ↓ 浏览器加载脚本 ↓ Worker线程执行2. Blob URL实际开发中更常用constcodeself.onmessage (event) { self.postMessage(event.data * 2); };;constblobnewBlob([code],{type:text/javascript});consturlURL.createObjectURL(blob);constworkernewWorker(url);worker.onmessage(event){console.log(event.data);// 20};worker.postMessage(10);// Worker不再使用后释放。// Object URL也应该在合适的生命周期结束后释放。worker.terminate();URL.revokeObjectURL(url);底层原理就是字符串 ↓ Blob ↓ URL.createObjectURL() ↓ blob:... ↓ new Worker()blob:URL 实际指向浏览器内部保存的 Blob 数据所以不需要真实的 Worker 文件。3. Data URL也可以直接把代码放进 Data URLconstcodeself.onmessage (event) { self.postMessage(event.data * 2); };;consturldata:text/javascript;charsetutf-8,encodeURIComponent(code);constworkernewWorker(url);worker.onmessage(event){console.log(event.data);};worker.postMessage(10);需要注意Data URL 不等于 Base64Base64 只是 Data URL 的一种编码方式。4. 工程化项目怎么选如果 Worker 代码是固定的现代工程中通常更推荐独立 Worker 文件constworkernewWorker(newURL(./worker.js,import.meta.url),{type:module});让构建工具负责 Worker 的依赖、代码分割、压缩和资源路径处理。如果 Worker 代码是运行时动态生成的则可以使用 Blob URL。一句话总结Worker 不要求必须对应一个真实的 JavaScript 文件本质上只需要一个可加载的脚本 URL固定代码优先使用独立模块文件动态代码可以通过 Blob URL 或 Data URL 内联创建其中 Blob URL 通常更实用。 Web Worker 如何不单独创建文件，直接在当前代码中创建？
Web Worker 如何不单独创建文件直接在当前代码中创建一、面试题1. 创建 Web Worker 时一定要单独创建一个 JavaScript 文件吗核心思路一句话不一定。Worker 不要求必须加载真实的.js文件只要提供一个浏览器能够加载的脚本 URL可以把内联代码交给 Worker 执行。把 Worker 代码写成字符串可以通过两种方式生成 URLBlob URLData URLWorker 代码字符串 ↓ ┌───────────────┐ │ Blob URL │ │ Data URL │ └───────┬───────┘ ↓ new Worker(url) ↓ 浏览器加载 Worker 脚本 ↓ Worker 独立线程执行面试时不要把重点放在“URL 是什么”上真正的核心是“把内联代码变成 Worker 可以加载的脚本资源”。二、方案一Blob URL这是实际开发中更常用的内联 Worker 方案。1. 完整示例// Worker 中需要执行的代码。// 这里使用字符串保存 Worker 脚本。constworkerCode// Worker 线程中监听主线程发送过来的消息 self.onmessage function (event) { const number event.data; // 执行一个比较耗时的计算 const result number * number; // 将计算结果发送回主线程 self.postMessage(result); };;// 将字符串转换成 Blob。// text/javascript 表示这个 Blob 中保存的是 JavaScript 代码。constblobnewBlob([workerCode],{type:text/javascript});// 根据 Blob 创建一个临时的 object URL。// 这个 URL 指向浏览器内存中的 Blob 数据。constworkerUrlURL.createObjectURL(blob);// 使用这个 URL 创建 Worker。// Worker 会把 Blob 中的内容当成 JavaScript 脚本执行。constworkernewWorker(workerUrl);// 主线程向 Worker 发送数据。worker.postMessage(10);// 接收 Worker 返回的结果。worker.onmessagefunction(event){console.log(Worker计算结果,event.data);};// Worker 不再使用后释放 Worker。worker.terminate();// object URL 不再使用后也应该释放。URL.revokeObjectURL(workerUrl);运行结果Worker计算结果1002. Blob URL 底层原理这里非常容易被面试官追问。Worker代码 ↓ JavaScript字符串 ↓ Blob ↓ URL.createObjectURL() ↓ blob:http://example.com/xxxx ↓ new Worker(workerUrl) ↓ 浏览器加载Blob中的JavaScript ↓ Worker执行2.1.Blob是什么Blob可以理解成浏览器中的一块不可变二进制数据。例如constblobnewBlob([console.log(hello worker)],{type:text/javascript});这里 Blob 中保存的就是console.log(hello worker)然后consturlURL.createObjectURL(blob);浏览器为这块 Blob 数据创建一个临时 URLblob:https://example.com/xxxx-xxxx-xxxx于是newWorker(url);就相当于告诉浏览器“请把这个 URL 对应的 JavaScript 资源作为 Worker 脚本加载。”3. 为什么URL.createObjectURL()可以做到核心原理URL.createObjectURL()并不是把 Blob 内容转换成真正的服务器地址。它只是建立URL ↓ 浏览器内部的 Blob 数据之间的映射。因此constblobnewBlob([console.log(hello)]);consturlURL.createObjectURL(blob);得到的blob:...是一个浏览器内部管理的临时资源地址。它不需要创建真实.js文件上传服务器发起 HTTP 请求获取文件所以特别适合动态生成 Worker 脚本。三、方案二Data URL第二种方式是直接把 Worker 代码放进 Data URL。例如// Worker代码直接写成字符串constworkerCodeself.onmessage function (event) { const result event.data * 2; self.postMessage(result); };;// 将代码拼接成 Data URL。// encodeURIComponent 可以避免代码中的特殊字符破坏 URL。constworkerUrldata:text/javascript;charsetutf-8,encodeURIComponent(workerCode);// 使用 Data URL 创建 Worker。constworkernewWorker(workerUrl);// 向 Worker 发送数据。worker.postMessage(10);// 接收 Worker 返回的数据。worker.onmessagefunction(event){console.log(结果,event.data);};// 不再使用时关闭 Worker。worker.terminate();输出结果20Data URL 到底是什么Data URL 的基本格式是data:[媒体类型][;参数][;base64],数据例如data:text/javascript,console.log(hello)也可以data:text/javascript;base64,Y29uc29sZS5sb2coJ2hlbGxvJyk所以Data URL ├── 可以直接放经过URL编码的数据 └── 也可以使用Base64编码的数据Base64 只是 Data URL 的一种数据编码形式而不是 Data URL 本身。四、Blob URL 和 Data URL 怎么选对比Blob URLData URL是否需要 Blob是否是否需要编码通常不需要手动编码通常需要 URL 编码或 Base64数据存储方式浏览器内部 BlobURL 本身携带数据大段代码更合适URL 会比较长可读性较好较差实际开发更常见适合简单场景实际建议一般优先使用 Blob URL。因为 Worker 代码比较长时Data URL 会导致 URL 本身变得非常长而 Blob URL 更适合承载较大的脚本内容。五、Blob URL 为什么需要revoke这是一个很容易被追问的边界问题。创建consturlURL.createObjectURL(blob);浏览器会维护blob URL ↓ Blob数据的引用。如果创建大量 Blob URL却一直不释放URL.createObjectURL(...)URL.createObjectURL(...)URL.createObjectURL(...)...可能造成不必要的资源占用。因此不再使用时URL.revokeObjectURL(url);释放这个 object URL。但是要注意一个细节不要刚创建 Worker 就立即constworkernewWorker(url);URL.revokeObjectURL(url);更稳妥的做法是确保 Worker 已经完成加载/不再需要这个 URL 后再释放。例如可以监听worker.addEventListener(error,(){URL.revokeObjectURL(url);});或者在 Worker 生命周期明确结束后释放。六、实际工程中为什么需要这个方案这才是这道题真正有价值的地方。普通项目main.js worker.js完全没有问题。例如constworkernewWorker(./worker.js);但是在工程化项目中源代码 ↓ 构建工具 ↓ 打包 ↓ 代码分割 ↓ 压缩 ↓ 资源处理 ↓ 部署Worker 文件需要被构建工具正确识别和处理。现代工程中更推荐使用构建工具原生的 Worker 支持而不是手动拼接 Blob URL。例如constworkernewWorker(newURL(./worker.js,import.meta.url),{type:module});这是现代工程化项目中非常重要的一种方式。七、工程化方案优先使用模块化 Worker如果项目使用现代构建工具推荐constworkernewWorker(newURL(./worker.js,import.meta.url),{type:module});worker.postMessage(hello);worker.onmessage(event){console.log(event.data);};worker.js// Worker线程代码self.onmessage(event){console.log(收到主线程消息,event.data);// 将结果发送回主线程self.postMessage(Worker处理完成);};这种方式的优势是源码阶段 main.js worker.js ↓ 构建工具识别 Worker 依赖 ↓ 自动处理路径 ↓ 代码分割 / 压缩 / 哈希 ↓ 生成最终资源Worker 是否单独生成文件是构建策略问题而不是 Worker API 的限制。八、什么时候使用 Blob Worker1. 动态生成 Worker例如constworkerCodeself.onmessage ({ data }) { self.postMessage(data * data); };;Worker 代码是运行时动态产生的。2. Demo / 工具代码例如在线代码编辑器浏览器实验工具动态脚本执行临时计算 Worker3. 某些特殊工程化场景构建工具无法方便处理动态 Worker 脚本时可以考虑 Blob URL。九、什么时候不应该使用 Blob Worker如果 Worker 是固定代码src/ ├── main.js └── worker.js直接newWorker(newURL(./worker.js,import.meta.url),{type:module});通常更合理。原因独立文件 ├── 类型检查 ├── 模块化 ├── 构建工具处理 ├── Source Map ├── 缓存 ├── 代码分割 └── 调试而 Blob Worker字符串 ↓ Blob ↓ Object URL会让类型检查调试模块依赖代码维护变得更加麻烦。十、边界场景Worker 代码需要 import 怎么办普通 WorkerconstworkernewWorker(./worker.js);如果需要模块constworkernewWorker(./worker.js,{type:module});工程化环境推荐constworkernewWorker(newURL(./worker.js,import.meta.url),{type:module});这样worker.js可以使用import{calculate}from./utils.js;self.onmessage(event){constresultcalculate(event.data);self.postMessage(result);};这也是为什么固定 Worker 代码优先使用独立模块文件。十一、结构化逻辑思维这道题可以按照下面的思路回答问题 │ ├─ new Worker() 是否必须传真实 .js 文件 │ │ │ └─ 不是 │ ├─ Worker 真正需要什么 │ │ │ └─ 一个能够加载 Worker 脚本的 URL │ ├─ 当前只有代码字符串怎么办 │ │ │ ├─ Blob URL │ │ │ └─ Data URL │ ├─ Blob URL 怎么实现 │ │ │ ├─ Worker代码 → 字符串 │ ├─ 字符串 → Blob │ ├─ Blob → URL.createObjectURL() │ └─ URL → new Worker() │ ├─ Data URL 怎么实现 │ │ │ ├─ Worker代码 │ ├─ URL编码 / Base64 │ └─ data:text/javascript,... → new Worker() │ └─ 工程项目怎么办 │ ├─ 固定Worker代码 │ └─ 优先独立 worker.js 构建工具处理 │ └─ 动态Worker代码 └─ Blob URL更合适十二、面试官追问Blob URL 和 Data URL 的本质区别是什么可以直接回答两者本质上都是把原本需要通过文件 URL 获取的 Worker 脚本转换成浏览器可以加载的 URL。区别是 Blob URL 指向浏览器内部的 Blob 数据而 Data URL 直接把数据编码在 URL 本身里面。实际开发中对于较大的 Worker 脚本我通常优先使用 Blob URL。十二、面试官追问为什么不能直接把字符串传给 Workerconstcodeconsole.log(hello);;newWorker(code);这里的code会被当成一个URL字符串而不是 JavaScript 源码。也就是说浏览器会尝试把console.log(hello);理解成 Worker 脚本地址而不是执行这段代码。所以必须先变成字符串 ↓ Blob URL / Data URL ↓ Worker脚本URL十三、面试官追问为什么 Worker 可以执行 Blob 中的 JavaScript因为newWorker(url)的核心语义不是“读取某个磁盘文件。”而是加载这个 URL 指向的脚本资源并在 Worker 全局环境中执行。因此只要 URL 能提供合法的 JavaScript 脚本资源就不一定非得是真实的.js文件。十四、最终面试版满分答案面试题创建 Web Worker 时一定要单独创建一个 JavaScript 文件吗不一定。new Worker()真正需要的是一个能够加载 Worker 脚本的 URL而不是必须存在一个真实的.js文件。如果不想单独创建 Worker 文件可以把 Worker 代码写成字符串再通过Blob URL或Data URL转换成脚本 URL。1. 核心流程Worker代码字符串 ↓ 生成脚本URL ↓ new Worker(url) ↓ 浏览器加载脚本 ↓ Worker线程执行2. Blob URL实际开发中更常用constcodeself.onmessage (event) { self.postMessage(event.data * 2); };;constblobnewBlob([code],{type:text/javascript});consturlURL.createObjectURL(blob);constworkernewWorker(url);worker.onmessage(event){console.log(event.data);// 20};worker.postMessage(10);// Worker不再使用后释放。// Object URL也应该在合适的生命周期结束后释放。worker.terminate();URL.revokeObjectURL(url);底层原理就是字符串 ↓ Blob ↓ URL.createObjectURL() ↓ blob:... ↓ new Worker()blob:URL 实际指向浏览器内部保存的 Blob 数据所以不需要真实的 Worker 文件。3. Data URL也可以直接把代码放进 Data URLconstcodeself.onmessage (event) { self.postMessage(event.data * 2); };;consturldata:text/javascript;charsetutf-8,encodeURIComponent(code);constworkernewWorker(url);worker.onmessage(event){console.log(event.data);};worker.postMessage(10);需要注意Data URL 不等于 Base64Base64 只是 Data URL 的一种编码方式。4. 工程化项目怎么选如果 Worker 代码是固定的现代工程中通常更推荐独立 Worker 文件constworkernewWorker(newURL(./worker.js,import.meta.url),{type:module});让构建工具负责 Worker 的依赖、代码分割、压缩和资源路径处理。如果 Worker 代码是运行时动态生成的则可以使用 Blob URL。一句话总结Worker 不要求必须对应一个真实的 JavaScript 文件本质上只需要一个可加载的脚本 URL固定代码优先使用独立模块文件动态代码可以通过 Blob URL 或 Data URL 内联创建其中 Blob URL 通常更实用。