高性能 JavaScript テンプレート エンジン (グラフィックスとテキスト) の原理の詳細な紹介

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

この記事では、最も単純なサンプル コードを使用して、新世代の JavaScript テンプレート エンジン artTemplate の機能実装の原則を含む、既存の JavaScript テンプレート エンジンの原則を説明します。

artTemplate の概要

artTemplate は、プリコンパイルを使用してパフォーマンスの質的向上を実現し、JavaScript エンジンの機能を最大限に活用して、フロントエンドとパフォーマンスの両方で非常に優れたパフォーマンスを実現する新世代の JavaScript テンプレート エンジンです。バックエンド。 chrome でのレンダリング効率テストでは、よく知られたエンジンである Mustache と micro tmpl のそれぞれ 25 倍と 32 倍でした。

パフォーマンス上の利点に加えて、デバッグ機能も言及する価値があります。テンプレート デバッガーは、レンダリング エラーの原因となったテンプレート ステートメントを正確に特定できるため、テンプレートの作成プロセス中にデバッグできないという問題が解決され、開発がより効率的になり、単一のテンプレート エラーによるアプリケーション全体のクラッシュが回避されます。

artTemplate すべて 1.7kb(gzip) に収まります!

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

各エンジンには、テンプレート構文、構文解析、変数割り当て、文字列スプライシングなどの異なる実装方法がありますが、重要なレンダリング原則は依然として JavaScript 文字列の動的実行です。

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

これは非常に単純なテンプレートの記述方法であり、「」はcloseTag(論理文終了タグ)であり、 openTagの後に「=」が続くと変数の内容が出力されます。

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

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

レンダリング テスト:

in 上記の render メソッドでは、テンプレート変数の代入には with ステートメントを使用し、文字列の結合には array Push メソッドを使用して、IE6 および 7 でのパフォーマンスを向上させています。マイクロ テンプレート エンジン tmpl が開発しましたby jQuery 著者 john はこれです このメソッドの典型的な代表例については、http://www.php.cn/

を参照してください。 原則的な実装から、従来の JavaScript では解決すべき 2 つの問題があることがわかります。テンプレート エンジン:

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

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

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はオープンソースライセンスに基づいて公開されており、商用企業と個人の両方がプロジェクトで無料で使用できます。

以上が高性能 JavaScript テンプレート エンジン (グラフィックスとテキスト) の原理の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。