Detailed explanation of the implementation principles of high-performance JavaScript template engine_javascript skills

With the development of the web, front-end applications have become more and more complex, and back-end-based javascript (Node.js) has also begun to emerge. At this time, greater expectations have been placed on javascript, and at the same time, javascript MVC ideas have also begun to become popular. stand up. As the most important part in the separation of data and interface, the javascript template engine has attracted more and more attention from developers. In the past year, it has flourished in the open source community. It has been used in Twitter, Taobao, Sina Weibo, Tencent QQ Zone, and Tencent Weibo. They can be seen in large websites such as Bo.

This article will use the simplest example code to describe the principles of the existing javascript template engine, including the feature implementation principle of the new generation javascript template engine artTemplate. Welcome to discuss together.

artTemplate Introduction

artTemplate is a new generation of javascript template engine. It uses pre-compilation to achieve a qualitative leap in performance, and fully utilizes the characteristics of the javascript engine to achieve extremely excellent performance in both the front-end and back-end. In the rendering efficiency test under chrome, it is 25 and 32 times that of the well-known engines Mustache and micro tmpl respectively.

In addition to the performance advantages, the debugging capabilities are also worth mentioning. The template debugger can accurately locate the template statement that caused the rendering error, which solves the pain of being unable to debug during the process of writing templates, makes development more efficient, and avoids the entire application crashing due to a single template error.

artTemplate All this in 1.7kb(gzip)!

Basic principles of javascript template engine

Although each engine has different implementation methods from template syntax, syntax parsing, variable assignment, and string splicing, the key rendering principle is still the dynamic execution of javascript strings.

Regarding dynamic execution of javascript strings, this article uses a template code as an example:

This is a very simple template writing method, where "" is closeTag (logical statement closing tag). If openTag is followed by "=", the contents of the variable will be output.

HTML statements and variable output statements are output directly, and the parsed string is similar:

After syntax analysis is completed, the rendering method will usually be returned:

Rendering test:

In the render method above, the template variable assignment uses the with statement, and the string splicing uses the array push method to improve performance under IE6 and 7. The micro template engine tmpl developed by jQuery author john is a typical example of this method. For representatives, see: http://ejohn.org/blog/javascript-micro-templating/

It can be seen from the principle implementation that there are two problems to be solved in the traditional javascript template engine:

1. Performance: The template engine relies on the Function constructor when rendering. Function, like eval, setTimeout, and setInterval, provides a method of using text to access the JavaScript parsing engine, but the performance of executing JavaScript in this way is very low.

2. Debugging: Since it is a dynamic execution string, if an error is encountered, the debugger cannot capture the source of the error, making template BUG debugging extremely painful. In an engine without fault tolerance, local templates may even cause the entire application to crash due to data anomalies. As the number of templates increases, maintenance costs will increase dramatically.

artTemplate’s secret to efficiency

1. Pre-compilation

In the above template engine implementation principle, because template variables need to be assigned values, each rendering requires dynamic compilation of javascript strings to complete variable assignments. However, the compilation and assignment process of artTemplate is completed before rendering. This method is called "pre-compilation". The artTemplate template compiler will extract all template variables according to some simple rules and declare them in the head of the rendering function. This function is similar to:

This automatically generated function is just like a hand-written javascript function. With the same number of executions, both CPU and memory usage are significantly reduced, and the performance is close to the limit.

It is worth mentioning that many features of artTemplate are based on precompiled implementation, such as sandbox specifications and custom syntax.

2. Faster string addition method

Many people mistakenly believe that the array push method to concatenate strings is faster than =. You must know that this is only under the IE6-8 browser. Actual measurements show that using = in modern browsers is faster than the array push method, and in the v8 engine, using = is 4.7 times faster than array splicing. Therefore, artTemplate uses two different string splicing methods based on the characteristics of the javascript engine.

artTemplate debug mode principle

The front-end template engine is not like the back-end template engine. It is dynamically parsed, so the debugger cannot locate the error line number, and artTemplate uses a clever way to allow the template debugger to accurately locate the template statement that caused the rendering error, such as :

artTemplate supports two types of error capture, one is rendering error (Render Error) and compilation error (Syntax Error).

1. Rendering error

Rendering errors are generally caused by template data errors or variable errors. Only when an error is encountered during rendering, the debug mode will be entered to recompile the template, without affecting the normal template execution efficiency. The template compiler records the line number according to the template newline character, and the compiled function is similar:

When an error is encountered during execution, the line number corresponding to the exception template is immediately thrown. The template debugger then checks the statement corresponding to the template based on the line number and prints it to the console.

2. Compilation error

Compilation errors are generally template syntax errors, such as unqualified nesting, unknown syntax, etc. Since artTemplate does not perform complete lexical analysis, it cannot determine the location of the error source. It can only output the original text of the error message and source code for developers to judge.