Website analysis Principle Analysis of high performance JavaScript template engine

With the development of web

, the front-end application becomes more and more complicated, the back-end based on JavaScript (Node.js) also began to emerge, at this time JavaScript is placed greater expectations at the same time, JavaScript MVC has begun to pop up. The JavaScript template engine as the data and interface separation work in the most important part, more and more developers attention, nearly a year in the open source community is to see All flowers bloom together., they figure in Twitter, taobao.com, Sina, micro-blog, micro-blog and other large Tencent Tencent QQ space website.

this article will describe the principles of the existing JavaScript template engine with the simplest sample code, including the features of the new generation JavaScript template engine artTemplate, and welcome to explore together.

artTemplate introduces

artTemplate is a new generation of JavaScript template engine, which uses precompiled way that performance has been a qualitative leap, and make full use of the JavaScript engine characteristics, so its performance has excellent performance in both the front and the rear. Under chrome, the rendering efficiency tests are 25, 32 times the well-known engine Mustache and micro tmpl, respectively.

 

In addition to the performance advantages, the debugging function of

is also worth mentioning. The debugger can lead to accurate positioning template template rendering error, solve the template programming cannot debug pain, make the development more efficient, but also to avoid the error due to the single template because of the collapse of the application.

artTemplate, this is all implemented in 1.7KB (gzip),

!The basic principle of

JavaScript template engine

although each engine works differently from template syntax, syntax parsing, variable assignments, and string concatenation, the key rendering principle is still the dynamic execution of JavaScript strings.

on the dynamic implementation of JavaScript strings, this article to a template code example:

 

this is a very simple template, in which "closeTag" (logical statement closed label), if the openTag followed by "=", it will output the variable content.

The

HTML statement and the variable output statement are >

Leave a Reply

Your email address will not be published. Required fields are marked *