HTML5技术

网页的分段传输与渲染 - 空一座旧城,守一个旧人

字号+ 作者:H5之家 来源:H5之家 2017-12-16 09:15 我要评论( )

网页的分段传输与渲染 最近遇到这方面知识,就自己找了一些资料,进行了一些总结 什么是分段传输? 当引入了一个http首部。这个首部标识了实体采用chunked编码传输,chunked编码可以将实体分块儿进行传输,并且chunked编码的每一块内容都会自标识长度。这给

网页的分段传输与渲染

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

什么是分段传输?

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

如何分段传输?

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

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

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

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

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

  • bigpipe

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

    bigpipe的适用场景

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

    posted on

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 移动端网页宽度值(未加meta viewport标签) - 孟繁贵

      移动端网页宽度值(未加meta viewport标签) - 孟繁贵

      2017-06-29 10:01

    • 微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5+jQuery) - 一个自由的出版人

      微信公众平台网页开发实战--3.利用JSSDK在网页中获取地理位置(HTML5

      2017-06-20 10:00

    • 微信公众平台网页开发实战--2.从手机相册中选照片然后分享 - 一个自由的出版人

      微信公众平台网页开发实战--2.从手机相册中选照片然后分享 - 一个自

      2017-06-17 11:00

    • 通用网页调用本地应用程序方案(windows平台) - 小龙女先生

      通用网页调用本地应用程序方案(windows平台) - 小龙女先生

      2017-05-16 13:00

    网友点评