Javascript 流式html/内容，但可以控制在已解析内容中插入哪个部分（不是以追加方式）_Javascript_Stream_Service Worker_App Shell

Javascript 流式html/内容，但可以控制在已解析内容中插入哪个部分（不是以追加方式）

javascript stream

Javascript 流式html/内容，但可以控制在已解析内容中插入哪个部分（不是以追加方式）,javascript,stream,service-worker,app-shell,Javascript,Stream,Service Worker,App Shell,我准备了一个基本的例子来说明我想要实现的目标。考虑下面的HTML。< /P> <html> <head></head> <body> <header> </header> <div class='container'></div> <footer></footer> </body> </html> 容器具有动态数据。所以我必须通

我准备了一个基本的例子来说明我想要实现的目标。考虑下面的HTML。< /P>

<html>
<head></head>
<body>
    <header> </header>
    <div class='container'></div>
    <footer></footer>
</body>
</html>

容器具有动态数据。所以我必须通过一个请求加载。我试着把它和其他的一起流出来。对于开发者来说，谷歌开发者的文章帮助很大。这是代码。此代码段未经测试

function pageStream(request) {
    const stream = new ReadableStream({
        start(controller) {
            const fetchHeader = caches.match('/top-shell.html')
            const fetchContainer = fetch('/container.html')
                .then(response => response)

            function push(stream) {
                const reader = stream.getReader();
                return reader.read().then(function process(result) {
                    if (result.done) return
                    controller.enqueue(result.value);
                    return reader.read().then(process);
                });
            }

            fetchHeader.then(response => push(response.body))
                .then(() => fetchContainer)
                .then(response => push(response.body))
                .then(() => controller.close())
        }
    });

    return new Response(stream, {
        headers: {
            'Content-Type': 'text/html; charset=utf-8'
        }
    });
}

self.addEventListener('fetch', event => {
    // Checks ... (assets excluded, only html)
    event.respondWith(pageStream(event.request));
});

我排除了一些部分和底部外壳，以发布更少的代码。它很好用

问题是，我不喜欢像那样分割html标签。我想有身体和html标记在该文件结束。然后有一个特定的点，在流式处理时容器将插入该点。像这样

<html>
<body>
    <header></header>
    <!-- {{ container here }} -->
    <!-- {{ footer here from cache }} -->
</body>
</html>

因此，该文件将从缓存加载。然后容器将开始流式处理并插入

{{container here}

。我可以编写一个简单的类似于jinja2的模板系统，这将完成这项工作。我希望所有这些都发生在服务人员内部。当然，我不希望用户看到这些花括号

我到达了一个点，可以使用

textdecker

解码已经流化的数据块，但无法向前移动，因为包括

容器在内的整个文件正在流化，我无法完全替换花括号。如果我删除了它，那么下一个块将插入到哪里
请原谅我的错误。非常困惑，对某些事情没有扎实的理解，无法单独处理
顺便说一句，任何人都可以添加ReadableStream
标记。我想知道为什么它不可用：/
<html>
<body>
    <header></header>
    <!-- {{ container here }} -->
    <!-- {{ footer here from cache }} -->
</body>
</html>