首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >node网页分段渲染与bigpipe(一)

node网页分段渲染与bigpipe(一)

作者头像
IMWeb前端团队
发布于 2017-12-29 10:34:35
发布于 2017-12-29 10:34:35
89900
代码可运行
举报
文章被收录于专栏:IMWeb前端团队IMWeb前端团队
运行总次数:0
代码可运行

页面渲染,通常来说分为前端渲染以及后端渲染。前端渲染指的是服务端返回html框架以及模版,前端通过ajax异步请求拉取数据渲染模版,并动态修改dom,形成最终页面。服务端渲染则是服务端通过在后端拉取数据以及后端模版渲完整页面,并返回到客户端。2种方法各有好处,后端渲染带来的则是首屏时间的提高,减少请求次数,利于SEO等好处。但是传统后端直出渲染需要等到整个网页渲染完成,才能返回到客户端。假如某个区块拉取数据比较慢,影响了渲染的速度,那对于用户来说,等待的时候也会跟着变长对于后端渲染能否跟前端ajax渲染一样,分块分区域传统的服务端直出渲染,下面将提供一种解决方案-网页分段渲染。

首先我们先看下传统的渲染方式:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const http = require("http");
const fs = require("fs");
var  tpl1 = '<!DOCTYPE html><html><head><title>测试render</title></head><body>helloword<p>$data1</p>';
var tpl2 = '<p>$data2</p></body></html>';
var html = '';

var server = http.createServer((req, res)=>{
  if(req.url!=="/favicon.ico"){
      res.writeHead(200, {
         'Content-Type' : 'text/html'
      });
      getDataOne((data1) => {
          getDataTwo((data2) => {
              res.end(tpl1.replace(/\$data1/g, data1) + tpl2.replace(/\$data2/g, data2));
          })
      });
  }
  }).listen(3000, '127.0.0.1');


