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, javascript has been placed with greater expectations. At the same time, javascript MVC ideas have also become popular. As the most important part of the separation of data and interfaces, the javascript template engine has attracted more and more attention from developers. In the past year, it has blossomed in the open source community. They can be seen on large websites such as Twitter, Taobao, Sina Weibo, Tencent QQ Space, and Tencent Weibo.
This article will use the simplest example code to describe the principles of the existing javascript template engine, including the characteristics implementation principles of the new generation of javascript template engine artTemplate. Welcome to discuss them together.
artTemplate Introduction
artTemplate is a new generation of javascript template engine. It uses precompilation to make a qualitative leap in performance and makes full use of the features of javascript engine, making its performance extremely outstanding both in the front-end and back-end. In the rendering efficiency test under Chrome, it is 25 and 32 times that of well-known engines Mustache and micro tmpl.
In addition to performance advantages, debugging functions are also worth mentioning. The template debugger can accurately locate the template statement that triggers rendering errors, solve the pain of inadvertent debugging during the writing of templates, make development efficient, and avoid the entire application crash due to errors in a single template.
artTemplate This is all implemented in 1.7kb(gzip)!
JavaScript template engine basics
Although each engine has different implementation methods from template syntax, syntax parsing, variable assignment, and string splicing, the key rendering principle is still to dynamically execute javascript strings.
Regarding dynamic execution of javascript strings, this article uses a piece of template code as an example:
This is a very simple template writing, where "" is closeTag (logical statement closed tag). If openTag is followed by "=", the content of the variable will be output.
HTML statements and variable output statements are output directly, and the parsed strings are similar:
After the syntax analysis is completed, the rendering method will generally be returned:
Rendering test:
In the above render method, template variable assignment uses the with statement, and string splicing uses the push method of arrays to improve performance in IE6 and 7. The micro template engine tmpl developed by jQuery author john is a typical representative of this method, see: http://ejohn.org/blog/javascript-micro-templating/
It can be seen from the principle implementation that two problems to be solved are left in the traditional javascript template engine:
1. Performance: When rendering the template engine, it relies on the Function constructor to implement it. Like eval, setTimeout, and setInterval, Function provides a method to access the javascript parsing engine using text, but the performance of executing javascript in this way is very low.
2. Debugging: Since it is a dynamic execution string, if the debugger encounters an error, the debugger cannot catch the error source, causing the template BUG debugging to become extremely painful. In an engine that does not perform fault tolerance, if local templates may even cause the entire application to crash due to data exceptions, the maintenance cost will increase dramatically as the number of templates increases.
artTemplate The secret of efficient
1. Pre-compiled
In the above-mentioned template engine implementation principle, since the template variable is assigned, each rendering requires dynamic compilation of javascript strings to complete variable assignment. However, the compilation and assignment process of artTemplate is completed before rendering, which is called "precompilation". The artTemplate template compiler will extract all template variables according to some simple rules and declare them at the head of the rendering function. This function is similar to:
This automatically generated function is like a hand-written javascript function. With the same number of executions, both CPU and memory usage have been significantly reduced, and the performance is almost at the limit.
It is worth mentioning that many features of artTemplate are based on precompiled implementations, such as sandbox specifications and custom syntax.
2. Faster string addition method
Many people mistakenly think that the array push method will splice strings faster than +=. You should know that this is only in the IE6-8 browser. Actual measurements show that modern browsers use += to use the array push method, while in the v8 engine, using the += method is 4.7 times faster than array splicing. Therefore, artTemplate adopts two different string splicing methods according to 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 dynamic parsing, so the debugger cannot locate the wrong line number. artTemplate cleverly allows the template debugger to accurately locate the template statement that throws rendering errors, for example:
artTemplate supports two types of error capture, one is rendering error (Render Error) and compiling error (Syntax Error).
1. Rendering error
Rendering errors are generally caused by template data errors or variable errors. When rendering, they will enter debug mode to recompile the template without affecting the normal template execution efficiency. The template compiler records line numbers based on the template line break, and the compiled function is similar:
When an error occurs during the execution process, the line number corresponding to the exception template is immediately thrown, and the template debugger then checks the corresponding statements corresponding to the template according to the line number and prints it to the console.
2. Compilation errors
Compilation errors are generally template syntax errors, such as unqualified nesting, unknown syntax, etc. Since artTemplate does not conduct a complete lexical analysis, it is impossible to determine the location of the error source, and can only output the error information and source code for the original text for developers to judge.