資源描述：
《arttemplate高性能javascript模板引擎》由會員上傳分享，免費在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。
1、artTemplate：高性能JavaScript模板引擎隨著web發(fā)展，前端應(yīng)用變得越來越復雜，基于后端的JavaScript(Node.js)也開始嶄露頭角，此時JavaScript被寄予了更大的期望，與此同時JavaScriptMVC思想也開始流行起來。JavaScript模板引擎作為數(shù)據(jù)與界面分離工作中最重要一環(huán)，越來越受開發(fā)者關(guān)注，近一年來在開源社區(qū)中更是百花齊放，在Twitter、淘寶網(wǎng)、新浪浪微博、騰訊QQ空間、騰訊微博等大型網(wǎng)站中均能看到它們的身影。本文將用最簡單的示例代碼描述現(xiàn)有的JavaScript模板引擎的原理，包括新一代JavaS
2、cript模板引擎artTemplate的特性實現(xiàn)原理，歡迎共同探討。artTemplate介紹artTemplate是新一代JavaScript模板引擎，它采用預編譯方式讓性能有了質(zhì)的飛躍，并且充分利用JavaScript引擎特性，使得其性能無論在前端還是后端都有極其出色的表現(xiàn)。在chrome下渲染效率測試中分別是知名引擎Mustache與microtmpl的25、32倍。除了性能優(yōu)勢外，調(diào)試功能也值得一提。模板調(diào)試器可以精確定位到引發(fā)渲染錯誤的模板語句，解決了編寫模板過程中無法調(diào)試的痛苦，讓開發(fā)變得高效，也避免了因為單個模板出錯導致整個應(yīng)用崩潰的情況
3、發(fā)生。artTemplate這一切都在1.7kb(gzip)中實現(xiàn)！JavaScript模板引擎基本原理雖然每個引擎從模板語法、語法解析、變量賦值、字符串拼接的實現(xiàn)方式各有所不同，但關(guān)鍵的渲染原理仍然是動態(tài)執(zhí)行JavaScript字符串。關(guān)于動態(tài)執(zhí)行JavaScript字符串，本文以一段模板代碼舉例：這是一段非常樸素的模板寫法，其中，”"為closeTag(邏輯語句閉合標簽)，若openTag后面緊跟“=”則會輸出變量的內(nèi)容。HTML語句與變量輸出語句被直接輸出，解析后的字符串類似：語法分析完畢一般還會返回渲染方法：渲染測試：在上面render方法中，模
4、板變量賦值采用了with語句，字符串拼接采用數(shù)組的push方法以提升在IE6、7下的性能，jQuery作者john開發(fā)的微型模板引擎tmpl是這種方式的典型代表，參見：http://ejohn.org/blog/JavaScript-micro-templating/由原理實現(xiàn)可見，傳統(tǒng)JavaScript模板引擎中留下兩個待解決的問題：1、性能：模板引擎渲染的時候依賴Function構(gòu)造器實現(xiàn)，F(xiàn)unction與eval、setTimeout、setInterval一樣，提供了使用文本訪問JavaScript解析引擎的方法，但這樣執(zhí)行JavaScrip
5、t的性能非常低下。2、調(diào)試：由于是動態(tài)執(zhí)行字符串，若遇到錯誤調(diào)試器無法捕獲錯誤源，導致模板BUG調(diào)試變得異常痛苦。在沒有進行容錯的引擎中，局部模板若因為數(shù)據(jù)異常甚至可以導致整個應(yīng)用崩潰，隨著模板的數(shù)目增加，維護成本將劇增。artTemplate高效的秘密1、預編譯在上述模板引擎實現(xiàn)原理中，因為要對模板變量進行賦值，所以每次渲染都需要動態(tài)編譯JavaScript字符串完成變量賦值。而artTemplate的編譯賦值過程卻是在渲染之前完成的，這種方式稱之為“預編譯”。artTemplate模板編譯器會根據(jù)一些簡單的規(guī)則提取好所有模板變量，聲明在渲染函數(shù)頭部，
6、這個函數(shù)類似：這個自動生成的函數(shù)就如同一個手工編寫的JavaScript函數(shù)一樣，同等的執(zhí)行次數(shù)下無論CPU還是內(nèi)存占用都有顯著減少，性能近乎極限。值得一提的是：artTemplate很多特性都基于預編譯實現(xiàn)，如沙箱規(guī)范與自定義語法等。2、更快的字符串相加方式很多人誤以為數(shù)組push方法拼接字符串會比+=快，要知道這僅僅是IE6-8的瀏覽器下。實測表明現(xiàn)代瀏覽器使用+=會比數(shù)組push方法快，而在v8引擎中，使用+=方式比數(shù)組拼接快4.7倍。所以artTemplate根據(jù)JavaScript引擎特性采用了兩種不同的字符串拼接方式。artTemplate調(diào)
7、試模式原理前端模板引擎不像后端模板引擎，它是動態(tài)解析，所以調(diào)試器無法定位到錯誤行號，而artTemplate通過巧妙的方式讓模板調(diào)試器可以精確定位到引發(fā)渲染錯誤的模板語句，例如：artTemplate支持兩種類型的錯誤捕獲，一是渲染錯誤(RenderError)與編譯錯誤(SyntaxError)。1、渲染錯誤渲染錯誤一般是因為模板數(shù)據(jù)錯誤或者變量錯誤產(chǎn)生的，渲染的時候只有遇到錯誤才會進入調(diào)試模式重新編譯模板，而不會影響正常的模板執(zhí)行效率。模板編譯器根據(jù)模板換行符記錄行號，編譯后的函數(shù)類似：當執(zhí)行過程遇到錯誤，立馬拋出異常模板對應(yīng)的行號，模板調(diào)試器再根據(jù)
8、行號反查模板對應(yīng)的語句并打印到控制臺。2、編譯錯誤編譯錯誤一般是模板語法錯誤，如
