html 流式传输下是如何渲染页面的

得益于浏览器对于html标签的自动补全策略(这是一个非常复杂的过程),浏览器可以根据接收到的部分html内容自动闭合标签然后进行渲染,所以即使在流式传输下浏览器开始得到的html内容是不完整的,但是会进行自动补全后渲染。当接收到剩下的内容时如果对之前已经渲染的内容有影响,那么会重新渲染之前的内容。

也并不是所有标签都适合自动补全,例如<script>标签如果自动补全了,那么此时script部分可能是不完整的语法,直接执行会报错,那么对于<script>标签就会等到剩下的内容完整了以后再执行<script>内容,除了这个以外还有其他的情况是需要等待更完整的内容之后才会进行渲染的,这里不多列举了。

你可以查看这个演示项目:👉🏻demo-html-stream