多种模板引擎在Node中的应用(性能对比及使用方法)

5,883 阅读4分钟

当前公司开发环境: 由于浏览器和js的优化和性能的提升,大多数公司采用的前后端分离式的开发,代码区分明确,易于维护,易于开发,但是不易爬虫,还好有强大的Node.js,它几乎可以处理所有我们开发时后端处理的事务,也就弥补了前后端分离后不方便服务端渲染的问题。 Node渲染: Node渲染读取的页面本身是纯静态的,这就需要我们使用模板引擎来强化页面,使页面更灵活,又不失服务端渲染的优势。


一、各种模板引擎性能对比

市面上常见的模板引擎: art-template --- art-tempalte/fast mode --- doT --- ejs --- pug --- handlebars --- mustache --- swig ==1.首先测试少量数据== 渲染同样多的的节点数,10个节点

在这里插入图片描述
结果:art-template --- dot --- ejs 的处理速度比较快
在这里插入图片描述


==2.测试大量数据== 渲染同样多的的节点数,200个节点

在这里插入图片描述
结果:art-template --- pug --- hanlebars 有优势,art-template更快
在这里插入图片描述


==3.测试更多数据== 渲染同样多的的节点数,1000个节点. art-template --- fast mode --- pug 性能更好,差距开始明显

在这里插入图片描述


测试结果: 整体来说==art-template==表现最好也是最稳定,其次就是==pug== 虽然少量数据的时候表现不好,但项目中数据量都很大,==pug==随数据量越多性能也是越好 ,所以推荐使用==art-tempalte== 和==pug==。 从语法上来看,==pug== 比 ==art-template==更简洁优雅,但art-tempalte更易上手。一会我们就以art-template为例进行node端渲染。

二、模板引擎在node中的应用

首先搭好一个node环境,express和koa先不推荐,一开始最好从原生开始。 快速搭建node服务:blog.csdn.net/weixin_4364…

1.按照上面链接搭好node环境之后,安装art-template

npm install --save art-template

2.views文件下创建view.html

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{title}}</title>
    <link rel="shortcut icon"  href="./public/favicon.ico"></link>
    <link rel='stylesheet' type='text/css'  href="./public/main.css"></link>
</head>
<body>
    <button class="top-button">我要留言</button>
    //这里的语法跟vue有点类似,具体看art-template文档 https://aui.github.io/art-template/docs/
    <h2>{{header}}</h2>
    {{each files}}
    <div class="box">
        <p title={{$value.message}}>{{$value.name}}说:{{$value.message}}</p>
        <p>{{$value.date}}</p>
        <button class="delet"><a href="/delete?Id=<%= $value.Id%>">Delete</a></button>
    </div>
    {{/each}}
</body>
</html>
<script src="./public/main.js"></script>

3.引入外面的js和css和icon

在这里插入图片描述
main.css

body{
    background: #e7f5f9;
    color: #999;
}
.top-button{
    padding: 6px 20px;
    background: #108da2;
    color: #fff;
    cursor: pointer;
}
.top-button>a{
    cursor: pointer;
}
.box{
    display: flex;
    border: 1px solid #ccc;
    justify-content: space-between;
    width: 709px;
    position: relative;
    padding: 0px 10px;
    border-radius: 6px;
    margin-bottom: 10px;
}

.delet{
    position: absolute;
    right: -72px;
    top: 10px;
    background: #f38585;
    padding: 4px 10px;
    color: #fff;
    cursor: pointer;
}

.delet:hover{
    background:#c36060;
    color: #e4e0e0;
}

.box p:first-child{
    overflow: hidden;
    max-width: 500px;
    white-space: nowrap;
}

main.js

(function (){ //简单的打印
    console.log('require main.js')
})()

4.art-template编译文件

const http = require("http"); //加载http核心模块
const allurl = require("url"); 
const fs = require("fs");
const path = require("path");
const template = require("art-template"); //引用art-template模板引擎
const server = http.createServer(); //创建web服务器
const views = path.join(__dirname, "views"); //指向当前目录下的views文件夹
let listdata = [
{ Id: 6, name: '爱豆1', message: '士大夫敢死队风格', date: '2019-09-14' },
{ Id: 7, name: '米', message: '米米', date: '2019-09-16' },
{ Id: 8, name: '张宝', message: '第三方公司的', date: '2019-09-17' },
{ Id: 10, name: 'REACT', message: '大家好大家好', date: '2019-09-17' },
{ Id: 11, name: '是德国', message: '尔特瑞特为人我', date: '2019-09-18' },
{Id: 13,name: '他也认同',message: '复合体特反感风波不断的',date: '2019-10-14' } ]

server.on('request',function (req, res) {  //接受客户端请求
    let parseObj = allurl.parse(req.url, true);// url.parse 参数转成对象 true
    let url = parseObj.pathname;//单独获取?前面的url参数路径
     if (url === "/list") {
        fs.readFile(path.join(views, "view.html"), function(err, data) {
        if (err) {
          return res.end("找不到渲染文件");
        }
        //将views文件下的view.html读取出来,用模板引擎编译,传入参数,以字符串形式返回到客户端
         let htmlstr = template.render(data.toString(), {
                header: "评论日志",
                title: "list",
                files: listdata
              });
           res.end(htmlstr);   
      });
    } else if (url.indexOf("/public/") === 0) { 
    //这里很重要,html模板引js和css时都会加载对应文件,所以需要把把文件先暴露出来
      fs.readFile(path.join(__dirname, "views", url), function(err, data) {
        if (err) {
          return res.end("找不到public渲染文件");
        }
        res.end(data.toString());
      });
    }else{
    	res.end(url);
    }
	console.log('接受客户端请求')
	res.end()
})
server.listen(3000,function(){  //绑定端口,监听启动服务
	console.log(`web服务器 3000已经启动`)
})

最终效果:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
art-template的具体语法可以看官方文档:aui.github.io/art-templat… 这样一个简单的node模板引擎渲染就写好了。 ==未完待续...期待...ing:== 后面在这个基础上会用node链接数据库,进行数据库的增、删、改、查功能,实现纯前端的开发。