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

本文作者:IMWeb jaychen 原文出处:IMWeb社区 未经同意,禁止转载

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

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

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秒钟。

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

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,有可能由于缓冲区的设置导致分段渲染无效,需要调整缓冲区大小。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏玩转JavaEE

Spring Boot + Vue,手把手教你做文件上传

在 Vue.js 中,如果网络请求使用 axios ,并且使用了 ElementUI 库,那么一般来说,文件上传有两种不同的实现方案:

8620
来自专栏理想二旬不止

AJAX-前后端交互的艺术

当我们通过提交表单向服务器提交内容,或者进行一些其他操作,均涉及到了与浏览器之间的交互,传统的方式与AJAX方式的处理方法是不同的

8110
来自专栏趣谈前端

《前端5分钟》之使用pace.js美化你的网站加载进度条

最近做网站体验优化的时候突然发现一个好东西,pace.js(加载进度条插件),gzip之后只有几kb, 简单好用,特地分享出来,也作为自己的一个学习总结。

12720
来自专栏IT大咖说

团队 React 代码规范制定

团队中每个开发人员的水平不同,技术关注点不同,如果没有一份代码规范的参照和约束,那么项目中的代码将会风格迥异,难以维护,为保证代码质量和风格统一,特此拟定一份《...

8910
来自专栏cwl_Java

经典面试题-什么是Ajax

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

5620
来自专栏Urlteam

持久连接 WebSocket 到底是什么?

首先HTTP有1.1和1.0之说,也就是所谓的keep-alive,把多个HTTP请求合并为一个,但是Websocket其实是一个新协议,跟HTTP协议基本没有...

9420
来自专栏经年隔世

JS监听中文输入

当我们开始进行input的输入改变了input框里的值时,js会监听到input propertychange事件, 执行判断(一开始时$(this).pr...

11120
来自专栏彭湖湾的编程世界

来,我们手写一个简易版的mock.js吧(模拟fetch && Ajax请求)

比较符合我们使用习惯的,也许是下面这种mock方式,有一个专门的配置文件,管理请求的url和返回值。每个请求对应输出数组中的一个对象,对象的rule属性可以是一...

10530
来自专栏芋道源码1024

Spring MVC 的跨域解决方案

一句话:同一个ip、同一个网络协议、同一个端口,三者都满足就是同一个域,否则就是跨域。

9420
来自专栏运维录

如何为Nginx配置 WebSocket?

WebSocket 是一种在客户端与服务器端之间保持TCP长连接的网络协议,这样它们就可以随时进行信息交换。通过WebSocket,服务器可以直接向客户端发送数...

7520

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励