当前公司开发环境:
由于浏览器和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服务:https://blog.csdn.net/weixin_43648947/article/details/101215951
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><