node网页分段渲染详解


Posted in Javascript onSeptember 05, 2016

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

node网页分段渲染详解

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

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编码传输内容。 下面我们看下修改后的效果:

node网页分段渲染详解

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

Javascript 相关文章推荐
使javascript也能包含文件
Oct 26 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
jQuery 实现侧边浮动导航菜单效果
Dec 26 Javascript
cookie的secure属性详解
Apr 08 Javascript
javascript设计模式--策略模式之输入验证
Nov 27 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
jQuery查找节点方法完整实例
Sep 13 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
详解React Native 屏幕适配(炒鸡简单的方法)
Jun 11 Javascript
vue.js内置组件之keep-alive组件使用
Jul 10 Javascript
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
js对象浅拷贝和深拷贝详解
Sep 05 #Javascript
JS实现隐藏同级元素后只显示JS文件内容的方法
Sep 04 #Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 #Javascript
angularjs实现文字上下无缝滚动特效代码
Sep 04 #Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 #Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 #Javascript
jQuery实现的自动加载页面功能示例
Sep 04 #Javascript
You might like
2019十大人气国漫
2020/03/13 国漫
德劲1107的电路分析与打磨
2021/03/02 无线电
source.php查看源文件
2006/12/09 PHP
PHP实现异步调用方法研究与分享
2011/10/27 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
JavaScript 大数据相加的问题
2011/08/03 Javascript
JavaScript函数的4种调用方法详解
2014/04/22 Javascript
jquery实现手风琴效果
2015/11/20 Javascript
扩展Bootstrap Tooltip插件使其可交互的方法
2016/11/07 Javascript
jquery实现页面加载效果
2017/02/21 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
VUE中v-on:click事件中获取当前dom元素的代码
2018/08/22 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
使用JS监听键盘按下事件(keydown event)
2019/11/07 Javascript
Nodejs实现WebSocket代码实例
2020/05/19 NodeJs
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python标准库之循环器(itertools)介绍
2014/11/25 Python
Python实现Const详解
2015/01/27 Python
使用Python抓取模板之家的CSS模板
2015/03/16 Python
通过Python实现自动填写调查问卷
2017/09/06 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
Tensorflow实现多GPU并行方式
2020/02/03 Python
python 图像增强算法实现详解
2021/01/24 Python
经理职责范文
2013/11/08 职场文书
自动化职业生涯规划书范文
2014/01/03 职场文书
个人求职信范例
2014/01/29 职场文书
中秋节超市促销方案
2014/01/30 职场文书
质量保证书格式
2015/02/27 职场文书
初级职称评定工作总结
2015/08/13 职场文书