function getDataOne(fn){
    setTimeout(() => {
         fn('11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
   }, 5000);
  }

  function getDataTwo(fn){
     setTimeout(() => {
          fn('22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222');
      }, 5000);
  }

上面我们提供了一个简单的例子,通过访问http://127.0.0.1:3000 返回一个页面。其中渲染页面时,有2个耗时5秒的操作,可以假设为IO或者数据拉取。这个时候我们观察返回页面的时间是10秒,也就是说用户看到页面需要10秒钟。

下面我们通过改造后端渲染方式,改为分段渲染。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
const http = require("http");
const fs = require("fs");

var server = http.createServer((req, res)=>{
    if(req.url!=="/favicon.ico"){
        res.writeHead(200, {
           'Content-Type' : 'text/html',
            'Transfer-Encoding' : 'chunked'
        });

        getDataOne((data1) => {
            res.write('<!DOCTYPE html><html><head><title>测试render</title></head><body>helloword<p>$data1</p>'.replace(/\$data1/g, data1));
            getDataTwo((data2) => {
                res.end('<p>$data2</p></body></html>'.replace(/\$data2/g, data2));
            })
        });}).listen(3000, '127.0.0.1');


function getDataOne(fn1){
   setTimeout(() => {
      fn1('1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111');
  }, 5000);
 }

function getDataTwo(fn2){
    setTimeout(() => {
        fn2('22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222');
    }, 5000);
}

通过设置http首部: Transfer-Encoding: chunked 即开启了分段传输的魔法。该编码方式存在http1.1中,一般在服务器生成HTTP回应是无法确定信息大小的,这时用Content-Length就无法事先写入长度,而需要实时生成消息长度,则服务器一般采用Chunked编码。

在进行Chunked编码传输时,在回复消息的头部有transfer-coding并定义为Chunked,表示将用Chunked编码传输内容。 下面我们看下修改后的效果:

虽然总体的页面传输时间并没有变化,但是通过该方式,我们将响应时间缩短了一半,减少了用户等待的时间。在具体业务中,我们可以讲用户需要先看到的部分进行提前输出,将后端处理耗时较久的部分延迟输出,这就是分段传输渲染的优势。 注意如果服务器是nginx,有可能由于缓冲区的设置导致分段渲染无效,需要调整缓冲区大小。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
实现简单的 Koa
koa 为了能够简化 API,引入上下文 context,将原始请求对象 req 和 响应对象 res 封装并挂载到 context 上,并且在 context 上设置 getter 和 setter,从而简化操作
Cellinlab
2023/05/17
3000
实现简单的 Koa
node.js实现BigPipe详解
BigPipe 是 Facebook 开发的优化网页加载速度的技术。网上几乎没有用 node.js 实现的文章,实际上,不止于 node.js,BigPipe 用其他语言的实现在网上都很少见。以至于这技术出现很久以后,我还以为就是整个网页的框架先发送完毕后,用另一个或几个 ajax 请求再请求页面内的模块。直到不久前,我才了解到原来 BigPipe 的核心概念就是只用一个 HTTP 请求,只是页面元素不按顺序发送而已。 了解了这个核心概念就好办了,得益于 node.js 的异步特性,很容易就可以用 node
春哥大魔王
2018/04/17
2.1K0
node.js实现BigPipe详解
【nodejs】手写简易版 koa 及常用中间件
首先我们要实现 koa 的 use 和 listen 方法,我们这样使用 MyKoa。
一尾流莺
2022/12/10
8120
【nodejs】手写简易版 koa 及常用中间件
node读取文件进阶(详解)
刚才简单介绍了一下node读取同级页面的html文件,没有类似于Apache的服务,让访问变得复杂,因为这样正是成就了node的优点!优良的路由处理,通过路由访问不同内容!
十月梦想
2018/08/29
5930
Node.js实现的BigPipe
从加载到显示共消耗约13s (2 + 4 + 6 + 1 ~= 13s),符合预期结果
meteoric
2018/11/16
8700
Node.js 三大特点你都懂了吗
在Java、PHP或者.net等服务器端语言中,会为每一个客户端连接创建一个新的线程。而每个线程需要耗费大约2MB内存。也就是说,理论上,一个8GB内存的服务器可以同时连接的最大用户数为4000个左右。要让Web应用程序支持更多的用户,就需要增加服务器的数量,而Web应用程序的硬件成本当然就上升了。
Bug开发工程师
2018/09/21
1.7K0
Node.js 三大特点你都懂了吗
请求响应原理及HTTP协议
网站应用程序主要分为两大部分:客户端和服务器端。 客户端:在浏览器中运行的部分,就是用户看到并与之交互的界面程序。使用HTML、CSS、JavaScript构建。 服务器端:在服务器中运行的部分,负责存储数据和处理应用逻辑。
梨涡浅笑
2020/10/29
1.4K0
请求响应原理及HTTP协议
06_Node.js服务器开发
Node.js开发属于服务器开发,那么作为一名前端工程师为什么需要学习服务器开发呢?
张哥编程
2024/12/13
2040
06_Node.js服务器开发
如何用Node去写一个Web应用框架
IMWeb前端团队
2017/12/29
7790
node.js基础入门
node.js是一个基于Google V8引擎的、跨平台的JavaScript运行环境,不是一个语言
黄啊码
2022/06/20
8270
node读取html文件
node和Apache是没有web容器的,node的目录下的同级文件是无法使用/filename进行访问的,因为node没有根目录门也没用web容器!
十月梦想
2018/08/29
2.9K0
nodejs核心api-http模块
我们知道传统的HTPP服务器会由Aphche、Nginx、IIS之类的软件来担任,但是nodejs并不需要,nodejs提供了http模块,自身就可以用来构建服务器,而且http模块是由C++实现的,性能可靠。大部分的node使用者,都是用node来做Web API的,而HTTP模块是提供Web API的基础。为了支持所有的HTTP应用,node中的HTTTP模块提供的API是偏向底层化的。利用HTTP模块,我们可以简单快速搭建一个Web Server。
conanma
2022/01/04
2.6K0
使用noode.js创建一个服务器
打开gitbash,切换到js文件当前的文件夹,然后输入node index.js(index.js是我的js文件名,反正你们取什么名就输入啥名)
bamboo
2019/01/29
1.6K0
使用noode.js创建一个服务器
基于HTTP流式传输的长时响应体验提升
在我们应用开发中偶尔遇到某个请求需要后端进行大量计算的情况,这种情况下,按照传统的前后端协同方式,前端需要等待后端慢慢计算,会放一个loading效果,而长时间的loading对用户的体验并不友好,而如果后端采用异步方式,在接收到前端请求后立即返回,过一段时间完成计算后再让前端请求一次,又会让界面上的数据在这段等待时间中处于老的不正确的数据情况,因此,我们需要找到一种既可以避免异步发送数据让用户误认为结果错误,又可以避免长时响应让用户等待焦虑的方法,利用流式传输,可以将结果分片返回,从而让界面实时发生变化,又可以减少前后端多次交互带来的编码困难。
否子戈
2023/09/02
4.4K0
基于HTTP流式传输的长时响应体验提升
Node.js基础常用知识点全总结
Node.js是一个javascript运行环境。它让javascript可以开发后端程序,实现几乎其他后端语言实现的所有功能,可以与PHP、Java、Python、.NET、Ruby等后端语言平起平坐。
害恶细君
2022/11/22
3.6K0
Node.js基础常用知识点全总结
【原创】前端面试知识体系(一)
我的博客来源:https://1024bibi.com/2018/01/01/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95%E7%9F%A5%E8%AF%86%E4%BD%93%E7%B3%BB%EF%BC%88%E4%B8%80%EF%BC%89/
达达前端
2023/10/08
3420
node.js:简单的HTTP服务器
姓王者
2024/12/20
2090
node.js:简单的HTTP服务器
手写一个仿微信登录的nodejs程序
了解了大致原理之后,我们就开始简单实现这个逻辑。因为没有直接调用微信开发平台,所以这里只是演示效果。你也可以通过访问:
Vam的金豆之路
2021/12/01
3720
手写一个仿微信登录的nodejs程序
真正“搞”懂HTTP协议07之body的玩法(实践篇)
  我真没想到这篇文章竟然写了将近一个月,一方面我在写这篇文章的时候阳了,所以将近有两周没干活,另外一方面,我发现在写基于Node的HTTP的demo的时候,我不会Node,所以我又要一边学学Node,一边百度,一边看HTTP,最后百度的东西百分之九十不能用,所以某些点就卡的我特别难受。
zaking
2023/01/08
4300
真正“搞”懂HTTP协议07之body的玩法(实践篇)
HTTP请求与响应处理
客户端向服务器端发送请求时,有时需要携带一些客户信息, 客户信息需要通过请求参数的形式传递到服务器端,比如登录操作。
清出于兰
2020/10/29
1K0
HTTP请求与响应处理
相关推荐
实现简单的 Koa
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档