javascript - Javascript 小部件性能：获取静态 HTML/JS 文件 - 与 DOM 操作

Question

我正在构建一个 JS 可嵌入小部件。

HTML/CSS 是静态的，不会有太大变化，大约 10 KB。

加载它的最快方法是什么？

(A) DOM 操作，例如

var node = document.createElement("LI");
var textnode = document.createTextNode("Water");
node.appendChild(textnode); 
document.getElementById("container").appendChild(node);  
// repeat the above for all other HTML elements here

(B) Fetch + innerHTML，例如

const response = await fetch('allTheHTML.html', {
        method: 'GET', 
        headers: { 'Content-Type': 'text/html' }
    });
    document.getElementById("container").innerHTML = response.text()

还是……其他方法？

标签： javascript