网页中分段传输与渲染的详细讲解

最近遇到这方面知识，就自己找了一些资料，进行了一些总结

什么是分段传输？

当引入了一个http首部。这个首部标识了实体采用chunked编码传输，chunked编码可以将实体分块儿进行传输，并且chunked编码的每一块内容都会自标识长度。这给了web开发者一个启示，如果需要多个数据，而多个数据均返回较慢的话。可以处理完一块就返回一块，让浏览器尽早的接收到html，可以先行渲染。

如何分段传输？

我们既然知道了可以将网页一块儿一块儿的传送，那么我们就可以将网页进行改造，拿好一块儿需要的数据，便渲染一块儿，无需等待，而模板方面，自然也要进行拆分，供服务端拿一块儿的模板，就渲染一块儿出去

最后我们会发现：总的处理时长不变，但是采用了分段输出的网页，可以尽早的将一段HTML渲染到客户端，这样用户可以使用先到达的部分。另一方面，尽早的页面反馈，也可以减少用户等待的焦躁情绪。

综上，使用此种优化方法，可以提速网页的渲染速度。

分段传输适用场景

1、当页面的某些后端处理比较耗时的时候，可以试试采用分段传输，可以渲染一部分，就发送一部分到客户端，虽然总时长不变，但是浏览器在全部传输完之前不会处于干等状态。可以尽早的渲染并给予用户反馈。

2、后端处理渲染的数据，上方较快，下方较慢的情况(可以先行渲染上方较快的部分)

bigpipe

把最慢的部分放置于底部传过来就好了。于是有了一种加载思路，便是使用js回填的方式，后端可以先渲染快的模板，然后再渲染慢的模板。我们可以把页面上所有的块儿都架空，然后并行渲染，谁快谁就先渲染回填js。这样就可以达到并行且先到先渲染的目的.

bigpipe的适用场景

1 后端有较慢的数据处理，阻塞住了页面的情况下，且最慢的部分不是在网页的最后。(可以把最慢的部分变为回填)
2 后端有多块儿数据要并行处理的情况下(你也不知道哪块儿先回来了，所以先渲染一个架子。对于并行的请求，先回来的先flush回填)

以上就是网页中分段传输与渲染的详细讲解的详细内容，更多请关注小闻网其它相关文章！