美文网首页日常刻书
渐进式页面渲染思想:Bigpipe

渐进式页面渲染思想:Bigpipe

作者: F_wind | 来源:发表于2021-01-12 09:40 被阅读0次

《深入浅出 Node.js》阅读随笔

Web 应用中页面渲染的大概过程:服务器端的页面渲染包含内容响应和视图渲染两部分。前端通过异步方式向服务器发出 http 请求,然后获取报文内容,包括:html 模版框架、页面中需要展示的各种数据等。然后使用呈现容器浏览器将报文内容解析后填充进去,最终就把页面内容展示出来了。
存在的问题:由于 JavaScript 是通过异步方式来执行的,因此,最终的呈现结果所花费的时间,取决于多个 http 请求中响应最慢的那一个,等所有请求都完成响应之后,页面才能正常展现出来了,在整个加载过程中,用户可以看到的,只是一个白色的空白页面(或者 UI 加载/等待文案等),体验不是很友好。
隆重有请 Bigpipe:此处先强调一下:是 Bigpipe 而不是流调试工具 Bagpipe。Bigpipe 是 FackBook 提出的一种前端渐进式渲染思想。Bigpipe 通过渐进的方式,首先将加载最快的 html 页面模版框架展现出来,然后在接下来的异步内容请求过程中,逐次优先展现已完成请求响应的数据内容,直到加载完毕。按照 Bigpipe 优化后的页面,在给用户呈现时,就会是这样:首先映入眼帘的是一个短暂没有数据的页面,然后页面内容逐渐显示出来。使用体验要比之前的空白等待好很多。

相关文章

  • 渐进式页面渲染思想:Bigpipe

    《深入浅出 Node.js》阅读随笔 Web 应用中页面渲染的大概过程:服务器端的页面渲染包含内容响应和视图渲染两...

  • 前端性能-放脚本在页面底部

    把脚本放到页面底部 脚本会阻塞渐进式渲染,最好把脚本放到页面的底部,这样能确保页面渲染正常进行并且获取一个更好的并...

  • 文件缓存(模板缓存)

    文件缓存(模板缓存) 从页面片段缓存到 facebook 的 BigPipe 技术 将页面划分成一个个小块 利用 ...

  • 2019-05-01 初识 React

    原生JS或JQ思想:内容放入页面,用JS取值,做处理,回传页面重复以上 React思想:声明,更改变量渲染,局部更...

  • Vue01

    一、认识Vue 定义:一个构建数据驱动的 web 界面的渐进式框架 优点: 1、可以完全通过客户端浏览器渲染页面,...

  • nodejs Bigpipe 页面分割加载笔记

    Bigpipe页面分割 项目中需要打印日志文件,因文件过大所以分割加载,以便将来改为持续输出加载 1、 在使用aw...

  • 使用 BigPipe 实现长链接

    BigPipe 简介 2010年的 Facebook 提出 BigPipe 技术,通过将站点分解为多个 pagel...

  • BigPipe

    BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过We...

  • 分块加载技术——nodejs-bigpipe-demo

    科普Node.js Bigpipe

  • 前端性能初步优化

    性能优化有两个方向 优化页面渲染 减小页面体积,提升网络加载 优化页面渲染 对于优化页面渲染可以进行如下方案来进行...

网友评论

    本文标题:渐进式页面渲染思想:Bigpipe

    本文链接:https://www.haomeiwen.com/subject/didsaktx.html