目前客户端资源极为强大，而服务器资源也应不断优化，将页面的html拼接转接到客户端完成，节省服务器资源，且更加易于维护，这为今后工作带来了很大便利。
再可以将前后端代码分离，岗位清晰，使后台程序人员可更好的去完成逻辑运算，而前端人员岗位更加专精、统一。
js模板引擎越来越多的得到应用，如今已经出现了几十种js模板引擎，国内各大互联网公司也都开发了自己的js模板引擎（淘宝的kissy template，腾讯的artTemplate，百度的baiduTemplate等），如何从这么多纷繁的模板引擎中选择一款适合自己的呢，笔者最近对主流的js模板引擎（mustache，doT，juicer，artTemplate，baiduTemplate，Handlebars，Underscore）做了一番调研，分享出来希望对大家有用。
从这几个指标来比较js模板引擎：
1 文件大小 - 影响网络传输时间 2 执行速度（性能） - 影响响应速度，涉及模板解析和渲染 3 语法简明/易用/灵活/自定义操作符 - 影响开发效率和维护难度 4 错误处理/调试 - 影响开发效率和维护难度 5 安全（XSS） - 是否防止XSS
1 文件大小（压缩后） Mustache：5k doT：4k juicer：7.65k artTemplate(腾讯)：5k baiduTemplate(百度)：3k Underscore(Arale)：11.7k - 不只是模板，还包含很多js语言增强功能 Handlebars(Arale)：30.5k
2 执行速度（不要迷恋速度） 对于执行速度，不得不提模板“编译速度”和“渲染速度”。这几个主流模板都支持将模板预编译，然后再渲染。 这里有一篇文章《高性能JavaScript模板引擎原理解析》，说artTemplate的速度达到理论极限，实际说的是渲染速度，它的综合速度并不快。 一般情况下，每页面只有一两个模板，执行时间差别不大。 >>这里<<有个测试页面，根据artTemplate的测试页面《引擎渲染速度竞赛》改的，揭示了几个主流js模板引擎的性能情况，大致结果截图如下：
3 语法 简明/易用/灵活/自定义操作符 - 影响开发效率和维护难度
语法需要一段时间的使用经验才能更深切地体会到优缺点，并且每个人喜欢的语法风格也不同，这部分可能略带个人主观色彩。 这几个js模板引擎的语法可以粗略分为两种，一种是类似javascript的语法（doT, artTemplate, underscore），另一种是与javascript差异较大的语法（Mustache, juicer, handlebars）。从易上手的角度来看，类javascript语法更容易被新手掌握，但是熟练掌握之后，各个模板的语法都能满足我们的需求，可以按个人喜好来选择。
Mustache声称是无逻辑（logic-less）模板，没有for、if...else...语法，但实际可以实现循环和分支，还可以实现更复杂的逻辑。 doT模板语法灵活，阅读起来很易懂。可以方便地改造成jquery插件。
<!--Mustache 的模板 -->
<script id="Mustache" type="text/tmpl">
<ul>
{{#list}}
<li>{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}</li>
{{/list}}
</ul>
</script>
<!-- doT 的模板 -->
<script id="doT" type="text/tmpl">
<ul>
{{ for (var val, i = 0, l = it.list.length; i < l; i ++) { }}
{{ val = it.list; }}
<li>{{=val[i].index}}. 用户: {{=val[i].user}}/ 网站：{{=val[i].site}}</li>
{{ } }}
</ul>
</script>
<!--juicer 的模板 -->
<script id="juicer" type="text/tmpl">
<ul>
{@each list as val}
<li>$${val.index}. 用户: $${val.user}/ 网站：$${val.site}</li>
{@/each}
</ul>
</script>
<!-- artTemplate 的模板 -->
<script id="template" type="text/tmpl">
<ul>
<% for (i = 0, l = list.length; i < l; i ++) { %>
<li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>
<% } %>
</ul>
</script>
<!-- underscore 的模板 -->
<script id="underscoreTemplate" type="text/tmpl">
<ul>
<% for (var i = 0, l = list.length; i < l; i ++) { %>
<li><%=list[i].index%>. 用户: <%=list[i].user%>/ 网站：<%=list[i].site%></li>
<% } %>
</ul>
</script>
<!-- Handlebars 的模板 -->
<script id="Handlebars" type="text/tmpl">
<ul>
{{#list}}
<li>{{{index}}}. 用户: {{{user}}}/ 网站：{{{site}}}</li>
{{/list}}
</ul>
</script>
4 错误处理/调试 - 影响开发效率和维护难度 artTemplate 有详细的错误提示信息，查错方便，不影响后面代码的继续执行 kissy template 错误信息直接输出在页面，而不是在控制台。不影响后面代码的继续执行 juicer 控制台提示模板渲染出错，不影响后面代码的继续执行 mustache 没有任何错误信息，不影响后面代码的继续执行 其他控制台报脚本错误 js执行中断，不知道是哪里出错
5 安全- 很重要。是否防止XSS 以上几个模板引擎全都支持html转义，防止XSS
最终的一个对比：
哈尔滨品用软件有限公司致力于为哈尔滨的中小企业制作大气、美观的优秀网站，并且能够搭建符合百度排名规范的网站基底，使您的网站无需额外费用，即可稳步提升排名至首页。欢迎体验最佳的哈尔滨网站建设。