node网页分段渲染详解

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

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

const http = require("http");

const fs = require("fs");

var tpl1 = '

$data1

var tpl2 = '

$data2

var html = '';

vatxWsLr server = http.createServer((req, res)=txWsL>{

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('

$data1

getDataTwo((data2) => {