全球最快的JS模板引擎（全球最快的js模板引擎是什么）

25-03-18 8

在这篇文章中，我们将为您详细介绍全球最快的JS模板引擎的内容，并且讨论关于全球最快的js模板引擎是什么的相关问题。此外，我们还会涉及一些关于5大js模板引擎、6个常见JS模板引擎、Beetl模板引擎3

在这篇文章中，我们将为您详细介绍全球最快的JS模板引擎的内容，并且讨论关于全球最快的js模板引擎是什么的相关问题。此外，我们还会涉及一些关于5大js模板引擎、6个常见JS模板引擎、Beetl 模板引擎 3.15.4 发布，Java 模板引擎、Beetl 模板引擎 3.15.7 发布，Java 模板引擎的知识，以帮助您更全面地了解这个主题。

本文目录一览：

全球最快的JS模板引擎（全球最快的js模板引擎是什么）
5大js模板引擎
6个常见JS模板引擎
Beetl 模板引擎 3.15.4 发布，Java 模板引擎
Beetl 模板引擎 3.15.7 发布，Java 模板引擎

全球最快的JS模板引擎（全球最快的js模板引擎是什么）

废话不多说，先上测试：

亲测请访问：【在线测试地址】单次结果不一定准确，请多测几次。

tppl 的编译渲染速度是著名的 jQuery 作者 John Resig 开发的 tmpl 的 43 倍！与第二名 artTemplate 也有一倍的差距。

似乎每一个大公司都选择自己开发模板引擎并将其开源，结果就是社区充斥着数不清的引擎，让人眼花缭乱无从选择。随着时间的流逝，越来越多的功能被添加进去，最终让一个强悍的发动机变成了一台臃肿复杂零件生锈的拖拉机。天呐，我就想网页面里插一段 html，你居然要我往每个js文件里再塞进500行代码！

不，事情原本应该更简单。保持代码的简洁高效也意味着让生活更加健康愉悦。

好吧，满脑子装着“封装”或者“模块化”的读者估计有不同的看法。

下面我们来谈谈如何让引擎更加强劲高效。

模板引擎分为两大主要阵营：

原生语法
自定义模板语法

此两种方案各有各的好，自定义语法相比前者的优点在于，看起来和写起来更加规范简洁，更“像”是一种模板。也能更好的配合编译，并且可以避免用户写出“性能不佳”的代码。部分人认为自定义语法对页面设计人员来说更为友好，这就见仁见智了。而缺点就是通常只能自定义 if else 和 for 循环等简单而有限的逻辑结构，不够强大和灵活。

自定义语法的优化方法有随着语法的不同而不同，但通常最终都是将其转换为原生的语言逻辑结构。这里主要讨论原生语法模板引擎的优化。

对于追求性能的模板引擎来说，有两个显而易见的方向：

编译结果缓存
编译结果静态化

缓存很好理解，一次编译多次渲染。通常是保存初步正则替换后的字符串中间值，重复渲染时直接拿来使用。

静态指的是，编译模板字符串生成一个字符串拼接的函数，而不是每次创建函数。渲染操作就相当于一次函数调用，代入变量完成字符串拼接并返回。一般引擎优化到这一步时，渲染方面已经没有太大的差距和进步的空间。大家都成了字符串拼接函数，只能在微小的语法层面做优化。这里说一下，相信从事过前端开发的朋友，都“听说”过一个字符串拼接的“快速方法”：将字符串片段 push 进一个数组，最后再 join 返回，性能比直接采用 + 或者 += 字符串要好。注意，这种方法过时了！在现代浏览器以及Node.js中已经不再成立。通过数组连接字符串只是一个“临时解决方案”，随着各大js编译器的优化和进步，直接采用 + 字符串操作，给了一个编译器在语言底层做出优化的机会，大家还是着眼于未来吧。

渲染差距不大时，编译则还存在很多“水分”可以挤出来。当然，一部分模板引擎集成了诸如文件加载、Ajax等高级功能，对其性能方面有要求太高似乎也不太合理。

一般原生语法模板引擎，都采用类似下面的字符串表示：

<h1> <%=title %> </h1><% for(var i in content){ %>
  <p>第<%=i%>段：<%=content[i]%></p><%}%>

