全球最快的JS模板引擎:tppl

废话不多说,先上测试:

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

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

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

 
 
标签: js模板引擎

JS模板引擎:tppl的更多相关文章

  1. doT js 模板引擎【初探】要优雅不要污

    js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. ...

  2. 各种JS模板引擎对比数据(高性能JavaScript模板引擎)

    最近做了JS模板引擎测试,拿各个JS模板引擎在不同浏览器上去运行同一程序,下面是模板引擎测试数据:通过测试artTemplate.juicer与doT引擎模板整体性能要有绝对优势: js模板引擎 Ja ...

  3. JS 模板引擎 BaiduTemplate 和 ArtTemplate 对比及应用

    最近做项目用了JS模板引擎渲染HTML,JS模板引擎是在去年做项目是了解到的,但一直没有用,只停留在了解层面,直到这次做项目才用到,JS模板引擎用了两个 BaiduTemplate 和 ArtTemp ...

  4. 掌握js模板引擎

    最近要做一个小项目,不管是使用angularjs还是reactjs,都觉得大材小用了.其实我可能只需要引入一个jquery,但想到jquery对dom的操作,对于早已习惯了双向绑定模式的我,何尝不是一 ...

  5. js模板引擎

    js模板引擎包括如下: template 官方参考:http://aui.github.io/artTemplate BaiduTemplate 官方参考:http://baidufe.github. ...

  6. 调研js模板引擎

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  7. js模板引擎介绍搜集

    js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...

  8. Filter - Surge.js模板引擎过滤器

    版权所有,转载请注明出处:http://guangboo.org/2014/01/05/filter-surgejs-template-engine 过滤器在surge.js模板引擎中多处用到,其类似 ...

  9. js模板引擎--artTemplate

    js模板引擎--artTemplate 以前研究过一段时间的handlebars,但因为其渲染性能略逊于腾讯的artTemplate(在artTemplate的GitHub官网上有推荐的性能测试地址) ...

随机推荐

  1. 关于查看文件size

    public static long getTotalSize(String device) { StatFs sf = new StatFs (device); //long totalblocks ...

  2. iOS一个开发系列中 - UIButton 使用摘要

    // 初始化button并设置类型 UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect]; // 可以定义的UIButto ...

  3. Android SystemUI源代码分析和修改

    1.在导航栏中添加音量加减button 一些Android音量调节button.或者从保护实体按键的角度考虑,就须要在导航栏的虚拟按键中加入音量加减调节按键. 效果例如以下图所看到的: 实现步骤例如以 ...

  4. contentWindow,

    a>contentWindow 兼容各个浏览器,可取得子窗口的 window 对象.b>contentDocument Firefox 支持,> ie8 的ie支持.可取得子窗口的 ...

  5. Android FM学习中的模块 FM启动过程

    最近的研究FM模,FM是一家值我正在学习模块.什么可以从上层中可以看出. 上层是FM按钮的操作和界面显示,因此调用到FM来实现广播收听的功能. 看看Fm启动流程:例如以下图: 先进入FMRadio.j ...

  6. 照片总结---选择适当的NoSQL

    版权声明:本文博客原创文章,博客,未经同意,不得转载.

  7. 用Maven整合SpringMVC+Spring+Hibernate 框架,实现简单的插入数据库数据功能

    一.搭建開始前的准备 1.我用的MyEclipse2014版,大家也能够用IDEA. 2.下载Tomcat(免安装解压包).MySQL(zip包下载地址 免安装解压包,优点就是双击启动,最后我会把ba ...

  8. DynamicReports 导出Excel 例子

    import java.awt.Color; import java.io.FileOutputStream; import java.util.ArrayList; import java.util ...

  9. 第17章 中介者模式(Mediator Pattern)

    原文 第17章 中介者模式(Mediator Pattern) 中介者模式  概述:   在软件开发中,我们有时会碰上许多对象互相联系互相交互的情况,对象之间存在复杂的引用关系,当需求更改时,对系统进 ...

  10. oracle_自动备份用户数据,删除N天前的旧数据(非rman,bat+vbs)

    有时数据没有实时备份恢复那么高的安全性需求,但每天 ,或者定期备份表结构 和数据依旧是很有必要的,介绍一种方法 在归档和非归档模式均可使用的自动备份方法. 预期效果是备份用户下的数据含表结构,备份文件 ...