JS嵌入式挂件加载性能对比：DOM操作 vs Fetch拉取静态HTML方案

• A方案的加载速度远快于B方案
  核心原因是B方案需要多发起一次独立的HTTP请求拉取HTML文件，哪怕文件只有10KB，HTTP请求的DNS查询、TCP握手、服务器响应RTT这些固定开销都远高于JS执行DOM创建的耗时。10KB对应的DOM节点数量并不多，现代浏览器执行createElement、appendChild这类API的耗时基本在毫秒级，完全可以忽略。
  当然A方案也有明显缺点：纯DOM操作写起来繁琐，后期改动静态内容的时候要修改大量JS逻辑，维护成本很高。B方案除了多一次请求的性能损耗外，还可能在跨域嵌入第三方站点时遇到CORS限制，且你给出的示例代码存在语法问题：response.text()返回的是Promise，需要加await才能拿到实际的HTML字符串，直接赋值会把Promise对象写入DOM。

推荐你用静态模板字符串内置方案，兼顾性能和可维护性：
直接把所有静态HTML/CSS内容作为模板字符串写在你的挂件JS代码里，运行时直接赋值给innerHTML即可，示例代码：

// 所有静态内容直接写在模板字符串里，支持换行、内嵌样式
const widgetTpl = `
<style>
/* 你的全部CSS代码直接放在这里 */
li { color: #333; }
</style>
<ul>
  <li>Water</li>
  <!-- 其余所有HTML内容 -->
</ul>
`
document.getElementById("container").innerHTML = widgetTpl

这个方案的性能和A方案几乎一致，没有额外的网络请求，同时不需要写繁琐的DOM操作代码，维护静态内容的时候直接改模板字符串即可，非常匹配你的静态内容改动频率低、体积小的场景。
如果你的开发流程有构建环节，也可以把HTML/CSS单独拆成独立文件维护，构建时用构建工具（比如Webpack/Vite的对应loader）把HTML/CSS内容转成字符串打包进最终的JS文件，运行效果和手写模板字符串完全一致，开发体验更好。

内容的提问来源于stack exchange，提问作者jpy