Analysis and comparison of dot,juicer,arttemplate template engine in JavaScript

Can be separated from the front and back of the code, the position is clear, so that the background program staff can better to complete the logic operation, and the front-end personnel posts more specialized and unified.

JS template engine More and more applications, now there have been dozens of kinds of JS template engine, the domestic major Internet companies have also developed their own JS template engine (Taobao Kissy template, Tencent's Arttemplate, Baidu Baidutemplate, etc.), How to choose a suitable one from so many complicated template engine, the author recently to the mainstream JS template engine (Mustache,dot,juicer,arttemplate,baidutemplate,handlebars, Underscore) did some research, share out the hope for everyone useful.
From these several indicators to compare the JS template engine:

1 File size – affects network transmission time 2 execution speed (performance) – Affects response speed, involves template parsing and rendering 3 syntax concise/easy-to-use/Flexible/Custom operators – Impact development efficiency and maintenance difficulty 4 error handling/debugging – Impact development efficiency and maintenance difficulty 5 security (XSS) – whether to prevent Xss

1 File size (after compression) mustache:5k dot:4k juicer:7.65k arttemplate (Tencent): 5k Baidutemplate (Baidu): 3k underscore (Arale): 11.7k– is not just a template, Also contains a lot of JS language enhancements handlebars (Arale): 30.5k

2 Execution speed (do not crush speed) for execution speed, you have to mention the template "compile speed" and "Render speed". These mainstream templates support precompiling a template and then rendering it. Here is an article, "High-performance JavaScript template engine principle analysis," said Arttemplate speed to reach the theoretical limit, actually said the rendering speed, it is not fast synthesis speed. In general, there are only one or two templates per page, and the execution time is very different. >> here << there is a test page, according to the Arttemplate test page "Engine rendering Speed contest" changed, revealing several mainstream JS template engine performance, the approximate results screenshot as follows:

You can see that Arttemplate,juicer,dot is much faster than other template engines.

3 Syntax Concise/easy-to-use/flexible/Custom operators-impact development efficiency and maintenance difficulties
Grammar requires a period of experience in order to more deeply appreciate the advantages and disadvantages, and everyone likes the grammatical style is also different, this part may be slightly personal subjective color. These JS template engine syntax can be roughly divided into two types, one is similar to JavaScript syntax (DoT, arttemplate, underscore), and the other is the syntax of the larger difference with JavaScript (mustache, juicer, Handlebars). From an easy to start point of view, the class JavaScript syntax is more easily mastered by beginners, but after mastering, the syntax of each template can meet our needs, you can choose according to personal preferences.
Mustache claims to be a logic-less template without a for, if...else ... syntax, but you can actually implement loops and branches, and you can implement more complex logic. Dot template syntax is flexible and easy to read. can be easily transformed into jquery plug-ins.

The code is as follows

Copy Code

<!--mustache Template--> <script id= "Mustache" type= "Text/tmpl" > <ul> {{#list}}} <li>{{{index}}. User: {{{{user}}}/web site:{{{site}}}</li> {{/list}}} </ul> </script> <!--doT template--> <script id= "DoT" type= "Text/tmpl" > <ul> {for (var val, i = 0, L = it.list.length I < L + +) {}} {{val = it.list;}} <li>{{=val[i].index}}. User: {{=val[i].user}}/website:{{=val[i].site}}</li> {{ } }} </ul> </script> <!--juicer template--> <script id= "Juicer" type= "Text/tmpl" > <ul> {@each list as Val} <li>$${val.index}. User: $${val.user}/website:$${val.site}</li> {@/each} </ul> </script> <!--arttemplate template--> <script id= "template" type= "Text/tmpl" > <ul> <% for (i = 0, L = list.length I < L + +) {%> <li><%=list[i].index%>. User: <%=list[i].user%>/website:<%=list[i].site%></li> <%}%> </ul> </script> <!--underscore template--> <script id= "Underscoretemplate" type= "Text/tmpl" > <ul> <% for (var i = 0, L = list.length I < L + +) {%> <li><%=list[i].index%>. User: <%=list[i].user%>/website:<%=list[i].site%></li> <%}%> </ul> </script> <!--handlebars template--> <script id= "Handlebars" type= "Text/tmpl" > <ul> {{#list}}} <li>{{{index}}. User: {{{{user}}}/web site:{{{site}}}</li> {{/list}}} </ul> </script>

4 Error handling/debugging – impact on development efficiency and maintenance difficulty Arttemplate has detailed error message information, easy to check, do not affect the continuation of the code behind the execution Kissy template error messages directly output in the page, rather than in the console. Do not affect the continuation of the following code Juicer console prompts template rendering error, does not affect the continuation of the code after the execution mustache no error message, does not affect the subsequent code to continue to perform other console script error js execution interrupted, do not know where the error

5 Security-very important. Whether to prevent XSS more than a few template engines all support HTML escape, prevent XSS
A final contrast: