废话不多说，先上测试： ![all.jpg](//static.cnodejs.org/FoR9jyra_Kx55CfLfZj8DQQUYZJa) 亲测请访问：【[在线测试地址](http://yangjiepro.github.io/tppl/test/test.htm)】单次结果不一定准确，请多测几次。 [tppl](https://github.com/yangjiePro/tppl) 的编译渲染速度是著名的 jQuery 作者 John Resig 开发的 [tmpl](http://ejohn.org/blog/javascript-micro-templating/) 的 **43** 倍！与第二名 artTemplate 也有一倍的差距。似乎每一个大公司都选择自己开发模板引擎并将其开源，结果就是社区充斥着数不清的引擎，让人眼花缭乱无从选择。随着时间的流逝，越来越多的功能被添加进去，最终让一个强悍的发动机变成了一台臃肿复杂零件生锈的拖拉机。天呐，我就想网页面里插一段 html，你居然要我往每个js文件里再塞进500行代码！不，事情原本应该更简单。保持代码的简洁高效也意味着让生活更加健康愉悦。好吧，满脑子装着“封装”或者“模块化”的读者估计有不同的看法。下面我们来谈谈如何让引擎更加强劲高效。模板引擎分为两大主要阵营： 1. 原生语法 2. 自定义模板语法此两种方案各有各的好，自定义语法相比前者的优点在于，看起来和写起来更加规范简洁，更“像”是一种模板。也能更好的配合编译，并且可以避免用户写出“性能不佳”的代码。部分人认为自定义语法对页面设计人员来说更为友好，这就见仁见智了。而缺点就是通常只能自定义 if else 和 for 循环等简单而有限的逻辑结构，不够强大和灵活。自定义语法的优化方法有随着语法的不同而不同，但通常最终都是将其转换为原生的语言逻辑结构。这里主要讨论原生语法模板引擎的优化。对于追求性能的模板引擎来说，有两个显而易见的方向： 1. 编译结果缓存 2. 编译结果静态化缓存很好理解，一次编译多次渲染。通常是保存初步正则替换后的字符串中间值，重复渲染时直接拿来使用。静态指的是，编译模板字符串生成一个字符串拼接的函数，而不是每次创建函数。渲染操作就相当于一次函数调用，代入变量完成字符串拼接并返回。一般引擎优化到这一步时，渲染方面已经没有太大的差距和进步的空间。大家都成了字符串拼接函数，只能在微小的语法层面做优化。这里说一下，相信从事过前端开发的朋友，都“听说”过一个字符串拼接的“快速方法”：将字符串片段 push 进一个数组，最后再 join 返回，性能比直接采用 + 或者 += 字符串要好。注意，这种方法过时了！在现代浏览器以及Node.js中已经不再成立。通过数组连接字符串只是一个“临时解决方案”，随着各大js编译器的优化和进步，直接采用 + 字符串操作，给了一个编译器在语言底层做出优化的机会，大家还是着眼于未来吧。渲染差距不大时，编译则还存在很多“水分”可以挤出来。当然，一部分模板引擎集成了诸如文件加载、Ajax等高级功能，对其性能方面有要求太高似乎也不太合理。一般原生语法模板引擎，都采用类似下面的字符串表示： ```

<%=title %>

<% for(var i in content){ %>

第<%=i%>段：<%=content[i]%>

<%}%> ``` 而编译操作就是将这一段字符串转换成类似下面的函数： ``` function(data){ var str = "

"+data.title+"

"; for(var i in data.content){ str += "

第"+i+"段："+data.content[i]+"

"; } return str; } ``` 通常情况都是改变字符串结构，去掉模板标签，再使用 new Function() 创建函数。传统传递参数的实现通过遍历数据对象，把对象的名值分离，然后分别把对象成员名称作为new Function的参数名(即变量名)，然后使用函数的appley调用方式传给那些参数。 tmpl 则使用了javascript不常用的 with 语句实现。实现方式很简洁，省去了var这个关键字。tmpl 性能问题就出在 with 上面。javascript 提供的 with 语句，本意是想用来更快捷的访问对象的属性。不幸的是，with语句在语言中的存在，就严重影响了 javascript 引擎的速度，因为它阻止了变量名的词法作用域绑定。而转换的方法有很多种，一部分采用 split() 截断分析，一部分采用全正则替换，更有强悍的引擎使用词法分析，总之各显神通。全正则替换的方案只是一长串的 .replace() 链式调用，看起来代码更加美妙，但由于存在中间过渡状态和方法而导致性能不佳。词法分析更不必说，大量的正则拖慢编译速度。编译优化的重点就在，尽量减少中间态，并减少复杂正则表达式的使用。经过实测，split() 截断分析能减少一部分正则，性能更好。 [tppl](https://github.com/yangjiePro/tppl) 一开始使用“模板尾标签分割”，即：str.split("%>") 的方式，这与 tmpl 的实现方式不谋而合，上面的字符串被分割为6段，然后为每一段使用一次正则替换： ``` var tpls = ["

<%=title", "

","<% for(var i in content){ ", "

第<%=i", "段：<%=content[i]", "

<%}"]; ``` 在后来的性能测试中，发现这种实现方式相比其它引擎，并没有太大的提升。看来只能另辟蹊径了。经过长时间的冥思苦想，终于发现采用“模板头标签分割”的方式，能大大减少分割结果的数量，但是需要修改模板标签： ```

[=:title:]

[: for(var i in content){ :]

第[=:i:]段：[=:content[i]:]

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

[=:title:]

", " for(var i in content){ :]

第[=:i:]段：[=:content[i]:]

", "}:]"]; ``` 如此一来正则替换从6次下降到3次，性能提升将近一倍！而且随着代码逻辑结构的不同，性能提升将会更大。关键的正则表达式： ``` var line = "'"+"

第[=:i:]段：[=:content[i]:]

".replace(/\[\=\:(.*?)\:\]/g, "'+$1+'")+"'"; // '

第'+i+'段：'+content[i]+'

' ``` [tppl](https://github.com/jojoin/tppl) 的源码托管在 Github 上，地址：[https://github.com/jojoin/tppl](https://github.com/jojoin/tppl) 如果你还有更好编译优化方法，欢迎讨论！