ウェブサイト分析: 高性能 JavaScript テンプレート エンジンの原理の分析

Webの発展に伴い、フロントエンドアプリケーションはますます複雑になり、バックエンドをベースにしたJavaScript（Node.js）も登場し始めました。このとき、JavaScriptにはより大きな期待が寄せられ、同時にJavaScript MVCの考え方も普及してきました。データとインターフェースの分離の最も重要な部分として、JavaScript テンプレート エンジンは開発者からますます注目を集めています。過去 1 年間で、オープンソース コミュニティで盛んになり、Twitter、Taobao、Sina Weibo、Tencent QQ Space、Tencent Weibo などの大規模な Web サイトで見られるようになりました。

この記事では、最も簡単なサンプル コードを使用して、既存の JavaScript テンプレート エンジンの原理、特に新世代の JavaScript テンプレート エンジン artTemplate の機能実装原理について説明します。一緒に議論することを歓迎します。

artTemplateの紹介

artTemplate は、新世代の JavaScript テンプレート エンジンです。プリコンパイルを使用してパフォーマンスの質的な飛躍を実現し、JavaScript エンジンの特性を最大限に活用して、フロントエンドとバックエンドの両方で非常に優れたパフォーマンスを実現します。 Chrome でのレンダリング効率テストでは、有名なエンジンである Mustache と micro tmpl のそれぞれ 25 倍と 32 倍でした。

パフォーマンス上の利点に加えて、デバッグ機能も注目に値します。テンプレート デバッガーは、レンダリング エラーの原因となるテンプレート ステートメントを正確に特定できるため、テンプレートの作成中にデバッグできないという悩みが解消され、開発が効率化され、単一のテンプレート エラーによってアプリケーション全体がクラッシュする状況を回避できます。

artTemplate これらすべてが 1.7kb (gzip) に収まりました!

JavaScript テンプレート エンジンの基本原則

各エンジンではテンプレート構文、構文解析、変数割り当て、文字列連結の実装が異なりますが、主要なレンダリング原則は依然として JavaScript 文字列の動的な実行です。

この記事では、JavaScript 文字列の動的実行に関して、テンプレート コードを例として取り上げます。

これは非常にシンプルなテンプレートの書き方で、"" は closeTag (論理文の終了タグ) で、openTag の後に "=" が続くと変数の内容が出力されます。

HTML ステートメントと変数出力ステートメントは直接出力され、解析された文字列は次のようになります。

構文解析が完了すると、通常はレンダリング メソッドが返されます。

レンダリングテスト:

上記のレンダリング方法では、テンプレート変数の割り当てに with ステートメントを使用し、文字列の連結に配列の push メソッドを使用して、IE6 および 7 でのパフォーマンスを向上させています。jQuery の作者 John が開発したマイクロ テンプレート エンジン tmpl は、この方法の代表的なものです。http://ejohn.org/blog/javascript-micro-templating/ を参照してください。

基本的な実装から、従来の JavaScript テンプレート エンジンには解決すべき 2 つの問題があることがわかります。

1. パフォーマンス: テンプレート エンジンは、レンダリングに Function コンストラクターに依存しています。eval、setTimeout、setInterval などの Function は、テキストを使用して JavaScript 解析エンジンにアクセスする方法を提供しますが、この方法で JavaScript を実行するとパフォーマンスが非常に低くなります。

2. デバッグ: 文字列は動的に実行されるため、エラーが発生した場合、デバッガーはエラーの原因をキャプチャできず、テンプレートのバグのデバッグが非常に困難になります。フォールト トレランスのないエンジンでは、ローカル テンプレートによってデータの異常が発生し、アプリケーション全体がクラッシュする可能性もあります。テンプレートの数が増えると、メンテナンス コストが大幅に増加します。

artTemplateの効率の秘密

1. プリコンパイル

上記のテンプレート エンジンの実装原則では、テンプレート変数を割り当てる必要があるため、各レンダリングで JavaScript 文字列を動的にコンパイルして変数の割り当てを完了する必要があります。ただし、artTemplate のコンパイルと割り当てのプロセスはレンダリング前に完了します。これは「プリコンパイル」と呼ばれます。 artTemplate テンプレート コンパイラは、いくつかの簡単なルールに従ってすべてのテンプレート変数を抽出し、レンダリング関数の先頭で宣言します。この関数は次のものに似ています。

この自動生成された関数は、手書きの JavaScript 関数とまったく同じです。同じ実行回数でも CPU とメモリの使用量は大幅に削減され、パフォーマンスは限界に近づきます。

artTemplate の多くの機能は、サンドボックス仕様やカスタム構文など、事前コンパイルに基づいていることに留意してください。

2. 文字列を追加するより速い方法

多くの人は、配列のプッシュ メソッドによる文字列の連結は += よりも速いと誤解しています。ただし、これは IE6 ～ 8 ブラウザーにのみ当てはまります。実際の測定では、最新のブラウザでは配列のプッシュ方式よりも += の方が高速であり、v8 エンジンでは += を使用すると配列の連結よりも 4.7 倍高速であることが示されています。そのため、artTemplate では、JavaScript エンジンの特性に応じて 2 つの異なる文字列連結方法を使用します。

ArtTemplate デバッグモードの原則

フロントエンド テンプレート エンジンは、バックエンド テンプレート エンジンとは異なります。フロントエンド テンプレート エンジンは動的に解析されるため、デバッガーはエラー行番号を見つけることができません。ただし、artTemplate は巧妙な方法を使用して、テンプレート デバッガーがレンダリング エラーの原因となるテンプレート ステートメントを正確に見つけられるようにします。例:

artTemplate は、レンダリング エラー (レンダリング エラー) とコンパイル エラー (構文エラー) の 2 種類のエラー キャプチャをサポートしています。

1. レンダリングエラー

レンダリング エラーは、通常、テンプレート データ エラーまたは変数エラーによって発生します。レンダリング時にエラーが発生した場合にのみ、テンプレートはデバッグ モードで再コンパイルされ、通常のテンプレート実行効率には影響しません。テンプレート コンパイラはテンプレートの改行に従って行番号を記録し、コンパイルされた関数は次のようになります。

実行中にエラーが発生すると、例外テンプレートに対応する行番号がすぐにスローされます。テンプレート デバッガーは、行番号に基づいてテンプレートに対応するステートメントを逆チェックし、コンソールに出力します。

2. コンパイルエラー

コンパイル エラーは通常、不完全なネスト、不明な構文などのテンプレート構文エラーです。 artTemplate は完全な字句解析を行わないため、エラーの原因箇所を特定することは不可能であり、開発者が判断できるようにエラー メッセージとソース コードを元のテキストで出力することしかできません。

収入を増やし、支出を減らす

artTemplate はオープンソース契約に基づいてリリースされています。営利企業と個人の両方がプロジェクトで無料で使用できます。ぜひ一緒に改良してください。

ダウンロードアドレス:

https://github.com/aui/artテンプレート

オンラインプレビュー:

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

（この記事はTencent CDC Blogからの引用です。転載の際は出典を明記してください）

元のタイトル: ウェブサイト分析: 高性能 JavaScript テンプレート エンジンの原理の分析

キーワード: ウェブサイトのスコアリング、高パフォーマンス、JavaScript、テンプレート、エンジン、原理、分析、ウェブマスター、ウェブサイトのプロモーション、収益化