脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → node.js → node网页分段渲染

node网页分段渲染详解

 更新时间：2016年09月05日 09:09:31   作者：jaychen  
按照常理，我们渲染一张网页，必定是网页全部拼装完毕，然后生成HTML字符串，传送至客户端。这也意味着，如果一张网页处理的有快有慢的话，必须串行等到所有的逻辑都处理完毕。后端才能进行返回。

页面渲染，通常来说分为前端渲染以及后端渲染。前端渲染指的是服务端返回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，有可能由于缓冲区的设置导致分段渲染无效，需要调整缓冲区大小。

您可能感兴趣的文章:

相关文章

  • node.js中koa和express的差异对比

    node.js中koa和express的差异对比

    Express和koa都是服务端的开发框架,服务端开发的重点是对HTTP Request和HTTP Response两个对象的封装和处理,下面这篇文章主要给大家介绍了关于node.js中koa和express的差异对比,需要的朋友可以参考下
    2023-05-05
  • Nodejs Docker镜像体积优化实践详解

    Nodejs Docker镜像体积优化实践详解

    这篇文章主要为大家介绍了Nodejs Docker镜像体积优化实践示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-07-07
  • nodejs中的读取文件fs与文件路径path解析

    nodejs中的读取文件fs与文件路径path解析

    这篇文章主要介绍了nodejs中的读取文件fs与文件路径path解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-08-08
  • 浅谈在koa2中实现页面渲染的全局数据

    浅谈在koa2中实现页面渲染的全局数据

    本篇文章主要介绍了浅谈在koa2中实现页面渲染的全局数据，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10
  • node中的密码安全(加密)

    node中的密码安全(加密)

    这篇文章主要介绍了node中的密码安全(加密)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • NodeJS GRPC 多个 .proto 文件的处理步骤

    NodeJS GRPC 多个 .proto 文件的处理步骤

    本文教程详细介绍了在NodeJS环境中如何使用gRPC框架处理多个.proto文件,步骤包括安装依赖、定义.proto文件、生成gRPC代码、实现服务器和客户端以及运行,适用于开发者在构建分布式应用时进行接口定义和服务实现
    2024-10-10
  • Node.js中使用事件发射器模式实现事件绑定详解

    Node.js中使用事件发射器模式实现事件绑定详解

    这篇文章主要介绍了Node.js中使用事件发射器模式实现事件绑定详解,本文一并讲解了回调模式、发射器模式、事件类型等基础知识做了补充,需要的朋友可以参考下
    2014-08-08
  • node.js中PC端微信小程序包解密的处理思路

    node.js中PC端微信小程序包解密的处理思路

    我们使用node.js去写一个解码的程序。根据上边加密的流程，我们首先读取加密文件，把前6个字节的固定字符串去除，这篇文章主要介绍了node.js中PC端微信小程序包解密,需要的朋友可以参考下
    2021-12-12
  • nodejs中用npm初始化来创建package.json的实例讲解

    nodejs中用npm初始化来创建package.json的实例讲解

    今天小编就为大家分享一篇nodejs中用npm初始化来创建package.json的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-10-10
  • NodeJs通过async/await处理异步的方法

    NodeJs通过async/await处理异步的方法

    本篇文章主要介绍了NodeJs通过async/await处理异步的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论