当 DOM 元素从网络流入时，如何附加它们？

Question

我有一个要填充为请求的 HTML 流的元素，而不是等待完整的响应。事实证明，这非常困难。

我尝试过的事情：

1。 milestoneNode.insertAdjacentHTML('beforebegin', text)

如果这行得通，那就可爱吧。不幸的是，具有古怪解析的元素破坏了它——例如<p> 和<table>。生成的 DOM 可以被描述为 Dada。

2。使用虚拟 DOM/DOM 更新管理库

Google 的incremental-dom 似乎最有希望，但它的patch() 操作总是从容器节点的开头重新启动。不知道如何将其“冻结”到位。

这也带来了至少在 JavaScript 中进行 HTML 标记化的包袱，并且 一些 必须进行实际的树构建，除非提供格式良好的 XHTML5。 （没有人这样做。）重新实现 浏览器的 HTML 解析器似乎是我大错特错的迹象。

3。 document.write()

我很绝望。具有讽刺意味的是，这个古老的妖怪几乎具有我需要的行为，没有“丢弃现有页面”的事情。

4。附加到一个字符串，然后定期innerHTMLing

打败了流式传输的要点，因为最终整个响应都保存在内存中。也有重复的序列化开销。

从好的方面来说，它确实有效。但肯定有更好的方法吗？

Answer 1

Jake Archibald figured out a silly hack to get this behavior in browsers today。他的示例代码比我说得更好：

// Create an iframe:
const iframe = document.createElement('iframe');

// Put it in the document (but hidden):
iframe.style.display = 'none';
document.body.appendChild(iframe);

// Wait for the iframe to be ready:
iframe.onload = () => {
  // Ignore further load events:
  iframe.onload = null;

  // Write a dummy tag:
  iframe.contentDocument.write('<streaming-element>');

  // Get a reference to that element:
  const streamingElement = iframe.contentDocument.querySelector('streaming-element');

  // Pull it out of the iframe & into the parent document:
  document.body.appendChild(streamingElement);

  // Write some more content - this should be done async:
  iframe.contentDocument.write('<p>Hello!</p>');

  // Keep writing content like above, and then when we're done:
  iframe.contentDocument.write('</streaming-element>');
  iframe.contentDocument.close();
};

// Initialise the iframe
iframe.src = '';

虽然<p>Hello!</p>被写入iframe，但它出现在父文档中！这是因为解析器维护了一堆打开的元素，新创建的元素被插入其中。我们移动 <streaming-element> 没关系，它可以正常工作。

Answer 2

您可以使用fetch()，处理Response.body，这是一个ReadableStream； TextDecoder()

let decoder = new TextDecoder();

function handleResponse(result) {
  element.innerHTML += decoder.decode(result.value);
  return result
}

fetch("/path/to/resource/")
.then(response => response.body.getReader())
.then(reader => {
  return reader.read().then(function process(result) {
    if (result.done) {
      console.log("stream done");
      return reader.closed;
    }
    return reader.read().then(handleResponse).then(process)
  })
  .then(function() {
    console.log("stream complete", element.innerHTML);
  })
  .catch(function(err) {
    console.log(err)
  })
});