多種模板引擎在Node中的應用（性能對比及使用方法）

時間 2019-11-17

原文原文鏈接

當前公司開發環境： 因爲瀏覽器和js的優化和性能的提高，大多數公司採用的先後端分離式的開發，代碼區分明確，易於維護，易於開發，可是不易爬蟲，還好有強大的Node.js，它幾乎能夠處理全部咱們開發時後端處理的事務，也就彌補了先後端分離後不方便服務端渲染的問題。 Node渲染： Node渲染讀取的頁面自己是純靜態的，這就須要咱們使用模板引擎來強化頁面，使頁面更靈活，又不失服務端渲染的優點。css

1、各類模板引擎性能對比

市面上常見的模板引擎: art-template --- art-tempalte/fast mode --- doT --- ejs --- pug --- handlebars --- mustache --- swig ==1.首先測試少許數據== 渲染一樣多的的節點數，10個節點 html

結果：art-template --- dot --- ejs 的處理速度比較快

==2.測試大量數據== 渲染一樣多的的節點數，200個節點前端

結果：art-template --- pug --- hanlebars 有優點，art-template更快

==3.測試更多數據== 渲染一樣多的的節點數，1000個節點. art-template --- fast mode --- pug 性能更好，差距開始明顯 vue

測試結果： 總體來講==art-template==表現最好也是最穩定，其次就是==pug== 雖然少許數據的時候表現很差，但項目中數據量都很大，==pug==隨數據量越多性能也是越好，因此推薦使用==art-tempalte== 和==pug==。從語法上來看，==pug== 比 ==art-template==更簡潔優雅，但art-tempalte更易上手。一會咱們就以art-template爲例進行node端渲染。java

2、模板引擎在node中的應用

首先搭好一個node環境，express和koa先不推薦，一開始最好從原生開始。快速搭建node服務：blog.csdn.net/weixin_4364…node

1.按照上面連接搭好node環境以後，安裝art-templategit

npm install --save art-template
複製代碼

2.views文件下建立view.html github

<!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 web

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已經啓動`)
})
複製代碼