Web Analytics: A high performance JavaScript template engine principle analysis

Intermediary transaction SEO diagnosis Taobao guest Cloud host technology Hall

As the web grows, front-end applications become more complex, and JavaScript (Node.js), based on back-end, is starting to emerge, while JavaScript is being placed in greater anticipation, while JavaScript MVC is becoming popular. JavaScript template engine as a data and interface separation of the most important part of the work, more and more attention by developers, in the last year in the open source community is a blossoming, in Twitter, Taobao, Sina Weibo, Tencent QQ space, Tencent micro-blog and other large sites can see their figure.

This article will use the simplest example code to describe the principles of the existing JavaScript template engine, including the new generation of JavaScript template engine Arttemplate features implementation principles, welcome to discuss.

Arttemplate Introduction

Arttemplate is the next-generation JavaScript template engine, which uses precompilation to make a qualitative leap in performance and leverages JavaScript engine features to make its performance both front-end and back-end excellent. In the Chrome rendering efficiency test is the well-known engine mustache and micro Tmpl 25, 32 times times.

In addition to performance advantages, debugging features are also worth mentioning. The template debugger can pinpoint the template statement that throws the render error, resolve the pain that cannot be debugged during the writing of the template, make development more efficient, and avoid the failure of a single template to cause the entire application to crash.

Arttemplate all this is implemented in 1.7KB (gzip)!

JavaScript Template engine Fundamentals

Although each engine differs from template syntax, syntax parsing, variable assignment, and string concatenation, the key rendering principle is still the dynamic execution of JavaScript strings.

For the dynamic execution of JavaScript strings, this article takes an example of a template code:

This is a very simple template, in which, "" for Closetag (logical statement closed tag), if the opentag followed by "=" will output the contents of the variable.

The HTML statement and the variable output statement are directly exported, and the parsed string resembles the following:

When parsing is finished, the rendering method is usually returned:

Render test:

In the above render method, the template variable assignment uses the With statement, the string concatenation uses the array push method to promote the performance under IE6, 7, the miniature template engine developed by JQuery author John Tmpl is a typical representative of this way, see also: http:// ejohn.org/blog/javascript-micro-templating/

As the principle implementation is visible, the traditional JavaScript template engine leaves two unresolved issues:

1, Performance: Template engine rendering when dependent on the function constructor implementation, function and eval, settimeout, setinterval, like, provides the use of text access to the JavaScript parsing engine method, but this execution JavaScript performance is very low.

2, debugging: Because it is the dynamic execution string, if encountered error debugger can not catch the source of the error, resulting in template BUG debugging becomes extremely painful. In the absence of fault-tolerant engine, if the local template because of the data anomaly can even cause the entire application crashes, as the number of templates increases, maintenance costs will increase.

Arttemplate Efficient Secret

1, precompiled

In the above template engine implementation principle, because you want to assign a template variable, you need to dynamically compile the JavaScript string completion variable assignment for each rendering. The Arttemplate compilation assignment process is done before rendering, which is called precompilation. The arttemplate template compiler extracts all template variables according to some simple rules, declaring them in the header of the render function, which is similar to the following:

This auto-generated function, like a hand-written JavaScript function, has a significant reduction in both CPU and memory usage, with almost unlimited performance.

It is worth mentioning: Arttemplate Many features are based on precompiled implementation, such as sandbox specifications and custom syntax.

2, Faster string addition method

Many people mistakenly think that the array push method stitching strings will be faster than + +, knowing that this is just under the Ie6-8 browser. The measured results show that modern browsers use + + faster than the array push method, while in the V8 engine, the + + method is 4.7 times times faster than the array stitching. So Arttemplate uses two different string concatenation methods based on JavaScript engine features.

Arttemplate Debugging Mode principle

The front-end template engine, unlike the back-end template engine, is dynamic parsing, so the debugger cannot navigate to the error line number, and arttemplate the template debugger to precisely navigate to the template statement that caused the render error, for example:

Arttemplate supports two types of error trapping, one is rendering error (Render error) and compilation error (Syntax error).

1. Render Error

Rendering errors are generally caused by template data errors or variable errors, rendering only when encountered errors will enter debug mode recompile template, without affecting the Normal template execution efficiency. The template compiler records line numbers based on the template newline character, and the compiled function looks like this:

When execution encounters an error, it immediately throws the line number of the exception template, and the template debugger then checks the template's corresponding statement against the line number and prints it to the console.

2. Compile error

Compilation errors are typically template syntax errors, such as unqualified nesting, unknown syntax, and so on. Because Arttemplate did not perform a complete lexical analysis, it is not possible to determine the location of the source of the error, only the error information and source code for the original output, for developers to judge.

Expenditure

Arttemplate based on open source agreement, both commercial companies and individuals can be used free of charge in the project, welcomed the common perfect.

Download Address:

Https://github.com/aui/artTemplate

Online preview:

http://aui.github.com/artTemplate/

(This article originates from Tencent CDC Blog, please indicate the source when reprint)