node网页分段渲染详解

页面渲染，通常来说分为前端渲染以及后端渲染。前端渲染指的是服务端返回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)

相关推荐

  • 提高CSS网页渲染效率的11点注意事项

    1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数,关于这写法没找到确实的数据证明对浏览器的渲染效率是否有影响,但十六进制的颜色值默认标准是大写及6位数标注.在未知情况下不希望冒险而降低了渲染的效率. * 不赞成 - color:#f3a; * 建议用 - color:#FF33AA; 2.display与visibility的差异 他们用于设置或检索是否显示对象.display隐藏对象不保留物理空间,visibility为隐藏对象保留占据的物理空间.当浏览

  • node网页分段渲染详解

    node网页分段渲染详解

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

  • vue2从数据到视图渲染之模板渲染详解

    目录 引言 1.从new Vue()入口开始: 2.this._init 3.挂载函数vm.$mount(vm.$options.el) 4.mountComponent函数 5._render函数 6.createElement函数返回虚拟DOM 7._update函数 8.patch函数 9.createElm函数 10.移除 引言 一般使用html,css和javascript直接将数据渲染到视图中,需要关心如何去操作dom,如果数据量比较大,那么操作过程将会繁琐且不好控制.vue将这些操

  • Node.js返回JSONP详解

    Node.js返回JSONP详解

    在使用JQuery的Ajax从服务器请求数据或者向服务器发送数据时常常会遇到跨域无法请求的错误,常用的解决办法就是在Ajax中使用JSONP.基于安全性考虑,浏览器会存在同源策略,然而<script/>标签却具有跨域访问数据的能力,这就是JSONP工作的基本原理.有关同源策略以及什么是JSONP. 在Node.js中实现JSONP非常简单,通过下面的代码我们从服务器返回并运行一个JavaScript函数,这个JavaScript函数已经在调用方提前被定义好了,于是当它被返回的时候就自动执行了.

  • Node.js 事件循环详解及实例

     Node.js  事件循环详解及实例 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现. Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. Node.js 有多个内置的事件,我们可以

  • 微信小程序模版渲染详解

    微信小程序的界面程序支持html语法,多加了一部分标签,如view.block.templete等. 模版渲染 index.wxml <view> <p>{{helloWord}}</p> </view> 其中{{}}里面包含的内容你可以理解为一个变量,怎么让程序解析出{{helloWord}}变量 在index.js 中注册这个变量 var json = { data:{ "helloWord" : "hello world&

  • layui框架table 数据表格的方法级渲染详解

    如下所示: <table class="layui-table" lay-filter="demo11" id="test11"></table> //js 规范书写 var tst=table.render({ elem: '#test11' ,cols: [[ //标题栏 {checkbox: true} ,{field: 'pay_ct_time', title: '创建时间', width: 80} ,{field

  • JSP动态网页开发原理详解

    一.什么是JSP?     JSP全称是Java Server Pages,它和servle技术一样,都是SUN公司定义的一种用于开发动态web资源的技术. JSP这门技术的最大的特点在于,写jsp就像在写html,但它相比html而言,html只能为用户提供静态数据,而Jsp技术允许在页面中嵌套java代码,为用户提供动态数据. 二.JSP原理 2.1.Web服务器是如何调用并执行一个jsp页面的? 浏览器向服务器发请求,不管访问的是什么资源,其实都是在访问Servlet,所以当访问一个jsp

  • JavaScript web网页入门级开发详解

    JavaScript web网页入门级开发详解

    第三篇:❤三种方式俯瞰后端数据接收❤(建议收藏) 第二篇:玩转web表单网页快速开发(❤建议收藏❤) 一.前言 提前学习web的有关知识,那我们来认识这个神乎怪哉的东西. 我的idea是中文版的,不过区别不大. 第一步:首先创建一个新项目,按照图示 第二步:起个任意名字,然后图示 第三步:这个你在项目里创建新项目的时候会弹出,弹出建议点新窗口 第四步:按照图示点击即可 第五步:注意圈起来的要一样 第六步:这两个名字任意的 第七步:按图示操作即可 第八步:直接点完成即可 第九步:如图 第十步:依次

  • vue 实现网页截图功能详解

    vue 实现网页截图功能详解

    最近项目有一个需求,需要上传图片,但是客户上传的图片大小不一,所以我们需要规定客户的图片比例,但又需要是客户所需的,所以就想到了截图 实现效果 我们的架构是vue,所以用的是一个vue的截图插件 安装插件:npm install vue-cropper --save-dev 引入组件 import Vue from 'vue'; import { VueCropper } from "vue-cropper"; Vue.use(VueCropper) 核心代码 <div>

  • Node.js  事件循环详解及实例

     Node.js  事件循环详解及实例 Node.js 是单进程单线程应用程序,但是通过事件和回调支持并发,所以性能非常高. Node.js 的每一个 API 都是异步的,并作为一个独立线程运行,使用异步函数调用,并处理并发. Node.js 基本上所有的事件机制都是用设计模式中观察者模式实现. Node.js 单线程类似进入一个while(true)的事件循环,直到没有事件观察者退出,每个异步事件都生成一个事件观察者,如果有事件发生就调用该回调函数. Node.js 有多个内置的事件,我们可以

随机推荐