而编译操作就是将这一段字符串转换成类似下面的函数：

function(data){
  var str = "<h1>  "+data.title+"  </h1>";
  for(var i in data.content){
    str += "<p>第"+i+"段："+data.content[i]+"</p>";
  }
  return str;}

通常情况都是改变字符串结构，去掉模板标签，再使用 new Function() 创建函数。

传统传递参数的实现通过遍历数据对象，把对象的名值分离，然后分别把对象成员名称作为new Function的参数名(即变量名)，然后使用函数的appley调用方式传给那些参数。

tmpl 则使用了javascript不常用的 with 语句实现。实现方式很简洁，省去了var这个关键字。tmpl 性能问题就出在 with 上面。javascript 提供的 with 语句，本意是想用来更快捷的访问对象的属性。不幸的是，with语句在语言中的存在，就严重影响了 javascript 引擎的速度，因为它阻止了变量名的词法作用域绑定。

而转换的方法有很多种，一部分采用 split() 截断分析，一部分采用全正则替换，更有强悍的引擎使用词法分析，总之各显神通。

全正则替换的方案只是一长串的 .replace() 链式调用，看起来代码更加美妙，但由于存在中间过渡状态和方法而导致性能不佳。词法分析更不必说，大量的正则拖慢编译速度。编译优化的重点就在，尽量减少中间态，并减少复杂正则表达式的使用。经过实测，split() 截断分析能减少一部分正则，性能更好。

tppl 一开始使用“模板尾标签分割”，即：str.split(”%>”) 的方式，这与 tmpl 的实现方式不谋而合，上面的字符串被分割为6段，然后为每一段使用一次正则替换：

var tpls = ["<h1> <%=title", " </h1>","<% for(var i in content){ ", "<p>第<%=i", "段：<%=content[i]", "</p><%}"];

在后来的性能测试中，发现这种实现方式相比其它引擎，并没有太大的提升。看来只能另辟蹊径了。

经过长时间的冥思苦想，终于发现采用“模板头标签分割”的方式，能大大减少分割结果的数量，但是需要修改模板标签：

<h1> [=:title:] </h1>[: for(var i in content){ :]
   <p>第[=:i:]段：[=:content[i]:]</p>[:}:]

