全球最快的JS模板引擎

  废话不多说百度js模板引擎，先上测试：

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

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

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

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

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

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

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

  原生语法自定义模板语法

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

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

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

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

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

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

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

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

   #

    
      <p>第段：

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

   function(data){

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

";

      }
      return str;

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

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

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

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

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

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

<p><pre>var tpls = ["<h1>