高性能JavaScript模板發(fā)動機原理解析

瀏覽：作者：來源：時間：2024-05-21 分類：

隨著 web 發(fā)展，前端應用變得越來越復雜，基于后端的 javascript(Node.js) 也開始嶄露頭角，此時 javascript 被寄予了更大的期望，與此同時 javascript MVC 思想也開始流行起來。javascript 模板引擎作為數據...

隨著 web 發(fā)展，前端應用變得越來越復雜，基于后端的 javascript(Node.js) 也開始嶄露頭角，此時 javascript 被寄予了更大的期望，與此同時 javascript MVC 思想也開始流行起來。javascript 模板發(fā)動機作為數據與界面分離工作中最重要一環(huán)，越來越受開發(fā)者關注，近一年來在開源社區(qū)中更是百花齊放，在 Twitter、淘寶網、新浪微博、騰訊QQ空間、騰訊微博等大型網站中均能看到它們的身影。

本文將用最簡單的示例代碼描述現有的 javascript 模板發(fā)動機的原理，包括新一代 javascript 模板發(fā)動機 artTemplate 的特性實現原理，歡迎共同探討。

artTemplate 介紹

artTemplate 是新一代 javascript 模板發(fā)動機，它采用預編譯方式讓性能有了質的飛躍，并且充分利用 javascript 發(fā)動機特性，使得其性能無論在前端還是后端都有極其出色的表現。在 chrome 下渲染效率測試中分別是知名發(fā)動機 Mustache 與 micro tmpl 的 25 、 32 倍。

除了性能優(yōu)勢外，調試功能也值得一提。模板調試器可以精確定位到引發(fā)渲染錯誤的模板語句，解決了編寫模板過程中無法調試的痛苦，讓開發(fā)變得高效，也避免了因為單個模板出錯導致整個應用崩潰的情況發(fā)生。

artTemplate 這一切都在 1.7kb(gzip) 中實現！

javascript 模板發(fā)動機基本原理

雖然每個發(fā)動機從模板語法、語法解析、變量賦值、字符串拼接的實現方式各有所不同，但關鍵的渲染原理仍然是動態(tài)執(zhí)行 javascript 字符串。

關于動態(tài)執(zhí)行 javascript 字符串，本文以一段模板代碼舉例：

這是一段非常樸素的模板寫法，其中，”” 為 closeTag (邏輯語句閉合標簽)，若 openTag 后面緊跟 “=” 則會輸出變量的內容。

HTML語句與變量輸出語句被直接輸出，解析后的字符串類似：

語法分析完畢一般還會返回渲染方法：

渲染測試：

由原理實現可見，傳統(tǒng) javascript 模板發(fā)動機中留下兩個待解決的問題：

1、性能：模板發(fā)動機渲染的時候依賴 Function 構造器實現，Function 與 eval、setTimeout、setInterval 一樣，提供了使用文本訪問 javascript 解析發(fā)動機的方法，但這樣執(zhí)行 javascript 的性能非常低下。

2、調試：由于是動態(tài)執(zhí)行字符串，若遇到錯誤調試器無法捕獲錯誤源，導致模板 BUG 調試變得異常痛苦。在沒有進行容錯的發(fā)動機中，局部模板若因為數據異常甚至可以導致整個應用崩潰，隨著模板的數目增加，維護成本將劇增。

artTemplate 高效的秘密

1、預編譯

在上述模板發(fā)動機實現原理中，因為要對模板變量進行賦值，所以每次渲染都需要動態(tài)編譯 javascript 字符串完成變量賦值。而 artTemplate 的編譯賦值過程卻是在渲染之前完成的，這種方式稱之為“預編譯”。artTemplate 模板編譯器會根據一些簡單的規(guī)則提取好所有模板變量，聲明在渲染函數頭部，這個函數類似：

這個自動生成的函數就如同一個手工編寫的 javascript 函數一樣，同等的執(zhí)行次數下無論 CPU 還是內存占用都有顯著減少，性能近乎極限。

值得一提的是：artTemplate 很多特性都基于預編譯實現，如沙箱規(guī)范與自定義語法等。

2、更快的字符串相加方式

很多人誤以為數組 push 方法拼接字符串會比 += 快，要知道這僅僅是 IE6-8 的瀏覽器下。實測表明現代瀏覽器使用 += 會比數組 push 方法快，而在 v8 發(fā)動機中，使用 += 方式比數組拼接快 4.7 倍。所以 artTemplate 根據 javascript 發(fā)動機特性采用了兩種不同的字符串拼接方式。