方括号 [ 与冒号 : 组成的模板标签相比 <% 能更加清晰的区分html代码与js逻辑代码。通过 .split(”[:”) 将模板分割为3段：

var tpls = ["<h1> [=:title:] </h1>", " for(var i in content){ :]<p>第[=:i:]段：[=:content[i]:]</p>", "}:]"];

如此一来正则替换从6次下降到3次，性能提升将近一倍！而且随着代码逻辑结构的不同，性能提升将会更大。

关键的正则表达式：

var line = "''"+"<p>第[=:i:]段：[=:content[i]:]</p>".replace(/\[\=\:(.*?)\:\]/g, "''+$1+''")+"''";// ''<p>第''+i+''段：''+content[i]+''</p>''

tppl 的源码托管在 Github 上，地址：https://github.com/yangjiePro/tppl

如果你还有更好编译优化方法，欢迎讨论！

5大js模板引擎

当你创建JavaScript应用时，你必然会用到JavaScript模板。当对HTML进行更新时，你可使用模板来代替库（如jQuery），使用模板可以大大简化你的代码。该文将例举当前较流行的一些模板库。

1.Mustache

Mustache通常被称为JavaScript模板的基础。另一个流行的解决方案Hanldebars实际上就是基于Mustache构建而成的。这并不意味着Mustache是一个不好的模板解决方案。下面例举一例：

[js] view plaincopy

Mustache.render("Hello, {{name}}", { name: "Jack" });
// 返回： Hello, Jack

一旦在页面中包含了Mustache，你就可以访问全局对象“Mustache”。你可使用其中最主要的方法“render”，它包含两个参数。首个参数是实际的模板，第二个参数则为需要传入的参数值。

上例中，你可以看见“{{name}}”。其中的“{{}}”实际上为Mustache的语法，表示一个占位符。当Mustache对其进行编译时，它将在传入的对像中寻找“name”属性，并用该属性的值（该例中为“Jack”）来代替“{{name}}”。

在这里，模板只为一个字符串，但如果你有一个更复杂的模板，该方法可能就不适用了。通常的解决方案是将模板放在“script”标签中：

[js] view plaincopy

<script type="text/x-mustache" id="template">
<p>Hello, {{name}}</p>
</script>

然后，我们可以访问的script标签的内容。例如，使用jQuery，它很容易实现：

[js] view plaincopy

var temp = $("#template").html();
Mustache.render(temp { name: "Jack" });
// 返回： <p>Hello, Jack</p>

给“script”一个浏览器无法理解的“type”属性，浏览器就会忽略该Script，不将它作为JavaScript，也不会执行它。

你也可在模板中使用循环，如下面这个模板：

[js] view plaincopy

{{#people}}
{{name}}
{{/people}}

传递数据：

[js] view plaincopy

{ people: [ { name: "Jack" }, { name: "Fred" } ] }

你将得到“JackFred”字符串。

Mustache还有更多的功能，点击这里查看详情。

2.Underscore Templates

Underscore提供了各种各样的有用的方法，也提供了简单的模板。它的语法与Mustache稍有不同。下面为一个简单案例：

[js] view plaincopy

_.template("Hello, <%= name %>", { name: "Jack" });
// 返回：Hello, Jack

如果你曾经使用过Embedded Ruby（缩写为ERB），你就会对该语法更为熟悉。“<%=name%>”表示无论“name”是什么值，都应该输出在“<%=name%>”的位置。Underscore同样有循环与条件语句，但与Mustache同样稍有不同。

[js] view plaincopy

var template = "<% _.each(people, function(name) { %> <li><%= name %></li> <% }); %>"
_.template(template, { people: ["Jack", "Fred"] } );

在Underscore模板中，你可以在“<% %>”是插入任何JavaScript。注意，“<%= %>”用于输出，<% %>用来包含JavaScript。这意味着你在JS中使用的任何形式的循环与条件语句同样可以在Underscore中使用。

了解Underscore更多功能，请点击这里查看。

3.Embedded JS Templates

Embedded JS（EJS）来源于ERB模板，且与ERB有很多相似之处。它有着与ERB相同的Tag，且包含很多相同的功能。

EJS的特别之处在于，你需要把模板存于单独文件中，并将文件名传递给EJS。它会加载该文件，并返回HTML。

[js] view plaincopy

// in template.ejs
Hello, <%= name %>
// in JS file
new EJS({ url: "template.ejs" }).render({ name: "Jack" });
// 返回： Hello, Jack

注意，你可以加载文本模板：

[js] view plaincopy

new EJS({ text: "Hello, <%= name %>" }).render({ name: "Jack" });

下面将介绍如何进行循环，以数组“People”为例，并在网站上链接到他们的个人页面：

[js] view plaincopy

// template.ejs
<ul>
<% for(var i = 0; i < people.length; i++) { %>
<li><%= link_to(people[i], "/profiles/" + people[i]) %></li>
<% } %>
</ul>
// in JS file
new EJS({ url: "template.ejs" }).render({ people: [ "Jack", "Fred" ] })
// Each rendered <li> will look like:
<li><a href="/profiles/Jack">Jack</a></li>

这与Underscore 有些相似，但要注意“link_to”的使用。它是EJS定义的一个Helper，以便链接更容易使用。

了解更多EJS，请关注EJS官方网站。

4.HandlebarsJS

Handlebars为最流行的模板引擎之一，构建于Mustache之上。适用于Mustache模板的功能同样适用于Handlebars模板。同时，Handlebars还增加了很多Helper。其中之一是“With”。

[js] view plaincopy

// with this template:
var source = "{{#with author}} <h2>By {{firstName}} {{lastName}}</h2> {{/with}}";
var template = Handlebars.compile(source);
var html = template({ author: { firstName: "Jack", lastName: "Franklin" } });
// returns: <h2>By Jack Franklin</h2>

注意，Handlebars编译器的工作方式略有不同。首先，你把该模板传递给“Handlebars.compile”，它会返回一个函数。你将包含数据的对象传递给该函数，该函数将返回HTML。“{#with}}”Helper取得一个对象，并允许你在其中向该对象传递属性。但不是采用以下形式：

[js] view plaincopy

{{ author.firstName}} {{author.lastName}}

而是下面这种形式

[js] view plaincopy

{{#with author}} {{firstName}} {{lastName}} {{/with}}

这样可以节约输入，尤其当你十分频繁地使用它时。

Handlebars也提供了“each”Helper：

[js] view plaincopy

var source = "{{#each people}} {{name}} {{/each}}";
var template = Handlebars.compile(source);
var html = template({ people: [{ name: "Jack" }, { name: "Fred" }] });
//返回： "JackFred"

此外，你还可以使用自己的方法来扩展Handlebars，具体方法可参与该文档。

5.Jade templating

随着Node.js的流行及大量Web应用构建于它之上，现在已有很多模板被设计用于服务器端。Jade模板与我们目前为止看到的大不相同，它依靠大量的缩进与空格。下面看一例：

[js] view plaincopy

// template.jade
p
| Hello,
= name
// JS
jade.renderFile("template.jade", { name: "Jack" }, function(err, result) {
console.log(result);
// logs: Hello, Jack
});

首次看到Jade可能会让你不舒服，但你会很快适应它。在“p”下面缩进两个字符，表明这两个字符存在于“p”内。“|”用来告知Jade，该行是需要输出的纯文本；“=”用来告知Jade寻找一个名为“name”的变量。

我们同样可以在Jade中使用循环：

[js] view plaincopy

each person in people
li=person

调出存储名字的数组：{ people: [ "Jack", "Fred" ]}，它将输出：

[html] view plaincopy

<li>Jack</li><li>Fred</li>

Jade具有很多其他模板所不具有的功能。它也可以做诸如输出Script标签此类的事：

[js] view plaincopy

script(type="text/javascript", src="myfile.js")

了解更多Jade templating功能，请点击这里查看。

这里只例举了最流行的五款模板引擎。此外还有很多，希望以该文为起点，帮你找到最适合你自己的模板引擎。（编译：陈秋歌审校：夏梦竹）

原文链接：The top 5 JavaScript templating engines

6个常见JS模板引擎

6个JS模板引擎

js模板最本质的作用是【变静为动】,一切利用这方面的都是优势，不利于的都是劣势。要很好地实现【变静为动】的目的，有这么几点：可维护性（后期改起来方便）；可扩展性（想要增加功能，增加需求方便）；开发效率提高（程序逻辑组织更好，调试方便）；看起来舒服（不容易写错）；以下是几个用过的JS模板引擎，可以用来了解一下。

1：百度模板引擎（baiduTemplate）

http://baidufe.github.io/Baid...

baiduTemplate希望创造一个用户觉得“简单好用”的JS模板引擎，应用场景：前端使用的模板系统或者后端java环境发布页面，功能概述：提供一套模板语法，用户可以写一个模板区域，每次根据传入的数据，生成对应数据产生的HTML片段，渲染不同的效果。

2：腾讯artTemplate

github: https://github.com/aui/artTem...

下载：http://www.jq22.com/jquery-in...

腾讯的artTemplate比较简洁，性能高效，是新一代 java 模板引擎，它采用预编译方式让性能有了质的飞跃，并且充分利用 java 引擎特性，使得其性能无论在前端还是后端都有极其出色的表现。对 NodeJS Express 友好支持。

3：淘宝的juicer

官网文档：http://juicer.name/

下载地址：https://github.com/PaulGuo/Ju...

juicer是一个高效、轻量的前端 (Java) 模板引擎，效率和易用是它追求的目标。除此之外，它还可以运行在 Node.js 环境中。淘宝的juicer偏原生模板一点的写法。更具完善和灵活性一点。

4：doT.js 模板引擎

github：https://github.com/olado/doT

下载：http://www.jq22.com/jquery-in...

doT.js大小只有4KB，渲染性能很好，而且直接支持原生的写法，不用依赖别的库，适用于混合开发的模板引擎。

5：handlebars

Handlebars官网: http://handlebarsjs.com./inst...

Github: https://github.com/daaain/Han...

CDN引入:https://cdnjs.com/libraries/h...

Handlebars是全球使用率最高的模板引擎,所以当之无愧是全球最受欢迎的模板引擎.Handlebars在许多前端框架中都被引入。

6：ejs

"E" 代表 "effective"，即【高效】。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

ejs官网: https://ejs.bootcss.com/

特点

快速编译与绘制输出
简洁的模板标签：<% %>
自定义分割符（例如：用 <? ?> 替换 <% %>）
引入模板片段
同时支持服务器端和浏览器 JS 环境
JavaScript 中间结果静态缓存
模板静态缓存
兼容 Express 视图系统

Beetl 模板引擎 3.15.4 发布，Java 模板引擎

Beetl 作为脚本引擎运行脚本支持共享变量
增加子模块，集成beetl-online，beetl在线体验更新到最新的beetl版本

Maven

<dependency>
    <groupId>com.ibeetl</groupId>
    <artifactId>beetl</artifactId>
    <version>3.15.4.RELEASE</version>
</dependency>

文档源码在线体验模板性能测试表达式引擎性能测试性能优化指南

最新模板性能测试，各个模板引擎均采用最新版本， Score 越大越好

Beetl>Rocker>>Freemarker>>Thymeleaf==Velociy

Benchmark              Mode  Cnt      Score      Error  Units

Beetl.benchmark       thrpt    5  141912.506 ± 19090.130  ops/s
Freemarker.benchmark  thrpt    5   48062.783 ±  9054.282  ops/s
Handlebars.benchmark  thrpt    5   48505.286 ±  6078.944  ops/s
Rocker.benchmark      thrpt    5  102699.041 ± 11827.123  ops/s
Thymeleaf.benchmark   thrpt    5   14495.261 ±  1460.815  ops/s
Velocity.benchmark    thrpt    5   12071.498 ±  4226.219  ops/s

最新规则引擎性能测试，Score 越大越好

JfireEL>> Aviator=Beetl=Jexl3 >>Spel>>Mvel=Groovy>>Nashor

Benchmark               Mode  Cnt         Score        Error  Units
Aviator.forExpresss    thrpt    5    501413.321 ±   4657.336  ops/s
Aviator.ifExpresss     thrpt    5   4699456.542 ± 266831.101  ops/s
Aviator.simpleExpress  thrpt    5   3868701.018 ±  38439.986  ops/s
Beetl.forExpresss      thrpt    5   1685875.017 ±  28454.020  ops/s
Beetl.ifExpresss       thrpt    5   4461489.443 ±  78687.317  ops/s
Beetl.reflect          thrpt    5     62972.088 ±  85785.390  ops/s
Beetl.simpleExpress    thrpt    5   4328852.130 ± 144586.699  ops/s
Groovy.ifExpresss      thrpt    5    119493.364 ±   1472.301  ops/s
Groovy.simpleExpress   thrpt    5    121724.720 ±   1533.726  ops/s
Jexl3.forExpresss      thrpt    5    789815.632 ±  42390.393  ops/s
Jexl3.ifExpresss       thrpt    5   4500714.752 ± 138214.400  ops/s
Jexl3.simpleExpress    thrpt    5   3901843.173 ± 125472.114  ops/s
JfireEL.ifExpresss     thrpt    5  28337464.920 ± 291859.385  ops/s
JfireEL.simpleExpress  thrpt    5  18824292.084 ± 103241.504  ops/s
Mvel.forExpresss       thrpt    5     11954.857 ±     84.105  ops/s
Mvel.ifExpresss        thrpt    5    230373.242 ±   1827.288  ops/s
Mvel.simpleExpress     thrpt    5    316083.646 ±   1320.717  ops/s
Nashorn.ifExpresss     thrpt    5     10010.541 ±    752.057  ops/s
Nashorn.simpleExpress  thrpt    5      8993.022 ±    518.940  ops/s
Spel.ifExpresss        thrpt    5    850338.540 ±  41826.542  ops/s
Spel.simpleExpress     thrpt    5    636251.839 ±   2553.017  ops/s

Beetl 模板引擎 3.15.7 发布，Java 模板引擎

完成需求 I7KEB8，默认运算采用精度运算。

Beetl默认情况下当遇到数字以h结尾的时候，认为是BigDecimal类型，随后运算使用高精度运算。

var a= 3434.33h*233334;

新版本增加配置,不允许显示的使用h表示高精度类型

BIGDECIMAL=true

则默认所有数字都翻译成BigDecimal

Script script = groupTemplate.getScript("return 5/3;",loader);
script.execute();
if(script.isSuccess()){
	Object value = script.getResult().get("return");
	Assert.assertTrue(value instanceof  BigDecimal);
	Assert.assertEquals(value,new BigDecimal(5).divide(new BigDecimal(3),ALU.scale, ALU.round ));
}else{
	Assert.fail();
}

Maven

<dependency>
    <groupId>com.ibeetl</groupId>
    <artifactId>beetl</artifactId>
    <version>3.15.7.RELEASE</version>
</dependency>

文档源码在线体验模板性能测试表达式引擎性能测试性能优化指南

最新模板性能测试，各个模板引擎均采用最新版本， Score 越大越好

Beetl>Rocker>>Freemarker>>Thymeleaf==Velociy

Benchmark              Mode  Cnt      Score      Error  Units

Beetl.benchmark       thrpt    5  141912.506 ± 19090.130  ops/s
Freemarker.benchmark  thrpt    5   48062.783 ±  9054.282  ops/s
Handlebars.benchmark  thrpt    5   48505.286 ±  6078.944  ops/s
Rocker.benchmark      thrpt    5  102699.041 ± 11827.123  ops/s
Thymeleaf.benchmark   thrpt    5   14495.261 ±  1460.815  ops/s
Velocity.benchmark    thrpt    5   12071.498 ±  4226.219  ops/s

最新规则引擎性能测试，Score 越大越好

JfireEL>> Aviator=Beetl=Jexl3 >>Spel>>Mvel=Groovy>>Nashor

Benchmark               Mode  Cnt         Score        Error  Units
Aviator.forExpresss    thrpt    5    501413.321 ±   4657.336  ops/s
Aviator.ifExpresss     thrpt    5   4699456.542 ± 266831.101  ops/s
Aviator.simpleExpress  thrpt    5   3868701.018 ±  38439.986  ops/s
Beetl.forExpresss      thrpt    5   1685875.017 ±  28454.020  ops/s
Beetl.ifExpresss       thrpt    5   4461489.443 ±  78687.317  ops/s
Beetl.reflect          thrpt    5     62972.088 ±  85785.390  ops/s
Beetl.simpleExpress    thrpt    5   4328852.130 ± 144586.699  ops/s
Groovy.ifExpresss      thrpt    5    119493.364 ±   1472.301  ops/s
Groovy.simpleExpress   thrpt    5    121724.720 ±   1533.726  ops/s
Jexl3.forExpresss      thrpt    5    789815.632 ±  42390.393  ops/s
Jexl3.ifExpresss       thrpt    5   4500714.752 ± 138214.400  ops/s
Jexl3.simpleExpress    thrpt    5   3901843.173 ± 125472.114  ops/s
JfireEL.ifExpresss     thrpt    5  28337464.920 ± 291859.385  ops/s
JfireEL.simpleExpress  thrpt    5  18824292.084 ± 103241.504  ops/s
Mvel.forExpresss       thrpt    5     11954.857 ±     84.105  ops/s
Mvel.ifExpresss        thrpt    5    230373.242 ±   1827.288  ops/s
Mvel.simpleExpress     thrpt    5    316083.646 ±   1320.717  ops/s
Nashorn.ifExpresss     thrpt    5     10010.541 ±    752.057  ops/s
Nashorn.simpleExpress  thrpt    5      8993.022 ±    518.940  ops/s
Spel.ifExpresss        thrpt    5    850338.540 ±  41826.542  ops/s
Spel.simpleExpress     thrpt    5    636251.839 ±

Beetl.reflect 是指Beetl能像Java反射那样能查询出表达式结构，变量名

关于全球最快的JS模板引擎和全球最快的js模板引擎是什么的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于5大js模板引擎、6个常见JS模板引擎、Beetl 模板引擎 3.15.4 发布，Java 模板引擎、Beetl 模板引擎 3.15.7 发布，Java 模板引擎的相关知识，请在本站寻找。

本文标签：